Gulp.js: Difference between revisions

Revision as of 19:32, 14 September 2016

Latest revision as of 22:29, 15 December 2024

(148 intermediate revisions by 60 users not shown)

Line 1:

{{Short description|Server-side JavaScript build tool}}

{{Infobox Software

{{lowercase title}}

| logo =

{{multiple issues|

| developer = Fractal and contributors of the GitHub community

{{How-to|date=October 2016}}

| latest release version = 4.0.0

{{context|date=January 2017}}

| platform = [[Platform independence | across platforms]]

| language = [[JavaScript]]

| category = [[Toolkit]]

| license = [[MIT License]]<ref>{{Internet source | url = https://github.com/gulpjs/gulp/blob/master/LICENSE|title=License to github.com | language=en | access = 2016-05-30}} </ref>

| website = {{url|http://gulpjs.com/}}<br>{{url|www.gulpjs.com/}}

}}

{{Infobox software

| name = gulp

| logo = Gulp.js Logo.svg

| logo caption =

| logo alt =

| logo size = 100px

| collapsible =

| screenshot = <!-- Image name is enough -->

| screenshot size =

| screenshot alt =

| caption =

| other_names =

| author = Eric Schoffstall<ref name=":0">{{Cite book|title=Developing a Gulp Edge|publisher=Bleeding Edge Press|year=2014|isbn=978-1-939902-14-6|edition=1st|author1=Jed Mao |author2=Maximilian Schmitt |author3=Tomasz Stryjewski |author4=Cary Country Holt |author5=William Lubelski }}</ref>

| developer = Blaine Bublitz, Eric Schoffstall

| released = {{Start date and age|2013|09|26|df=yes}}<ref>{{cite web | url=https://libraries.io/npm/gulp/versions | access-date=2020-12-31 | title=Release Date of Version 1.0.0}}</ref><!-- As per template guideline, this is the release date of version 1.0.0 -->

| ver layout =

| discontinued =

| latest release version = 5.0.0

| latest_release_date = {{Start date and age|2024|03|29|df=yes}}<ref name="latest-releases">{{cite web | url=https://github.com/gulpjs/gulp/releases | access-date=2020-12-31 | title=Releases · gulpjs/gulp| website=[[GitHub]] }}</ref>

| latest preview version =

| latest preview date =

| repo = {{URL|https://github.com/gulpjs/gulp}}

| qid =

| programming language = [[JavaScript]] <!-- Node.js is NOT a language, it is a platform -->

| middleware =

| tools =

| engine =

| operating system = [[Linux]], [[macOS]], [[Windows]] <!-- As per template guideline, do not write "Cross-platform" here -->

| platform = [[Node.js]] <!-- As per template guideline, do not write "Cross-platform" here -->

| included with =

| replaces =

| replaced_by =

| service_name =

| size =

| standard =

| language =

| language count =

| language footnote =

| genre = [[Toolkit]]

| license = [[MIT License]]<ref>{{cite web | url=https://github.com/gulpjs/gulp/blob/master/LICENSE | title=LICENSE file on GitHub | website=[[GitHub]] | access-date=2020-12-31}}</ref><ref>{{cite web | url=https://www.npmjs.com/package/gulp | title=License field from gulp - npm | access-date=2020-12-31}}</ref>

| website =

| AsOf =

}}

'''gulp''' is an [[Open-source software|open-source]] [[JavaScript]] toolkit, used as a streaming [[build system]] (similar to a more package-focused [[Make (software)|Make]]) in [[front-end web development]].

It is a task runner built on [[Node.js]] and [[npm (software)|npm]], used for automation of time-consuming and repetitive tasks involved in web development like [[Minification (programming)|minification]], concatenation, cache busting, [[unit testing]], [[Linting software|linting]], optimization, etc.<ref>{{cite web|url=https://www.smashingmagazine.com/2014/06/building-with-gulp/ |title=Building With Gulp – Smashing Magazine |website=Smashingmagazine.com |date=11 June 2014 |access-date=2016-12-14}}</ref>

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.<ref>{{cite web|url=https://gulpjs.com/plugins/ |title=gulp.js plugin registry |website=Gulpjs.com |access-date=2016-12-14}}</ref>

'''gulp.js''' is an open source, extensible, powerful and efficient JavaScript toolkit by Fractal innovations and open source community at git, used as a streaming build system in front end web development commonly . 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.

== Overview ==

gulp<ref>{{cite web|url=https://github.jscom/gulpjs/gulp/blob/master/docs/FAQ.md|title=gulpjs/gulp|website=GitHub|access-date=2016-09-22}}</ref> is a build tool in JavaScript built on [[node streamsstream]]s. TheThese streams facilitate the connection of file operations through [[Pipeline (software)|pipelines]].<ref name="github.com">{{cite web|url=https://github.com/substack/stream-handbook |title=substack/stream-handbook: how to write node programs with streams |publisher=GitHub |access-date=2016-12-14}}</ref> gulp reads the file system and pipes the data at hand from its one single -purposed plugin to otheranother through pipesthe <code>.pipe()</code> 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 myriad ofnumerous plugins. The users can also write their own plugins to define their own tasks.<ref>{{cite web|url=https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/README.md|title=gulpjs/gulp|website=GitHub|access-date=2016-09-22}}</ref> Unlike other task runners that run tasks by configuration, gulp requires knowledge onof JavaScript and coding to define its tasks. gulp is a build system which means asideapart from running tasks, it is also capable of copying files from one ___location to another, [[compiling]], [[Software deployment|deploying]], creating notifications, unit testing, linting, etc.<ref name=":0" />

== gulpNeed vsfor Grunta 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.

Both Grunt and gulp are task runners in JavaScript built on node. Grunt runs tasks by transforming files and save as new ones in temporary folders. The output of one task is taken as input for another one and on until it reaches 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 these temporary locations. Since it streams the data it also decreases the number of I/O calls and also improves performance. Grunt uses configuration files to perform tasks whereas gulp requires its build file to consist of code. In grunt, each plugin needs to be configured to match its input ___location to the previous plugin’s output. In gulp they are automatically pipe-lined.

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 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 of [[I/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.<ref>{{cite web|url=https://css-tricks.com/gulp-for-beginners/ |title=Gulp for Beginners |publisher=CSS-Tricks |date=2015-09-01 |access-date=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"/>

== Installation ==

Gulp needs [[Node.js]] and can be installed by the [[Node Package Manager]]. To remove a previously installed gulp the command is <code>npm rm --global gulp</code>.

Install gulp globally, then initialize the project directory and install in the project locally.

'''

$ npm install --global gulp-cli

$ npm init

$ npm install --save-dev gulp'''

== 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 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 of <code>package.json</code>.<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 ==

In order to work with gulp, called gulpfile must be created. In the gulpfile is a [[JavaScript]] - file named "gulpfile.js". In this file called tasks in JavaScript are defined. This gulp tasks are run from the shell. The command <code> {{lang | en | gulp}} </code> will launch the default task. With <code> {{lang | en | gulp <task name>}} </code> the task with each taskName runs.

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.<ref name="sitepoint.com">{{cite web|url=https://www.sitepoint.com/introduction-gulp-js/|title=An Introduction to Gulp.js - SitePoint|date=2014-02-10|language=en-US|access-date=2016-09-23}}</ref>

=== Plugins ===

In addition there are a number of [http://gulpjs.com/plugins Plugins] for gulp.

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.<ref name=":1" /><ref name=":3" /> <syntaxhighlight lang="javascript">

//Adding dependencies

== Gulpfile.js ==

var gulp = require ('gulp');

In the first step all the modules must be defined in the gulpfile.js. <syntaxhighlight lang="javascript">

//Define Modules

var gulp = require ( 'gulp');

var gutil = require ( 'util-gulp');

</syntaxhighlight>

In the next step, the tasks can then be created. A gulp task is defined by ''gulp.task'' and gets a name for the task as the first parameter and the second parameter is a function.

=== Tasks ===

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> {{Internet source | url = https://github.com/gulpjs/gulp/blob/4.0/docs/API.md | title = gulp API docs | author = | ed = | = factory gulp.js | date = | language = en | access = 2016-05-28}} </ref> <syntaxhighlight lang = "javascript">

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.

gulp.task ( 'taskName', function () {

//do something

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 |access-date=2016-12-14}}</ref> <syntaxhighlight lang="javascript">

gulp.task('taskName', function () {

//do something

});

</syntaxhighlight>

Alternatively, create a task that performs several pre-definedpredefined functions can be created. TheseThose functions are passed as the second parameter usingin the form of an array. <syntaxhighlight lang="javascript">

function fn1 () {

// do something

}

function fu2fn2 () {

// Dodo something else

}

// Task with array of function names

gulp.task ( 'taskName', ['gulp.parallel(fn1','fu2'] fn2));

</syntaxhighlight>

=== Default task ===

The default task is thatto taskbe that bydefined enteringat the <code>end {{longof gulp}the |gulpfile. |It s}can commandbe isrun executedby the <code>gulp</code> command in the Shellshell. In thisthe case below, the default task does nothing.<ref name=":3" /> <syntaxhighlight lang ="javascript">

// Gulp default task

gulp.task ( 'default', [ '']fn);

</syntaxhighlight>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 by <code>gulp</code> command.<ref name="sitepoint.com"/>

</syntaxhighlight>

== Example tasks ==

=== Image Task ===

The module definition can be at the beginning of <code>Gulpfile.js</code> like so:<syntaxhighlight lang="javascript">

For the following example, the '' gulp-imagemin plugin '' <ref>[https://www.npmjs.com/package/gulp-imagemin/gulp-imagemin Plugin]</ref> required. For this, by running the command <code> {{lang | npm install --save-dev-gulp imagemin} | s} </code> installed the required plug-in shell.

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

Subsequently, the module must be at the beginning of '' gulpfile.js 'defined': <syntaxhighlight lang= "javascript">

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

</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/'.''

The subsequent image Task performs optimizing images. <Code> gulp.src () </code> retrieves all the images with the extension .png, .gif or .jpg in the directory '' <nowiki/> 'images-orig/' <nowiki/> ''. <Code> .pipe (imagemin ()) </code> schleußt the images found by the optimization process through and with <code> .pipe (gulp.dest ()) </code> are the optimized images afterwards to folder '' <nowiki/> 'images/' <nowiki/> '' saved. Without <code> gulp.dest () </code> the images would indeed optimized, but are not stored <ref> {{Internet source | url = http://magazin.phlow.de/webdesign/gulp/| Title = by starting with Gulp.js - optimizing sites automating sequences | author = | = ed | factory = | date = | language = | = access </ref> Since we store 2016-05-30}} the optimized images to another folder , the original images remain with us. <syntaxhighlight lang = "javascript">

<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 |access-date=2016-12-14 |archive-date=2017-06-16 |archive-url=https://web.archive.org/web/20170616233539/http://magazin.phlow.de/webdesign/gulp/ |url-status=dead }}</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}}</ref><syntaxhighlight lang="javascript">

// Images task

gulp.task ( 'images', function () {

return gulp.src ( 'images-orig/*. {png, gif, jpg}')

.pipe (imagemin ())

.pipe (gulp.dest ( 'dist/images/'));

});

Line 89 ⟶ 123:

=== Scripts Task ===

In the following example, all JavaScript files from the directory '' <nowiki/> 'scripts/' <nowiki/> '' are optimized with <code> .pipe (uglify ()) </code> and optimized with <code> gulp. least dest( 'scripts/') </code> overwrittenoverwrites the original files with the output.<ref> {{Internet sourcecite web| url = https://liechtenecker.at/front-end-workflow-mit-gulp/ | title = frontFront-end workflowWorkflow withmit Gulp |- author =Liechtenecker | website= edLiechtenecker.at | factory = | date =2015-05-29 | language = | access -date= 2016-0512-3014}} </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 plugin]|website=Npmjs.com |access-date=2016-12-14}}</ref> on '' npm '' installedpackage installer and at the beginning of '' gulpfile.js '' define, the module should be defined. <syntaxhighlight lang = "javascript">

// Script task

gulp.task ( 'scripts', function () {

return gulp.src ( 'scripts/*. js')

.pipe (uglify ())

.pipe (gulp.dest ( 'scripts/'));

});

</syntaxhighlight>

=== Watch Task ===

The Watch-task serves to react to changes ofin files. In the following example, the tasks ofwith the names are '' scripts '' and '' images '' are called when itany of JavaScript files or images should 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) {

gulp.watch ( '. scripts/js /**', [ 'scripts']);

gulp.watch ( 'images-orig/**', [ 'images']);

cb();

});

</syntaxhighlight>

Furthermore, it is possible to accomplish an update of the browser content using the Watch-tasks .<ref> {{Internet sourcecite web| url = https://www.browsersync.io/docs/gulp/ | Title title= Browsersync + Gulp.js | author website=Browsersync.io | = ed | factory = | access-date = | language = | access = 2016-0512-3014}} </ref> For this, there are numerous options and plugins.

==See Literature also==

* [[Grunt (software)]]

* [[Browserify]]

==References==

* {{Cite | Author = Jed Mao, Maximilian Schmitt, Tomasz Stryjewski, Cary Country Holt, William Lubelski | Title = Developing a Gulp Edge | TitelErg = The streaming Build System | Edition = | Publisher = Bleeding Edge Press | Location = | Year = 2014 | month = November | chapter = | pages = | ISBN 978-1-939902-14-6 = | format = Ebook}}

{{Reflist|30em}}

* {{Cite | Author = Den Odell | Title = Pro JavaScript Development Coding, Capabilities, and Tooling | Edition =. 1 | Publisher = Apress | Year = 2014 | chapter = Build Tools and Automation | pages = 400-408 | ISBN 978-1-4302-6268-8 =}}

== Links Literature==

*{{Cite book|title=Developing a Gulp Edge|publisher=Bleeding Edge Press|year=2014|isbn=978-1-939902-14-6|edition=1st|author1=Jed Mao |author2=Maximilian Schmitt |author3=Tomasz Stryjewski |author4=Cary Country Holt |author5=William Lubelski }}

* [Http://gulpjs.com/ Official Website]

*{{Cite book| author=Den Odell | title=Pro JavaScript Development Coding, Capabilities, and Tooling | publisher=Apress |year=2014 |chapter=Build Tools and Automation |isbn=978-1-4302-6268-8}}

* [Https://github.com/gulpjs/gulp/ gulp.js on GitHub]

*{{Cite book|title=Getting Started with Gulp|last=Maynard|first=Travis|publisher=Packt Publishing Ltd|year=2015|isbn=9781784393472}}

* [Https://css-tricks.com/gulp-for-beginners/ Gulp for Beginners - CSS-Tricks]

* [Https://www.browsersync.io/docs/gulp/ Browsersync + Gulp]

== ReferencesExternal links ==

* {{Official website}}

<References/>

* {{GitHub|gulpjs/gulp|gulp}}

[[Category:JavaScript programming tools]]

{{SORTING: Gulpjs}}

[[Category: Free Software]]

[[Category: ECMAScript]]