Resources

Gulp
Gulp Recepies

Create a project

Make a new folder and run the following code

mkdir sample-project
cd sample-project
sudo npm init

This will initialize your project and add a file package.json.

Install the gulp command

sudo npm install --global gulp-cli

Install gulp in your devDependencies

In your project directory:

sudo npm install --save-dev gulp

It will add gulp as devDependency in package.json

  // package.json
  "devDependencies": {
    "gulp": "^3.9.1"
  }

Create a gulpfile

Create a file called gulpfile.js in your project root:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

Test it out

Run the gulp command in your project directory to execute the default task:

gulp

Task is executed:

Plugins

To perform tasks we also need plugins that add functionality to Gulp. You can add as many plugins as you need.

The simplest way is to install them in batch (based on your needs), however you can also install them one by one

// batch
sudo npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del
// one plugin
sudo npm install --save-dev gulp-load-plugins

Sample file

Generally you will see there is a pattern in which plugins you use and you will prepare your default setup gulpfile.js. Here is mine:

'use strict';

var gulp = require( 'gulp' );
var env = require( 'babel-preset-env' );
var runSequence = require( 'run-sequence' );
var del = require( 'del' );

// loading in all plugins that start with 'gulp'
var plugins = require( 'gulp-load-plugins' )( {
  pattern: [ 'gulp-*', 'gulp.*', '@*/gulp{-,.}*', 'main-bower-files' ],
  replaceString: /^gulp(-|\.)/,
  camelize: true,
  rename: {
    'gulp-clean-css': 'cleanCSS'
  }
} );

// Define default destination folder
var src = 'src/';
var build = 'app/';

// TASK FOR BABEL
gulp.task( 'babel', function () {
  return gulp.src( src + 'js/getVersion.js' )
    .pipe( plugins.babel( {
      'presets': [
        [ 'env']
      ]
    } ) )
    .pipe( plugins.rename( {
      basename: 'transpiled'
    } ) )
    .pipe( gulp.dest( src + 'js/' ) )
    .pipe( plugins.notify( {
      message: 'Babel transpiled'
    } ) );
} );

// Delete CSS files - dependencies & build
gulp.task( 'clean', function () {
  return del( [
    build + 'index.html',
    build + 'css/*',
    build + 'js/*',
    build + 'lib/*',
    src + 'css/*',
    src + 'js/main.js',
    src + 'js/main.min.js',
    src + 'js/transpiled.js',
    src + 'lib/*'
  ] );
} );

// jQuery
gulp.task( 'copy-jquery', function () {
  return gulp.src( 'bower_components/jquery/dist/jquery.min.js' )
    .pipe( gulp.dest( build + 'lib/js' ) )
    .pipe( gulp.dest( src + 'lib/js' ) )
    .pipe( plugins.notify( {
      message: 'jQuery copied'
    } ) );
} );

// Bootstrap
gulp.task( 'copy-bootstrap', function () {
  return gulp.src( 'bower_components/bootstrap/dist/css/bootstrap.min.css' )
    .pipe( gulp.dest( src + 'lib/css' ) )
    .pipe( gulp.dest( build + 'lib/css' ) )
    .pipe( plugins.notify( {
      message: 'Bootstrap copied'
    } ) );
} );

// Ladda buttons
gulp.task( 'copy-ladda', function () {
  return gulp.src( 'node_modules/ladda/dist/**' )
    .pipe( gulp.dest( src + 'lib/ladda' ) )
    .pipe( gulp.dest( build + 'lib/ladda' ) )
    .pipe( plugins.notify( {
      message: 'Ladda copied'
    } ) );
} );

// Copy html
gulp.task( 'copy-html', function () {
  return gulp.src( src + 'index.html' )
    .pipe( gulp.dest( build ) )
    .pipe( plugins.notify( {
      message: 'HTML copied'
    } ) );
} );

// Concatenate & Minify JS
gulp.task( 'scripts', function () {
  // return gulp.src( src + 'js/transpiled.js' )
  return gulp.src( src + 'js/getVersion.js' )
    .pipe( plugins.concat( 'main.js' ) )
    .pipe( gulp.dest( build + './js/' ) )
    .pipe( gulp.dest( src + './js/' ) )
    .pipe( plugins.notify( {
      message: 'Scripts minified and copied'
    } ) )
    .pipe( plugins.livereload() );
} );

var swallowError = function ( err ) {
  // gulputil.log(err.toString());
  process.stdout.write( err );
  this.emit( 'end' );
};

// Build CSS and it's minified version from LESS
gulp.task( 'less', function () {
  return gulp.src( src + './less/main.less' )
    .pipe( plugins.less()
      // .on('error', sass.logError))
      .on( 'error', swallowError ) )
    .pipe( plugins.autoprefixer() )
    .pipe( plugins.rename( {
      basename: 'style'
    } ) )
    .pipe( gulp.dest( build + './css/' ) )
    .pipe( plugins.rename( {
      suffix: '.min'
    } ) )
    .pipe( plugins.cleanCSS( {
      keepBreaks: false,
      compatibility: 'ie9'
    } ) )
    .pipe( gulp.dest( build + './css/' ) )
    .pipe( gulp.dest( src + './css/' ) )
    .pipe( plugins.notify( {
      message: 'LESS/CSS minified and copied'
    } ) );
} );


// The default run action
gulp.task( 'default', function () {
  runSequence(
    [ 'clean' ], [ 'less' ], [ 'copy-html', 'copy-ladda' ,'copy-jquery', 'copy-bootstrap' ], // parallel
    //[ 'babel' ],
    [ 'scripts' ]
  );
} );

// Rerun the task when a file changes
gulp.task( 'watch', function () {
  plugins.livereload.listen();
  gulp.watch( [ src + 'js/*.js', src + 'less/*.less', src + 'index.html' ], [ 'default' ] );
} );

Have fun using Gulp in your projects!