How to setup gulp / Getting started with gulp

Getting Started with gulp

Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow. You can compile sass files, uglify and compress js files and much more. The kicker for gulp is that its a streaming build system which doesn't write temp files. It's like Pipes in bash.

Installing gulp

Before We configure tasks, we need to install gulp globally and as a dev dependency. use following command to install gulp globally

$ npm install gulp -g

after installing gulp globally you can access CLI now we will need to install gulp locally.

cd into project and run following command to install gulp as a dev dependency 

$ npm install gulp —save-dev

this command install gulp locally and add it to package.json file as a devdependencies

Installing Gulp Plugins

after installing the gulp globally and as a dev dependency we need to install gulp plugins which will do a specific task 

Sass compile (gulp-ruby-sass)

Autoprefixer (gulp-autoprefixer)

Minify CSS (gulp-cssnano)

JSHint (gulp-jshint)

Concatenation (gulp-concat)

Uglify (gulp-uglify)

Compress images (gulp-imagemin)

LiveReload (gulp-livereload)

Caching of images so only changed images are compressed (gulp-cache)

Notify of changes (gulp-notify)

Clean files for a clean build (del)

we can install all this plugin using npm

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

this will install all the gulp plugins and add it to package.son as devedependencies

Load plugins and creating tasks

We need to crate a glupfile.js in project directory and than load all the plugins in gulp file.js. like

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require(‘del');

We will use gulp.task API to create tasks.

gulp.task('styles', function() { ... )};

the about task styles can run from terminal using

$ gulp styles

Compile Sass, Autoprefix  and minify

Firstly we will create a task for SASS compiling. this task will sass run it through Autoprefixer and save it to our destination with minified version. when the task is finished this will auto-refresh the page and notify that the task is completed

gulp.task('styles', function() {
  return sass('src/styles/main.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(notify({ message: 'Styles task complete' }));
  });
}); 

   

JSHint, concat, and minify JavaScript

now we will setup a script task to lint, concat and uglify JS files and create a min file

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
  });
});

Here we use the gulp.src API to specify our input files.

Compress Images

We will create next gulp task to compressing images. this task will take any source image and run them through image min plugin and compress image and save them to targeted folder

Clean UP

Its a good idea to clean out the destination folders and rebuild the files when deploying, so all the files will be upto date. here is the gulp task for cleanup

gulp.task('clean', function() {
    return del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img']);
  });
});

Default Task

We have already defined all the tasks and we can run each task in terminal using gulp task name

but if we want than we can create a default task which can ran by using gulp command

gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

the above code clean task will run before the tasks in gulp.start. 

Watch

we use watch to watch files and perform necessary tasks. to watch files we have to create new task with gulp.watch API which will watch files.

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

  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('src/images/**/*', ['images']);

});

LiveReload

Live reload will auto-refresh page on file change. we just need to modify our gulp task watch to conferring the live reload server

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

  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

at the end we need to put all the above code together 

/*!
 * gulp
 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
 */

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

// Styles
gulp.task('styles', function() {
  return sass('src/styles/main.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

// Scripts
gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

// Images
gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

// Clean
gulp.task('clean', function() {
  return del(['dist/styles', 'dist/scripts', 'dist/images']);
});

// Default task
gulp.task('default', ['clean'], function() {
  gulp.start('styles', 'scripts', 'images');
});

// Watch
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('src/images/**/*', ['images']);

  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

});