|
| released = {{Start date and age|2013|09|26|df=yes}}<ref>https://libraries.io/npm/gulp</ref>
| latest release version = 4.0.2
| latest_release_date = {{Start date and age|2019|05|06|df=yes}}<ref name="previous-releases">{{cite web | url=https://github.com/gulpjs/gulp/blob/master/CHANGELOG.md | accessdate=2019-05-06 | title=gulp changelog}}</ref>
| language = [[JavaScript]]
| genre = [[Toolkit]]
== Need for a task runner ==
Task-runners like gulp and [[Grunt (software)|Grunt]] are built on Node.js rather than [[Node Package Manager|npm]], because the basic npm scripts are inefficient when executing multiple tasks.
Even though some developers prefer [[Node Package Manager|npm]] 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.<ref name="gulpjs/gulp">{{cite web|url=https://github.com/gulpjs/gulp/blob/master/docs/CLI.md|title=gulpjs/gulp|website=GitHub|access-date=2016-09-23}}</ref> Grunt runs tasks by transforming files and saves 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 of [[I/O]] calls and creation of 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.<ref>{{cite web|url=https://css-tricks.com/gulp-for-beginners/ |title=Gulp for Beginners |publisher=CSS-Tricks |date=2015-09-01 |accessdate=2016-12-14}}</ref> 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.<ref name="github.com"/>
== Operation ==
The gulp tasks are run from a [[command-line interface]] (CLI)<ref name="gulpjs/gulp"/> shell and require two files, <code>package.json</code>, which is used to list the various plugins for gulp, and <code>gulpfile.js</code> (or simply <code>gulpfile</code>), 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 it's 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 of <ref name=":2">{{cite web|url=https://docs.npmjs.com/cli/install|title=install {{!}} npm Documentation|website=docs.npmjs.com|access-date=2016-09-22}}</ref> The default task runs by <code>$gulp</code>. Individual tasks can be defined by gulp.task and are run by <code>gulp <task> <othertask></code>.<ref name=":1">{{cite web|url=https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md|title=gulpjs/gulp|website=GitHub|access-date=2016-09-23}}</ref> Complex tasks are defined by chaining the plugins with the help of <code>.pipe()</code> operator.<ref name=":3" />
== Anatomy of gulpfile ==
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.<ref>{{cite web|url=https://github.com/gulpjs/gulp/blob/4.0/docs/API.md |title=gulp/API.md at 4.0 · gulpjs/gulp · GitHub |publisher=GitHub |date=2016-05-12 |accessdate=2016-12-14}}</ref> <syntaxhighlight lang="javascript">
gulp.task('taskName', function () {
//do something
</syntaxhighlight>
The subsequent image task optimizes images. <Code>gulp.src()</code> retrieves all the images with the extension .png, .gif or .jpg in the directory '' 'images-orig/'.''
<Code>.pipe(imagemin())</Code> channels the images found, through the optimization process and with <code>.pipe(gulp.dest())</code> the optimized images are saved to the '' 'images/' folder''. Without <code>gulp.dest()</code> the images would indeed be optimized, but are not stored.<ref>{{cite web|url=http://magazin.phlow.de/webdesign/gulp/ |title=Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren |website=Magazin.phlow.de |date=2014-05-25 |accessdate=2016-12-14}}</ref> Since the optimized images are stored to another folder, the original images remain unaltered.<ref name=":3">{{Cite book|title=Getting Started with Gulp|last=Maynard|first=Travis|publisher=Packt Publishing Ltd|year=2015|isbn=9781784393472|___location=|pages=|via=}}</ref><syntaxhighlight lang="javascript">
// Images task
gulp.task('images', function () {
=== Scripts Task ===
In the following example, all JavaScript files from the directory '' 'scripts/' '' are optimized with <code>.pipe(uglify())</code> and <code>gulp.dest('scripts/')</code> overwrites the original files with the output.<ref>{{cite web|url=https://liechtenecker.at/front-end-workflow-mit-gulp/ |title=Front-end Workflow mit Gulp - Liechtenecker |website=Liechtenecker.at |date=2015-05-29 |accessdate=2016-12-14}}</ref> For this, one must first return to the required '' gulp-uglify plugin ''<ref>{{cite web|url=https://www.npmjs.com/package/gulp-uglify |title=gulp-uglify |website=Npmjs.com |date= |accessdate=2016-12-14}}</ref> on '' npm '' package installer and at the beginning of ''gulpfile'', the module should be defined. <syntaxhighlight lang="javascript">
// Script task
gulp.task('scripts', function () {
=== 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.<ref>{{cite web|url=https://www.npmjs.com/package/gulp-watch|title=gulp-watch|website=Npmjs.com|access-date=2016-09-23}}</ref> <syntaxhighlight lang="javascript">
// Rerun the task When a file changes
gulp.task('watch', function (cb) {
| 