Gulp.js

gulp.js is an open source, extensible, powerful and efficient JavaScript toolkit by Fractal Innovations and the open source community at git, used as a streaming build system in front end web development.

Gulp.js
File:Gulp.js logo.png gulp.js logo
Developer(s)	Fractal and contributors of the GitHub community
Stable release	4.0.0
Repository	github.com/gulpjs/gulp
Platform	Cross-platform, see Legacy browser support
Available in	JavaScript
License	MIT License[1]
Website	gulpjs.com www.gulpjs.com

It is a task runner built on Node.js and npm, used for automation of time consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, image optimization etc.

gulp uses a code-over-configuration approach to define its tasks and relies on its small, single purposed plugins to carry them out. gulp has 300+ such plugins made available to choose from.

Overview

gulp.js is a build tool in JavaScript built on node streams. These streams facilitate the connection of file operations through pipelines. gulp reads the file system and pipes the data at hand from its one single purposed plugin to other through pipes doing one task at a time. The original files are not affected until all the plugins are processed. It can be configured either to modify the original files or create new ones. This grants the ability to perform complex tasks through linking its myriad of plugins. The users can also write their own plugins to define their own tasks. gulp requires knowledge on JavaScript and coding to define its tasks. gulp is a build system which means aside from running tasks it is also capable of copying files from one ___location to another, compiling, deploying, creating notifications, unit testing, linting etc.

Why gulp over Grunt?

Both Grunt and gulp are task runners in JavaScript built on node. Grunt runs tasks by transforming files and saves as new ones in temporary folders. The output of one task is taken as input for another and so on until the output reaches the destination folder. This involves a lot of I/O calls and many temporary files. Whereas gulp streams through the file system and does not require any of these temporary locations decreasing the number of I/O calls thus, improving performance. Grunt uses configuration files to perform tasks whereas gulp requires its build file to be coded. In grunt, each plugin needs to be configured to match its input ___location to the previous plugin’s output. In gulp, the plugins are automatically pipe-lined.

Installation

gulp needs Node.js and can be installed through the Node Package Manager.

To remove a previously installed gulp the command used is npm rm --global gulp.

gulp is to be installed globally and then, locally after initialising the project directory. While installing the project locally, package.json file must already exist in the selected directory.

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

This command installs gulp locally and saves at devDependencies in the package.json file.

Operation

This gulp tasks are run from the Command Line Interface (CLI) shell like Grunt and require package.json and gulpfile.js in the project root directory. gulpfile.js is where the plugins are loaded and the tasks are defined. First, all the necessary modules are loaded and then tasks are defined in the gulpfile. All the necessary plugins specified in the gulpfile are installed into the devDependencies. The default task runs by $gulp. Individual tasks can be defined by gulp.task and are run by gulp <task> <othertask>. Complex tasks are defined by chaining the plugins with the help of .pipe() operator.

gulpfile

To start with, the necessary modules must be defined in gulpfile.js

//Defining Modules
var gulp = require ( 'gulp');
var gutil = require ( 'util-gulp');

The tasks can then be created. A gulp task is defined by gulp.task and takes the name for the task as the first parameter and the second parameter is a function.

The following example shows the creation of a gulp tasks. The first parameter taskName is mandatory and specifies the name by which the task in the shell can be executed ^[2]

gulp.task ( 'taskName', function () {
//do something
});

Alternatively, a task that performs several predefined functions that can be created. Those functions are passed as the second parameter in the form of an array.

function fn1 () {
// do something
}

function fu2 () {
// Do something else
}

// Task with array of function names
gulp.task ( 'taskName', ['fn1','fu2']);

Default task

The default task is created by entering the {{long gulp} | | s} in the Shell. In the case below, the default task does nothing.

// Gulp default task
gulp.task ( 'default', [ '']);

Example tasks

Image Task

