As developers we often need to look at the tools we use and decide if we are using the right tool for the job. Gulp is a right tool for you.

Gulp is a streaming build system, by using node’s streams file manipulation is all done in memory, and a file isn’t written until you tell it to do so.

Much like Grunt, Gulp is a javascript task runner. Gulp however prefers code over configuration. Being that your tasks are written in code, gulp feels more like a build framework, giving you the tools to create tasks that fit your specific needs.

Installation

Gulp is easy to get installed and running. The steps are:

  1. Install Gulp Globally
  2. Install Gulp In devDependencies/plugins

Step 1:

The first step is to get gulp installed globally.

$ npm install --global gulp
 npm install gulp --save-dev

Installing gulp plugins

$ 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

Let’s create a system to combine all js & css of your theme in one file. We need to use following steps:

  1. Load in the plugins
  2. Creating tasks
  3. Execute Tasks

Load in the plugins

Next, we need to create a gulpfile.js and load in the 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');

Creating tasks

For Stylesheets(css):-

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' }));
});

For Javascripts(js):-

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' }));
});

Run Task:-

1) To execute all task

 gulp

2) To execute only css task

 gulp styles

3) To execute only js task

 gulp scripts

 

Leave a Reply

Your email address will not be published. Required fields are marked *