 | This article has multiple issues. Please helpimprove it or discuss these issues on thetalk page.(Learn how and when to remove these messages) (Learn how and when to remove this message)
|
 | |
| Original author(s) | Eric Schoffstall[1] |
|---|---|
| Developer(s) | Blaine Bublitz, Eric Schoffstall |
| Initial release | 26 September 2013; 11 years ago (2013-09-26)[2] |
| Stable release | |
| Repository | github |
| Written in | JavaScript |
| Operating system | Linux,macOS,Windows |
| Platform | Node.js |
| Type | Toolkit |
| License | MIT License[4][5] |
| Website | gulpjs |
gulp is anopen-sourceJavaScript toolkit, used as a streamingbuild system (similar to a more package-focusedMake) infront-end web development.
It is a task runner built onNode.js andnpm, used for automation of time-consuming and repetitive tasks involved in web development likeminification, concatenation, cache busting,unit testing,linting, optimization, etc.[6]
gulp uses a code-over-configuration approach to define its tasks and relies on its small, single-purpose plugins to carry them out. The gulp ecosystem includes more than 3500 such plugins.[7]
gulp[8] is a build tool in JavaScript built onnode streams. These streams facilitate the connection of file operations throughpipelines.[9] gulp reads the file system and pipes the data at hand from one single-purposed plugin to another 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.[10] 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.[1]
Task-runners like gulp andGrunt are built on Node.js rather thannpm because the basic npm scripts are inefficient when executing multiple tasks.Even though some developers prefernpm scripts because they can be simple and easy to implement, there are numerous ways where gulp and Grunt seem to have an advantage over each other, and the default provided scripts.[11] Grunt runs tasks by transforming files and saves them as new ones in temporary folders, and 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 ofI/O calls and the creation of many temporary files. Whereas gulp streams through the file system do not require any of these temporary locations, decreasing the number of I/O calls thus, improving performance.[12] 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.[9]
The gulp tasks are run from acommand-line interface (CLI)[11] shell and require two files,package.json, which is used to list the various plugins for gulp, andgulpfile.js (or simplygulpfile), These, as per build tool convention, are often found in the root directory of the package's source code. The gulpfile contains most of the logic that gulp needs to run its build tasks. First, all the necessary modules are loaded and then tasks are defined in the gulpfile. All the necessary plugins specified in the gulpfile are listed in the devDependencies section ofpackage.json.[13] The default task runs by$gulp. Individual tasks can be defined by gulp.task and are run bygulp <task> <othertask>.[14] Complex tasks are defined by chaining the plugins with the help of.pipe() operator.[15]
gulpfile is the place where all the operations are defined in gulp. The basic anatomy of the gulpfile consists of required plugins included at the top, definition of the tasks and a default task at the end.[16]
Any installed plugin that is required to perform a task is to be added at the top of the gulpfile as a dependency in the following format.[14][15]
//Adding dependenciesvargulp=require('gulp');
The tasks can then be created. A gulp task is defined bygulp.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 parametertaskName is mandatory and specifies the name by which the task in the shell can be executed.[17]
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.
functionfn1(){// do something}functionfn2(){// do something}// Task with array of function namesgulp.task('taskName',gulp.parallel(fn1,fn2));
The default task is to be defined at the end of the gulpfile. It can be run by thegulp command in the shell. In the case below, the default task does nothing.[15]
// Gulp default taskgulp.task('default',fn);
The default task is used in gulp to run any number of dependent sub tasks defined above in a sequential order automatically. gulp can also monitor source files and run an appropriate task when changes are made to the files. The sub tasks are to be mentioned as the elements of the array in the second parameter. The process can be triggered by simply running the default task bygulp command.[16]
The module definition can be at the beginning ofGulpfile.js like so:
varimagemin=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. Withoutgulp.dest() the images would indeed be optimized, but are not stored.[18] Since the optimized images are stored to another folder, the original images remain unaltered.[15]
// Images taskgulp.task('images',function(){returngulp.src('images/*.{png,gif,jpg}').pipe(imagemin()).pipe(gulp.dest('dist/images/'));});
In the following example, all JavaScript files from the directoryscripts/ are optimized with.pipe(uglify()) andgulp.dest('scripts/') overwrites the original files with the output.[19] For this, one must first return to the requiredgulp-uglify plugin[20] onnpm package installer and at the beginning ofgulpfile, the module should be defined.
// Script taskgulp.task('scripts',function(){returngulp.src('scripts/*.js').pipe(uglify()).pipe(gulp.dest('scripts/'));});
The Watch-task serves to react to changes in files. In the following example, the tasks with the namesscripts andimages are called when any of JavaScript files or images change in the specified directories.[21]
// Rerun the task When a file changesgulp.task('watch',function(cb){gulp.watch('scripts/js/**',scripts);gulp.watch('images/**',images);cb();});
Furthermore, it is possible to accomplish an update of the browser content using the Watch-tasks.[22] For this, there are numerous options and plugins.
