Gulp vs Grunt

"Gulp is a streaming build system".

Think Grunt, but faster and less config.

• Focus on configuration

• Focus on code

• Stream based

• File based

• Plugins are designed to do one thing only

• Plugins often perform multiple tasks

• Uses leaner, simpler JavaScript code

• Uses JSON-like data configuration files

.less

.less

.less

.css

.min.css

.less

.less

.min.css

concat()

less()

minify()

rename()

2. Setup package.json

$ npm init

Create new node project

$ npm install --save-dev gulp

Add gulp to the project

3. Create gulpfile.js

$ touch gulpfile.js

Create gulpfile.js

4. Gulp tasks

var gulp = require('gulp');

gulp.task('taskName1', function(){

  ...

});

gulp.task('default', ['taskName1', 'taskName2']);

gulpfile.js

Recap

3 main keys:

Gulp API

gulp.task('taskName', [dependencies],  function(done){

  ...

});

gulp.task

gulp.task('default', ['taskName1', 'taskName2']);

gulp.src(['source/styles/*.css', '...'])

gulp.src

gulp.watch('source/styles/*.css', ['taskName']);

gulp.watch

Common Plugins and Tasks

...at least by me

var gulp = require('gulp');
var concat = require('gulp-concat');


gulp.task('css', function(){
  gulp.src('source/styles/*.css')
    .pipe(concat('style.css'))
    .pipe(gulp.dest('build/styles/'));
});

Concat files

$ npm install --save-dev gulp-concat

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(less())
    .pipe(gulp.dest('build/styles/'));
});

Compile less files

$ npm install --save-dev gulp-less

gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');


gulp.task('js', function(){
  gulp.src('source/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('build/js/'));
});

Minify Javascript

npm install --save-dev gulp-uglify

gulpfile.js

var gulp = require('gulp');
var minify = require('gulp-minify-css');


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(minify({ keepBreaks: true }))
    .pipe(gulp.dest('build/styles/'));
});

Minify CSS

npm install --save-dev gulp-minify-css

gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(minify({ keepBreaks: true }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('build/styles/'));
});

Rename

npm install --save-dev gulp-rename

gulpfile.js

gulp.task('watch', function(){
  gulp.watch(['source/styles/components/*.css'], ['css']);
  gulp.watch(['source/styles/*.less'], ['less']);
  gulp.watch(['source/js/*.js'], ['js']);
  gulp.watch(['source/*.html'], ['html']);
  gulp.watch(['source/img/**/*'], ['images']);
  gulp.watch(['source/fonts/**/*'], ['fonts']);
});

gulp.task('build', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

Watch

gulpfile.js

Grunt requires plug-ins for basic functionality such as file watching; Gulp has them built-in.

http://gulpjs.com/plugins/

around 1800 plugins

How to run Gulp?

var gulp = require('gulp');

...

gulp.task('default', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

gulpfile.js

$ gulp

command line

var gulp = require('gulp');

...

gulp.task('myGulp', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

gulpfile.js

$ gulp myGulp

command line

Recap

gulp.questions( )