On this article, I collect all relevant information about Gulp to have a reference for a successful work with it!
Gulp is like a sequenced NodeJS-App, which does multiple tasks in an order (pipeline) to create a file (data-stream), e.g. SASS assets compiling…
—
I found a good article about errorhandling with “Gulp” written by Kate Hudson on following pagelink: http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/
This is the modified Gulpfile from the Roots.IO “Sage” theme, which the Awebgo template is based on. The functions for font-recalculation and image-resizing are deactivated, so there’s a faster way to watch the scss-files on change. A modification for extended error-handling is also implemented [see: .plumber()]:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 |
// ## Globals var argv = require('minimist')(process.argv.slice(2)); var autoprefixer = require('gulp-autoprefixer'); var browserSync = require('browser-sync').create(); var pathfinding = require("node-pathfinding"); var changed = require('gulp-changed'); var concat = require('gulp-concat'); var flatten = require('gulp-flatten'); var gulp = require('gulp'); var gulpif = require('gulp-if'); var imagemin = require('gulp-imagemin'); var jshint = require('gulp-jshint'); var lazypipe = require('lazypipe'); var less = require('gulp-less'); var merge = require('merge-stream'); var minifyCss = require('gulp-minify-css'); var plumber = require('gulp-plumber'); var rev = require('gulp-rev'); var runSequence = require('run-sequence'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require('gulp-uglify'); // See https://github.com/austinpray/asset-builder var manifest = require('asset-builder')('./assets/manifest.json'); // `path` - Paths to base asset directories. With trailing slashes. // - `path.source` - Path to the source files. Default: `assets/` // - `path.dist` - Path to the build directory. Default: `dist/` var path = manifest.paths; // `config` - Store arbitrary configuration values here. var config = manifest.config || { verbose : true }; // `globs` - These ultimately end up in their respective `gulp.src`. // - `globs.js` - Array of asset-builder JS dependency objects. Example: // ``` // {type: 'js', name: 'main.js', globs: []} // ``` // - `globs.css` - Array of asset-builder CSS dependency objects. Example: // ``` // {type: 'css', name: 'main.css', globs: []} // ``` // - `globs.fonts` - Array of font path globs. // - `globs.images` - Array of image path globs. // - `globs.bower` - Array of all the main Bower files. var globs = manifest.globs; // `project` - paths to first-party assets. // - `project.js` - Array of first-party JS assets. // - `project.css` - Array of first-party CSS assets. var project = manifest.getProjectGlobs(); // CLI options var enabled = { // Enable static asset revisioning when `--production` rev : argv.production, // Disable source maps when `--production` maps : !argv.production, // Fail styles task on error when `--production` failStyleTask : argv.production, // Fail due to JSHint warnings only when `--production` failJSHint : argv.production, // Strip debug statments from javascript when `--production` stripJSDebug : argv.production }; // Path to the compiled assets manifest in the dist directory var revManifest = path.dist + 'assets.json'; // ## Reusable Pipelines // See https://github.com/OverZealous/lazypipe // ### CSS processing pipeline // Example // ``` // gulp.src(cssFiles) // .pipe(cssTasks('main.css') // .pipe(gulp.dest(path.dist + 'styles')) // ``` var cssTasks = function(filename) { return lazypipe() .pipe(function() { return gulpif(enabled.failStyleTask, plumber()); }) /* .pipe(function() { return gulpif(!enabled.maps, sourcemaps.init()); }) */ .pipe(function() { return gulpif('*.less', less()); }) .pipe(function() { return gulpif('*.scss', sass({ outputStyle: 'nested', // libsass doesn't support expanded yet precision: 10, includePaths: ['.'], errLogToConsole: enabled.failStyleTask })); }) .pipe(concat, filename) .pipe(autoprefixer, { browsers: [ 'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12' ] }) .pipe(minifyCss, { advanced: false, rebase: false }) .pipe(function() { return gulpif(enabled.rev, rev()); }) .pipe(function() { return gulpif(!enabled.maps, sourcemaps.write('.', { sourceRoot: 'assets/styles/' })); })(); }; // ### JS processing pipeline // Example // ``` // gulp.src(jsFiles) // .pipe(jsTasks('main.js') // .pipe(gulp.dest(path.dist + 'scripts')) // ``` var jsTasks = function(filename) { return lazypipe() .pipe(function() { return gulpif(!enabled.maps, sourcemaps.init()); }) .pipe(concat, filename) /* .pipe(uglify, { compress: { 'drop_debugger': enabled.stripJSDebug } }) */ .pipe(function() { return gulpif(enabled.rev, rev()); }) .pipe(function() { return gulpif(!enabled.maps, sourcemaps.write('.', { sourceRoot: 'assets/scripts/' })); })(); }; // ### Write to rev manifest // If there are any revved files then write them to the rev manifest. // See https://github.com/sindresorhus/gulp-rev var writeToManifest = function(directory) { return lazypipe() .pipe(gulp.dest, path.dist + directory) .pipe(browserSync.stream, {match: '**/*.{js,css}'}) .pipe(rev.manifest, revManifest, { base: path.dist, merge: true }) .pipe(gulp.dest, path.dist)(); }; // ## Gulp tasks // Run `gulp -T` for a task summary // ### Styles // `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS. // By default this task will only log a warning if a precompiler error is // raised. If the `--production` flag is set: this task will fail outright. gulp.task('styles', ['wiredep'], function() { var merged = merge(); manifest.forEachDependency('css', function(dep) { var cssTasksInstance = cssTasks(dep.name); if (!enabled.failStyleTask) { cssTasksInstance.on('error', function(err) { console.error(err.message); this.emit('end'); }); } merged.add(gulp.src(dep.globs, { base : 'styles' }).pipe(cssTasksInstance)); }); return merged.pipe(writeToManifest('styles')); }); // ### Scripts // `gulp scripts` - Runs JSHint then compiles, combines, and optimizes Bower JS // and project JS. gulp.task('scripts', ['jshint'], function() { var merged = merge(); manifest.forEachDependency('js', function(dep) { merged.add(gulp.src(dep.globs, { base : 'scripts' }).pipe(jsTasks(dep.name))); }); return merged.pipe(writeToManifest('scripts')); }); // ### Fonts // `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory // structure. See: https://github.com/armed/gulp-flatten gulp.task('fonts', function() { return; /* return gulp.src(globs.fonts) .pipe(flatten()) .pipe(gulp.dest(path.dist + 'fonts')) .pipe(browserSync.stream()); */ }); // ### Images // `gulp images` - Run lossless compression on all the images. gulp.task('images', function() { return; /* return gulp.src(globs.images) .pipe(imagemin({ progressive: true, interlaced: true, svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}] })) .on("error", console.log) .pipe(gulp.dest(path.dist + 'images')) .pipe(browserSync.stream()); */ }); // ### JSHint // `gulp jshint` - Lints configuration JSON and project JS. gulp.task('jshint', function() { return gulp.src(['bower.json', 'gulpfile.js'].concat(project.js)).pipe(jshint()).pipe(jshint.reporter('jshint-stylish')).pipe(gulpif(enabled.failJSHint, jshint.reporter('fail'))); }); // ### Clean // `gulp clean` - Deletes the build folder entirely. gulp.task('clean', require('del').bind(null, [path.dist])); // ### Watch // `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code // changes across devices. Specify the hostname of your dev server at // `manifest.config.devUrl`. When a modification is made to an asset, run the // build step for that asset and inject the changes into the page. // See: http://www.browsersync.io gulp.task('watch', function() { browserSync.init({ files : ['{lib,templates}/**/*.php', '*.php'], proxy : config.devUrl, snippetOptions : { whitelist : ['/wp-admin/admin-ajax.php'], blacklist : ['/wp-admin/**'] } }); gulp.watch([path.source + 'styles/**/*'], ['styles']); gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']); //gulp.watch([path.source + 'fonts/**/*'], ['fonts']); //gulp.watch([path.source + 'images/**/*'], ['images']); gulp.watch(['bower.json', 'assets/manifest.json'], ['build']); }); // ### Build // `gulp build` - Run all the build tasks but don't clean up beforehand. // Generally you should be running `gulp` instead of `gulp build`. gulp.task('build', function(callback) { runSequence('styles', 'scripts', ['fonts', 'images'], callback); }); // ### Wiredep // `gulp wiredep` - Automatically inject Less and Sass Bower dependencies. See // https://github.com/taptapship/wiredep gulp.task('wiredep', function() { var wiredep = require('wiredep').stream; return gulp.src(project.css).pipe(wiredep()).pipe(changed(path.source + 'styles', { hasChanged : changed.compareSha1Digest })).pipe(gulp.dest(path.source + 'styles')); }); // ### Gulp // `gulp` - Run a complete build. To compile for production run `gulp --production`. /* gulp.task('default', ['clean'], function() { gulp.start('build'); }); */ gulp.task('default', function() { browserSync.init({ files : ['{lib,templates}/**/*.php', '*.php'], proxy : config.devUrl, snippetOptions : { whitelist : ['/wp-admin/admin-ajax.php'], blacklist : ['/wp-admin/**'] } }); gulp.watch([path.source + 'styles/**/*'], ['styles']); gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']); gulp.watch([path.source + 'fonts/**/*'], ['fonts']); gulp.watch([path.source + 'images/**/*'], ['images']); gulp.watch(['bower.json', 'assets/manifest.json'], ['build']); }); |
—
You can build your own WordPress theme with the “Sage” starter-package from Roots.IO and use the enhanced features of Gulp for the layout-design in the SASS language: https://roots.io/sage/
