6. Automate all the things
The value of a task runner
Handles preprocessing (Sass, Less, PostCSS, CoffeeScript)
Concatenate and minify files
Autoprefix CSS
Asset compression
File linting
Live reloading
12. Add gulp to an existing project
npminstallgulp--save-dev
Create and prepare your gulpfile.js
touchgulpfile.js
//Includegulp
vargulp=require('gulp');
14. Update the project includes
//Includeplug-ins
varsass=require('gulp-sass');
varautoprefix=require('gulp-autoprefixer');
varminify=require('gulp-minify-css');
15. Define a new task
Write the Gulp task that'll do all the work for us
//Compile.scss,prefixproperties,minifytheCSS
gulp.task('styles',function(){
gulp.src(['scss/*.scss'])
.pipe(sass)
.pipe(autoprefix('last2versions')
.pipe(minify())
.pipe(gulp.dest('css'));
});
Run it!
//RunourCSStask
gulpstyles
17. Default task
Because who wants to type unnecessary characters?
//Defaultgulptask
gulp.task('default',['styles']);
Add multiple tasks
gulp.task('default',['styles','js']);
Build with one word
gulp
18. The watcher
Detect changes and rerun a task
//Watchfor.scsschanges
gulp.task('default',['styles'],function(){
gulp.watch('scss/*.scss',['styles']);
});