Created
July 28, 2016 20:34
-
-
Save PaulMorel/9e3295ca939ad353414437616196f886 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*jslint node: true */ | |
'use strict'; | |
// ============================================================================ | |
// Config | |
// ============================================================================ | |
var config = { | |
projectName: 'Kaboom 2016', | |
browserSync: true, | |
basePath: { | |
src: 'assets/', | |
dev: '../dev/wp-content/themes/kaboom-wp/assets/', | |
theme: '../dev/wp-content/themes/kaboom-wp/{,*/}*.php', | |
url: '', | |
proxy: 'http://kpc04.local/Kaboom2016NEW/dev/' | |
} | |
}; | |
// ============================================================================ | |
// Load Packages | |
// ============================================================================ | |
console.time("Loaded Plugins"); // Start Measuring | |
// General | |
var gulp = require('gulp'), | |
rename = require('gulp-rename'), | |
plumber = require('gulp-plumber'), | |
request = require("request"); | |
// Styles | |
var sass = require('gulp-sass'), | |
autoprefixer = require('gulp-autoprefixer'), | |
sourcemaps = require('gulp-sourcemaps'), | |
cssnano = require('gulp-cssnano'), | |
cmq = require('gulp-combine-mq'), | |
uncss = require('gulp-uncss'); | |
// Javascript | |
var uglify = require('gulp-uglify'), | |
concat = require('gulp-concat'); | |
// Images | |
var imagemin = require('gulp-imagemin'); | |
var svgsprite = require('gulp-svg-sprite'); | |
// Browser Sync | |
var browserSync = require('browser-sync').create( config.projectName ); | |
console.timeEnd("Loaded Plugins"); // Stop Measuring | |
// ============================================================================ | |
// Task Configuration | |
// ============================================================================ | |
function onError(error) { | |
console.log(error.stack); | |
this.emit('end'); | |
} | |
// var json; | |
// request({ | |
// url: config.basePath.proxy + 'sitemap.json', | |
// json: true | |
// }, function (error, response, body) { | |
// | |
// if (!error && response.statusCode === 200) { | |
// json = JSON.parse(body); // Print the json response | |
// } | |
// }); | |
// -------------------------------------------------------- | |
// Styles | |
// -------------------------------------------------------- | |
// | |
// SASS Compiler, Source Maps, Autoprefixer | |
// | |
function compileSCSS() { | |
return gulp.src(config.basePath.src + 'scss/{,*/}/*.scss') | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(sourcemaps.init()) | |
.pipe(sass()) | |
.pipe(autoprefixer({ | |
browsers: ['last 4 versions', 'ie >= 10', 'and_chr >= 2.3'], | |
cascade: false | |
})) | |
.pipe(sourcemaps.write('./')) | |
.pipe( gulp.dest( config.basePath.dev + 'css/' ) ) | |
.pipe( browserSync.stream({match: "**/*.css"}) ); | |
} | |
// | |
// Minifier | |
// | |
function minifyCSS() { | |
return gulp.src([ | |
config.basePath.dev + 'css/*.css', | |
'!' + config.basePath.dev + 'css/*.min.css' | |
]) | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(cmq({ | |
beautify: false | |
})) | |
.pipe(cssnano()) | |
.pipe(gulp.dest(config.basePath.dev + 'css/')) | |
.pipe(browserSync.stream({ | |
match: "**/*.css" | |
})); | |
} | |
// | |
// UnCSS | |
// | |
function unCSS() { | |
var pages = []; | |
request( { | |
url: config.basePath.proxy + 'sitemap.json', | |
headers: { | |
"content-type": "application/json", | |
}, | |
json: true | |
}, function ( error, response, body ) { | |
if ( !error && response.statusCode === 200 ) { | |
for ( var key in body ) { | |
if ( body.hasOwnProperty( key ) ) { | |
pages.push( body[ key ] ); | |
} | |
} | |
} | |
} ); | |
return gulp.src([ | |
config.basePath.dev + 'css/*.css', | |
'!' + config.basePath.dev + 'css/*.min.css', | |
]) | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(rename({ | |
suffix: '.uncss.min' | |
})) | |
.pipe(uncss({ | |
html: pages, | |
ignoreSheets : [/fonts.googleapis/] | |
})) | |
.pipe(cmq({ | |
beautify: false | |
})) | |
.pipe(cssnano({ | |
svgo: false | |
})) | |
.pipe(gulp.dest(config.basePath.dev + 'css/')) | |
.pipe(browserSync.stream({ | |
match: "**/*.css" | |
})); | |
} | |
// -------------------------------------------------------- | |
// Javascript | |
// -------------------------------------------------------- | |
// | |
// Concatenation & Uglify Javascript | |
// | |
function concatJS() { | |
return gulp.src([ | |
config.basePath.src + 'js/*.js' | |
]) | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(concat('global.js')) | |
.pipe(gulp.dest(config.basePath.dev + 'js/')) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(uglify()) | |
.pipe(gulp.dest(config.basePath.dev + '/js')) | |
//.pipe( browserSync.reload ); | |
} | |
// | |
// Concatenation & Uglify Foundation Javascript | |
// | |
function foundationJS() { | |
return gulp.src([ | |
// Foundation core - needed if you want to use any of the components below | |
config.basePath.src + 'vendor/foundation-sites/js/foundation.core.js', | |
config.basePath.src + 'vendor/foundation-sites/js/foundation.util.*.js', | |
// Pick the components you need in your project | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.abide.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.accordion.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.accordionMenu.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.drilldown.js', | |
config.basePath.src + 'vendor/foundation-sites/js/foundation.dropdown.js', | |
config.basePath.src + 'vendor/foundation-sites/js/foundation.dropdownMenu.js', | |
config.basePath.src + 'vendor/foundation-sites/js/foundation.equalizer.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.interchange.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.magellan.js', | |
config.basePath.src + 'vendor/foundation-sites/js/foundation.offcanvas.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.orbit.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.responsiveMenu.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.responsiveToggle.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.reveal.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.slider.js', | |
config.basePath.src + 'vendor/foundation-sites/js/foundation.sticky.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.tabs.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.toggler.js', | |
// config.basePath.src + 'vendor/foundation-sites/js/foundation.tooltip.js', | |
]) | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(concat('foundation.js')) | |
.pipe(gulp.dest(config.basePath.dev + '/js')) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(uglify()) | |
.pipe(gulp.dest(config.basePath.dev + '/js')); | |
} | |
// -------------------------------------------------------- | |
// Images | |
// -------------------------------------------------------- | |
// | |
// Image Compression | |
// | |
function compressImages() { | |
return gulp.src([ | |
config.basePath.src + 'img/{,*/}*.{png,jpg,gif,svg}', | |
'!' + config.basePath.src + 'img/icons/*', // Negated Folder | |
]) | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(imagemin({ | |
optimizationLevel: 4, | |
multipass: true | |
})) | |
.pipe(gulp.dest(config.basePath.dev + 'img/')); | |
} | |
// | |
// SVG Sprites | |
// | |
function createSprite() { | |
return gulp.src( | |
config.basePath.src + 'img/icons/*.svg' | |
) | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(svgsprite({ | |
log: 'info', | |
shape: { | |
id: { | |
whitespace: '-' | |
}, | |
dimension: { | |
precision: 0, | |
attributes: true | |
}, | |
transform: [{ | |
svgo: { | |
plugins : [ | |
{transformsWithOnePath: { | |
floatPrecision: 0, | |
}}, | |
{collapseGroups: true}, | |
{sortAttrs: true}, | |
{cleanupIDs: true}, | |
{removeTitle: false}, | |
{convertPathData: true}, | |
{cleanupNumericValues: { | |
floatPrecision: 0, | |
}}, | |
] | |
} | |
}] | |
}, | |
svg: { | |
xmlDeclaration: false, | |
doctypeDeclaration: false, | |
precision: 1, | |
}, | |
mode: { | |
css: { | |
dest: './', | |
bust: false, | |
prefix: '@mixin icon-%s', | |
sprite: '../img/sprite.svg', | |
dimensions: true, | |
common: false, | |
mixin: 'icon-common', | |
render: { | |
scss: { | |
dest: '../scss/_sprite.scss' | |
} | |
} | |
} | |
} | |
})) | |
.pipe(gulp.dest(config.basePath.src + 'img/')); | |
} | |
// -------------------------------------------------------- | |
// Watch | |
// -------------------------------------------------------- | |
function watch() { | |
if (config.browserSync === true ) { | |
browserSync.init({ | |
files: [config.basePath.theme], | |
injectChanges: true, | |
proxy: config.basePath.proxy, | |
snippetOptions: { | |
ignorePaths: ["/wp-admin/**"] | |
}, | |
}); | |
} else { | |
console.log('Browser Sync Disabled'); | |
} | |
// Watch .scss files | |
gulp.watch(config.basePath.src + 'scss/{,*/}*.scss', compileSCSS ); | |
// Watch js files | |
gulp.watch(config.basePath.src + 'js/*.js', concatJS ); | |
gulp.watch(config.basePath.src + 'vendor/foundation-sites/js/*.js', foundationJS ); | |
// Images | |
gulp.watch([ | |
config.basePath.src + 'img/{,*/}*.{png,jpg,gif,svg}', | |
'!' + config.basePath.src + 'img/icons/*' | |
], compressImages ); | |
gulp.watch(config.basePath.src + 'img/icons/*.svg', gulp.series(createSprite, compileSCSS) ); | |
// console.log('Watching files...'); | |
} | |
// ============================================================================ | |
// Task Registration | |
// ============================================================================ | |
gulp.task(compileSCSS); | |
gulp.task(minifyCSS); | |
gulp.task(concatJS); | |
gulp.task(foundationJS); | |
gulp.task(unCSS); | |
gulp.task('js', gulp.parallel(concatJS, foundationJS)); | |
gulp.task(compressImages); | |
gulp.task(createSprite); | |
gulp.task('images', gulp.series(createSprite, compressImages, compileSCSS)); | |
gulp.task('default', watch); | |
gulp.task(watch); | |
gulp.task('test', function(){ | |
console.log('Test!'); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment