3/30/2017 - 10:20 AM

Gulp Operations

Gulp Operations

Getting Started

  • Installation
  • Initiate the Project
  • Install Packages
  • Configuring the Gulp File
  • Executing Gulp
  • Troubleshooting


Installing Node and NPM on Ubuntu Linux (if not already installed), using the Nde maintained Ubuntu repos.

$ curl -sL | sudo bash -  // deprectaed
& curl -sL | sudo bash -
$ sudo apt-get install nodejs
$ sudo apt-get install npm
$ sudo ln -s /usr/bin/nodejs /usr/bin/node

Installing Gulp:

$ sudo npm install --global gulp
$ sudo npm install -g gulp-cli

Create package.json

Create a package.json file in the root of the project.

  "name": "",
  "version": "0.1",
  "description": "",
  "main": "index.js",
  "keywords": [
  "author": "Marco Valente",
  "contributors": [
    "Marco Valente <> ("
  "license": "MIT"

Initiate the Project

Add the following package requirements to the package.json.

"dependencies": {
    "gulp": "latest",
    "gulp-util": "latest",
    "gulp-sass": "latest",
    "clean-css": "latest",
    "gulp-uglify": "latest",
    "gulp-concat": "latest",
    "gulp-connect": "latest",
    "gulp-sourcemaps": "latest"

gulp definition:The streaming build system

gulp-util definition: none.

gulp-sass definition: Sass plugin for Gulp..

coffee-gulp definition: A tiny module which wraps Gulp to use CoffeeScript for your gulpfile.

gulp-uglify definition: Minify files with UglifyJS.

gulp-concat definition: Concatenates files.

gulp-connect definition: Gulp plugin to run a webserver (with LiveReload).

Install Packages

Install the above defined packages to the project:

$ npm install gulp --no-bin-links 
$ npm install gulp-util --no-bin-links 
$ npm install gulp-sass --no-bin-links 
$ npm install gulp-clean-css --no-bin-links 
$ npm install gulp-uglify --no-bin-links 
$ npm install obal gulp-concat --no-bin-links 
$ npm install gulp-connect --no-bin-links 
$ npm install gulp-sourcemaps --no-bin-links 

This will create a node_modules directory in the project root.

Configuring the Gulp File (gulpfile.js)

The Gulp File defines the Gulp tasks to be carried out. This resides in the root of the project. A sample Gulp File (based on as follows:

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleancss = require('gulp-clean-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

// compile scss to css
gulp.task('styles', function() {
        .pipe(cleancss({compatibility: 'ie8'}))

// concatenate and minify javascript
gulp.task('scripts', function() {
        // .pipe(uglify())

// Rerun the task when a file changes
gulp.task('watch', function() {'assets/js', ['scripts']);'assets/scss', ['compile-styles']);

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'styles']);

The above Gulp FIle configuration is based on that in the Gulp documentation

Executing Gulp

This will launch a persistant instance of gulp, which will watch the defined folders for changes and publish them to the defined destination files.

$ gulp


NPM error

npm ERR! File: /path/to/file
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm.
npm ERR! Tell the package author to fix their package.json file. JSON.parse

Solution: Correct the JSON syntax errors in package.json.

CLI error (Windows)

'gulp' is not recognized as an internal or external command,
operable program or batch file.

Caused by missing environmental variables.

rem for future
setx NODE_PATH %AppData%\npm\node_modules
rem for current session
set NODE_PATH=%AppData%\npm\node_modules

CLI error (Linux)

Not yet encountered