Automate Your Tasks Easily with Gulp.js Part 2

Determining Folder Structure
Gulp is flexible enough to work with any folder structure. You'll just have to understand the inner workings before tweaking it for your project.

source is the folder where we will do our work.
assets/stylesheets/style.css will be created by gulp when we process and combine our SASS files in source/scss.
The assets/javascript/bundle.js file will be created by gulp when we minify and combine all our JS files.

Writing Your First Gulp Task
Before we get right into the code I think it's very important to mention that gulp only has 4 top level functions.
gulp.task defines your tasks. Its arguments are name, deps and fn.

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

gulp.task('dependentTask', ['task-name'], function() {
  //do stuff after 'task-name' is done.
});

'task-name' refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing gulp task-name.

gulp.src points to the files we want to use. It's parameters are globs and an optional options object. It uses .pipe for chaining it's output into other plugins.

gulp.dest points to the output folder we want to write files to.

gulp.src and gulp.dest used to simply copy files looks like:

gulp.task('copyHtml', function() {
  // copy any html files in source/ to public/
  gulp.src('source/*.html').pipe(gulp.dest('public'));
});

gulp.watch method that checks to see if a file was saved. gulp.watch like gulp.task has two main forms. Both of which return an EventEmitter that emits change events. The first of which takes a glob, an optional options object, and an array of tasks as it's parameters.

// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']); 

If we want to watch all javascript files and run the jshint task whenever a javascript file is saved, we just have to replace files-to-watch with the source/javascript/**/*.js, and ['tasks', 'to', 'run'] with ['jshint'].

gulp.watch('source/javascript/**/*.js', ['jshint']);

In the above code block, when any files in the source/javascript subfolders that have an extension of .js change, then the task jshint will be run against those files.

Once gulp is installed we have to give it some instruction so it knows what tasks for perform for us. But, first, we need to figure out exactly what tasks we need to run in our project.
Lint our JavaScript(check for errors) using jshint. We’ll also need a reporter for jshint to make the output nicely formatted and color coded.
Compile our Sass files.

Install Required Plugins

$ npm install --save-dev gulp-jshint jshint-stylish gulp-sass

This will install all of the plugins we will need and add them to our devDependencies in our package.json file like we did when we installed gulp.

Now we’ll add the lint task to our gulpfile.

/* File: gulpfile.js */

// grab our packages
var gulp   = require('gulp');
var jshint = require('gulp-jshint');

// define the default task and add the watch task to it
gulp.task('default', ['watch']);

// configure the jshint task
gulp.task('jshint', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('source/javascript/**/*.js', ['jshint']);
});

So lets step through what we’ve done.
We’ve rewritten our default task to have the watch task as dependency. What this means is that running

$ gulp

will run the watch task.

Now lets look at the new jshint task. It sources any .js files that exist in source/javascript or any of it’s subdirectories. So a file at source/javascript/courage.js would be picked up for the task just as well. These files are then passed into our gulp-jshint plugin, which then passes it into the stylish reporter to give us the jshint results.

We can run this task by doing:

$ gulp jshint

Alright, now what about that watch task. It's simple actually, if a change is detected in any of our javascript files, it runs the jshint task.

Now we’ll add the compile SASS task to our gulpfile.
Sass serves as a way to extend CSS giving support for variables, nested rules, mixins, inline imports, and more. For sass compilation we’ll use gulp-sass.

/* file: gulpfile.js */

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


/* jshint task would be here from above */

gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('public/assets/stylesheets'));
});

// define the default task and add the watch task to it
gulp.task('default', ['watch']);


/* updated watch task to include sass */

gulp.task('watch', function() {
  gulp.watch('source/javascript/**/*.js', ['jshint']);
  gulp.watch('source/scss/**/*.scss', ['build-css']);
});

We can run this task by doing:

$ gulp build-css

Summary
We’ve only scratched the surface of gulp. Gulp can be as complex or as simple as you need it to be, and because it’s just code you can do just about anything you want as a task.

Sources and Ref:
https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js
https://travismaynard.com/writing/getting-started-with-gulp