Gulp

The streaming build system

Gulp

  • Command-line tool
  • Task runner
  • Uses node.js API
    • Streams
  • Plugins do less
  • Config file is simple JavaScript

Streams

Getting started

$ npm install gulp -g

Install globally

And also as project dependency to pacakge.js

$ npm install gulp --save-dev

Plugins

Install gulp plugin 

$ npm install puglin-name --save-dev

Gulpfile.js

Gulp will run file named gulpfile.js

that is located at project root directory

gulpfile.js

Gulpfile.js

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

Require modules

Define tasks

gulp.task('task-name', function() {
  // task here
};

Gulpfile.js

gulp.task('task-name', function() {

  return gulp
          .src('src/filename.js')
          .pipe(jshint())
          .pipe(jshint.reporter('default'))
          .pipe(minify())
          .pipe(gulp.dest('dist/filename.js'));

});

Gulpfile.js

var gulp = require('gulp');
var del = require('del');

gulp.task('task-clean', function() {

  del('temp/file.js');

});

Gulpfile.js

gulp.task('watch-task', function() {

    gulp.watch('js/*.js', ['task-1', 'task-2']);

});

Watch file changes

Gulpfile.js

gulp.task('default', ['task-1', 'task-2', 'task-3']); 

Run multiple tasks

Runing tasks

$ gulp

Will run task named 'default'

$ gulp task-name

Will run task named 'task-name'

Runing tasks

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function(){
  console.log('Hello!');
});
$ gulp
[17:00:00] Using gulpfile ~/demo/gulpfile.js
[17:00:00] Starting 'default'...
Hello!
[17:00:00] Finished 'default' after 102 μs

Writing plugins

  • Node modules
  • Use streams or buffers

Gulp.js

By Joonas Meriläinen

Gulp.js

  • 1,604