gulp.js is an open-source, extensible, powerful and efficient JavaScript toolkit by Fractal Innovations[2] and the open source community at git, used as a streaming build system in front-end web development.
| Gulp.js | |
|---|---|
| Developer(s) | Fractal and contributors of the GitHub community |
| Stable release | 4.0.0
|
| Repository | |
| Platform | Cross-platform, see Legacy browser support |
| Available in | JavaScript |
| License | MIT License[1] |
| Website | gulpjs www |
It is a task runner built on Node.js and Node Package Manager (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.[3]
gulp uses a code-over-configuration approach to define its tasks and relies on its small, single-purposed plugins to carry them out. gulp ecosystem has 300+ such plugins made available to choose from.[4]
Overview
gulp[5] is a build tool in JavaScript built on node streams. These streams facilitate the connection of file operations through pipelines[6]. gulp reads the file system and pipes the data at hand from its one single-purposed plugin to other through the .pipe() operator, 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 to create new ones. This grants the ability to perform complex tasks through linking its numerous plugins. The users can also write their own plugins to define their own tasks[7]. Unlike other task runners that run tasks by configuration, gulp requires knowledge of JavaScript and coding to define its tasks. gulp is a build system which means apart from running tasks, it is also capable of copying files from one ___location to another, compiling, deploying, creating notifications, unit testing, linting etc[2].
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[8].
gulp is to be installed globally to get access to its command line. It can then be installed separately to different project directories, facilitating the use of many versions of gulp in a single system. Before installing gulp locally to a project, the project directory is to be initialized. The command for installing is the same. While installing gulp to the project locally, package.json file must already exist in the selected directory.[2]
$ npm install --global gulp-cli $ npm init $ npm install --save-dev gulp
The first command installs gulp globally. The second command initializes the project directory and the last command installs gulp local to the project, at devDependencies in the package.json file of the project[9].
Operation
The gulp tasks are run from the Command Line Interface (CLI)[10] shell like Grunt and require package.json and gulpfile.js(simply gulpfile) in the project root directory. gulpfile is where all 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[9]. The default task runs by $gulp. Individual tasks can be defined by gulp.task and are run by gulp <task> <othertask>[8]. Complex tasks are defined by chaining the plugins with the help of .pipe() operator[11].
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 of the task as the first parameter and a function as the second parameter.
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 [12]
gulp.task ( 'taskName', function () {
//do something
});
Alternatively, a task that performs several predefined functions 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 gulp 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 is required. To install the plugin, run the command npm install --save-dev gulp-imagemin[13].
Subsequently, the module must be at the beginning of gulpfile 'defined' as:
var imagemin = require ( 'gulp-imagemin');
The subsequent image task optimizes images. gulp.src () retrieves all the images with the extension .png, .gif or .jpg in the directory 'images-orig/'.
.pipe (imagemin ()) channels the images found, through the optimization process and with .pipe (gulp.dest ()) the optimized images are saved to the 'images/' folder. Without gulp.dest () the images would indeed be optimized, but are not stored [14]. Since the optimized images are stored to another folder, the original images remain unaltered[11].
// 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/' are optimized with .pipe (uglify ()) and gulp. dest ( 'scripts/') overwrites the original files with the output [15]. For this, one must first return to the required gulp-uglify plugin [16] on npm package installer and at the beginning of gulpfile , 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 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 [17]. 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.
{{cite book}}: CS1 maint: multiple names: authors list (link) - Den Odell (2014). "Build Tools and Automation". Pro JavaScript Development Coding, Capabilities, and Tooling. Apress. ISBN 978-1-4302-6268-8.
Links
References
- ^ github
.com /gulpjs /gulp /blob /master /LICENSE - ^ a b c 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.
{{cite book}}: CS1 maint: multiple names: authors list (link) - ^ www
.smashingmagazine .com /2014 /06 /building-with-gulp / - ^ gulpjs
.com /plugins / - ^ "gulpjs/gulp". GitHub. Retrieved 2016-09-22.
- ^ github
.com /substack /stream-handbook - ^ "gulpjs/gulp". GitHub. Retrieved 2016-09-22.
- ^ a b "gulpjs/gulp". GitHub. Retrieved 2016-09-23.
- ^ a b "install | npm Documentation". docs.npmjs.com. Retrieved 2016-09-22.
- ^ "gulpjs/gulp". GitHub. Retrieved 2016-09-23.
- ^ a b Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd. ISBN 9781784393472.
- ^ github
.com /gulpjs /gulp /blob /4 .0 /docs /API .md - ^ "gulp-imagemin". npm. Retrieved 2016-09-22.
- ^ magazin
.phlow .de /webdesign /gulp / - ^ liechtenecker
.at /front-end-workflow-mit-gulp / - ^ www
.npmjs .com /package /gulp-uglify%20gulp-uglify%20plugin - ^ www
.browsersync .io /docs /gulp /