For the following example, the gulp-imagemin plugin ^[3] required. For this, by running the command [s] Error: {{Lang}}: unrecognized language tag: npm install --save-dev-gulp imagemin} (help) installs the required plug-in shell.

Subsequently, the module must be at the beginning of gulpfile.js 'defined' as:

var imagemin = require ( 'gulp-imagemin');

The subsequent image Task performs optimising images. gulp.src () retrieves all the images with the extension .png, .gif or .jpg in the directory 'images-orig/' . .pipe (imagemin ()) schedules the images found by the optimisation process through and with .pipe (gulp.dest ()) are the optimised images afterwards to the 'images/' folder to be saved. Without gulp.dest () the images would indeed optimise, but are not stored ^[4] Since we store the optimized images to another folder and the original images remain with us.

// Images task
gulp.task ( 'images', function () {
    gulp.src ( 'images-orig/*. {png, gif, jpg}')
        .pipe (imagemin ())
        .pipe (gulp.dest ( 'images/'));
});

Scripts Task

In the following example, all JavaScript files from the directory 'scripts/' .pipe (uglify ()) are optimized with gulp. least ( 'scripts/') overwritten ^[5] For this, one must first return to the required gulp-uglify plugin ^[6] on npm package installer and at the beginning of gulpfile.js , the module should be defined.

//Script task
gulp.task ( 'scripts', function () {
    gulp.src ( 'scripts/*. js')
        .pipe (uglify ())
        .pipe (gulp.dest ( 'scripts/'));
});

Watch Task

The Watch-task serves to react to changes in files. In the following example, the tasks with the names scripts and images are called when any of JavaScript files or images should change in the specified directories.

// Rerun the task When a file changes
gulp.task ( 'watch', function () {
    gulp.watch ( '. scripts/js **', [ 'scripts']);
    gulp.watch ( 'images-orig/**', [ 'images']);
});

Furthermore, it is possible to accomplish an update of the browser content using the Watch-tasks ^[7] For this, there are numerous options and plugins.

Literature

• Jed Mao, Maximilian Schmitt, Tomasz Stryjewski, Cary Country Holt, William Lubelski (2014). Developing a Gulp Edge (1st ed.). Bleeding Edge Press. ISBN 978-1-939902-14-6.
• "Build Tools and Automation", {{citation}}: Cite has empty unknown parameter: |ISBN 978-1-4302-6268-8= (help); Missing or empty |title= (help); Unknown parameter |Author= ignored (|author= suggested) (help); Unknown parameter |Publisher= ignored (|publisher= suggested) (help); Unknown parameter |Title= ignored (|title= suggested) (help); Unknown parameter |Year= ignored (|year= suggested) (help)

Links

• Official Website
• gulp.js on GitHub
• Gulp for Beginners - CSS-Tricks
• Browsersync + Gulp

References

1. "License to github.com". {{cite web}}: Unknown parameter |access= ignored (|access-date= suggested) (help)
2. "gulp API docs". {{cite web}}: Cite has empty unknown parameter: |ed= (help); Unknown parameter |access= ignored (|access-date= suggested) (help)
3. www.npmjs.com/package/gulp-imagemin/gulp-imagemin%20Plugin
4. {{Cite | url = http://magazin.phlow.de/webdesign/gulp/%7C Title = by starting with Gulp.js - optimising sites automating sequences | author = | = ed | factory = | date = | language = | = access
5. "front-end workflow with Gulp". {{cite web}}: Cite has empty unknown parameter: |factory= (help); Unknown parameter |= ignored (help); Unknown parameter |access= ignored (|access-date= suggested) (help)
6. gulp-uglify plugin
7. https://www.browsersync.io/docs/gulp/. {{cite web}}: Cite has empty unknown parameter: |factory= (help); Missing or empty |title= (help); Unknown parameter |= ignored (help); Unknown parameter |Title= ignored (|title= suggested) (help); Unknown parameter |access= ignored (|access-date= suggested) (help)

Template:SORTING: Gulpjs