Getting started with Gulp – The JavaScript Task Runner

1. What is Gulp:
   • Gulp.js is a JavaScript task runner that helps to perform repetitive tasks like:
     • CSS Preprocessing.
     • JavaScript linting.
     • Unit Testing.
     • Image optimization.
     • Minification of JS and CSS files.
     • Concatenating files.
     • Reloading the browser etc.
2. Installing Gulp:
   • It’s a command line utility. It uses Node.js and installed via npm so it requires node and npm.
   • Command to install Gulp:
     npm install -g gulp
     (-g is if you want to use it as a command line tool)
     On successful installation, it will put the gulp command in your system path allowing it to be run from any directory.
   • You can check gulp version and installation confirmation by running: gulp --version
   • Gulp setup requires two file that is package.json and a gulpfile named gulpfile.js.
3. Gulp setup needs: package.json:
   • This file is used by npm to store metadata for projects published as npm modules.
   • This JSON file enables us to track and install all of our development dependencies.
   • Below is a sample package.json having dependencies as gulp plugins which we will use for our demo so create a package.json in your root project directory and write below code in it and save.

     {
         "name": "gulp-demo",
         "version": "0.1.0",
         "devDependencies": {
             "gulp": "^3.9.1",
             "gulp-concat": "^2.6.1",
             "gulp-rename": "^1.2.2",
             "gulp-uglify": "^2.1.0"
         }
     }

   • Now run  npm install  to install gulp and gulp plugins.
4. Gulp setup needs: gulpfile.js:
   • This file is named gulpfile.js and is used to configure or define tasks and load gulp plugins.
   • It is comprised of the following parts:
     • task: used for defining a task.
     • pipe: takes in a text stream and sends it to a function.
     • watch: run a function when a file changes.
     • src: get a stream from a source file.
     • dest: send the stream to a new folder.
5. Setting up our demo files:
   • package.json: This file you must have already created from above post at point 4 and running ‘npm install’ to install all required packages/plugins for gulp.
   • gulpfile.js: Below is the gulpfile.js code which we will use for our demo and it uses below gulp plugins:
     • concat: To concat all files.
     • rename: To make sure HTML is written correctly that is validating HTML page with htmlhint.
     • uglify: To minify js file.
     • watch: To watch mentioned path/files for modifications and then apply concat/rename/uglify if files are changed or new files are created at a specified path.
       Create a gulpfile.js in your root project directory and write below code in it and save.

       // Include gulp
       var gulp = require('gulp');
       
       // Include our plugins
       var concat = require('gulp-concat');
       var uglify = require('gulp-uglify');
       var rename = require('gulp-rename');
       
       //define the task
       gulp.task('scripts', function() {
           return gulp.src('js/*.js') //return the stream from all .js files in the js folder
           .pipe(concat('global.js')) //Concatenate the files
           .pipe(rename('global.min.js')) // Change the file name to global.min.js
           .pipe(uglify()) // Minify the scripts
           .pipe(gulp.dest('build/js')); //Send the stream to the new destination folder
       });
       
       gulp.task('watch', function() { // Watch Files For Changes
           gulp.watch('js/*.js', ['scripts']); // Watch .js files
       });
       
       // Default Task
       gulp.task('default', ['scripts']); //Tell the task manager to run the task

   • For testing gulp, we are using two simple js file: js/test_one.js and js/test_two.js
   • js/test_one.js

     function test_one () {
      alert('test_one function');
     }

   • js/test_two.js
     

     function test_two () {
      alert('test_two function');
     }

   • That’s all for our demo files so the structure of files should look like below:
     
6. Using gulp: (Run all below mentioned commands from command line from the root path of your project)
   • Run gulp  and you will see that all js file content will be concatenated to a file new global.js, then renamed it to global.min.js, then minified it and store at build/js.
   • Run gulp watch and modify any js file and see in your command line that gulp will again process your file as it keeps watching for the new file or changes to an existing file and the file global.min.js will be re-created at build directory.
7. So this is how you can start with gulp.js and learn how to use it.
   There are many more Gulp plugins available which you can check at http://gulpjs.com/plugins/ and start using it in your project as per your need.

Reference:

• http://gulpjs.com/
• http://www.lottejackson.com/learning/getting-up-and-running-with-gulp
• https://www.sitepoint.com/introduction-gulp-js/
• http://brandonclapp.com/what-is-gulp-js-and-why-use-it/