This post is not well structured, but contains lots of useful information about Gulp and front end development using Gulp. By the way, i'm not a front end developer. But i think it is worth it. To remember

"I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail"

What is Gulp ?

  • An JavaScript task runner that helps you automate your development process (Those who have already been familiar with Jenkins like tools and Maven, Gradle etc, will understand Gulp logic easily)
  • An automation tool to perform testing - unit testing, end to end testing etc.
  • CSS preprocessing/compilation - just be far away from me :()
  • You can also automate your deployment processes.
  • Refreshing browser when any file changed

How Gulp Works ?

  • There are 4 APIs that you should get to know. It's easy to use and understand.
    • gulp.task : defining a task
    • gulp.src : reading files in
    • gulp.dest : writing files out
    • gulp.watch : watching files for change

First Project with Gulp

  • Step 1: You need "npm" to initialize a gulp project.
    • Install npm, and i'm not interested in how to install NodeJS into your machine. Just install it. - I'm an Ubuntu guy and just need to run
    • sudo apt-get install npm
    • sudo apt-get install nodejs-legacy - take a look this link to understand why you should run this after npm installation
  • Step 2: Create a project folder and run "npm init"
    • mkdir mygulpproject
    • cd mygulpproject
    • npm init - after you did this, a file named package.json will be created.
  • Step 3: Install gulp globally
    • npm install --global gulp
  • Step 4: Install gulp locally - in devDependencies
    • npm install --save-dev gulp - after this command, "devDependencies" will be added into package.json file to denote "gulp" meta information
{
  "name": "mygulpproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": ""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0"
  }
}
  • Step 5: Create a new gulpfile.js in your project root.
    • touch gulpfile.js
  • Step 6: Run below to get gulp utilities

    • $ npm install --save-dev gulp-util
  • Step 7: In the gulp file, write some tasks that you want to be perform.

// add our gulp dependencies
var gulp  = require('gulp'),  
    util = require('gulp-util');

// log message
gulp.task('default', function() {  
  return util.log('Gulp is running!')
});
  • Step 8: Lets get to our root directory again and run gulp, then you will see some output like this;