Gulp scripts

In

Install

1
2
npm install -g gulp
gulp -v # check version

Use

  1. Install for the project

    1
    2
    3
    4
    # --save-dev will only add the dependencies to dev, not production
    npm install --save-dev gulp
    npm install --save-dev gulp-concat # concat files
    npm install --save-dev gulp-uglify # minify

  2. Go to gulpfile.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /*
     * Dependencies
     */
    var gulp = require('gulp'),
        concat = require('gulp-concat'),
        uglify = require('gulp-uglify');

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

  3. With that you can run on the terminal:

    1
    gulp demo

Gulp.js API

  • gulp.task()

    • Basic use

      1
      2
      3
      4
      5
      6
      7
      # `gulp.task(nameTask, functionDefinition, callback)`
      /*
       * Configure 'demo'
       */
      gulp.task('demo', function () {
      // define 'demo' task
      });

    • Task list

      1
      2
      // A task 'statics' will run other 2 asynchronous tasks
      gulp.task('statics', ['myTask1', 'myTask2']);

    • Task dependecies

      1
      2
      3
      4
      5
      6
      gulp.task('myTask2', ['myTask'], function () {
      /*
       * 'myTask2' function
       * it will only be executed after 'myTask' has finsihed
       */
       });

    • Default task

      1
      2
      3
      4
      5
      6
      7
      8
      // it will run just by tyoing `gulp` in the terminal
      gulp.task('default', function () {
          /*
           * Default rask code
           */
          });
          // you can also make your default a list of tasks
          gulp.task('default', ['myTask1', 'myTask2']);

  • gulp.src()

    1
    2
    3
    4
    5
    6
    gulp.src('js/source/1.js') #get only 'js/source/1.js'
    gulp.src('js/source/*.js') # all the '.js' files in `js/source/`
    gulp.src('js/**/*.js') #get only '.js' files from `js/` and its subfolder
    gulp.src('!js/source/2.js') # exclude `2.js'`
    gulp.src(`static/*.+(js|css)`) # all the files which finish in `js` or `css`
    # this can be piped or be sent to `gulp.dest()`

  • pipe()

    1
    2
    3
    //read, edit stream data
    .pipe(concat('todo.js'))
    .pipe(uglify())

  • gulp.dest()

    1
    2
    // write the stream in the folder
    .pipe(gulp.dest('js/build/'))

  • gulp.watch()

    1
    2
    3
    4
    5
    6
    // check the file and execute the task when it is edited
    gulp.watch('js/source/*.js', ['myTask']);
    // you can use it with a callback too
    gulp.watch('js/source/*.js', function(){
        // callback function
    });

Plugins

1
2
# Add jshint task
npm install --save-dev gulp-jshint

Then we can do:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
 * Dependencies
 */
var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');
    
/*
 * Configure the 'demo' task
 */
gulp.task('demo', function () {
    gulp.src('js/source/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('todo.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js/build/'))
});