Gulp.js: Difference between revisions

Revision as of 22:10, 22 October 2016

Latest revision as of 22:29, 15 December 2024

(70 intermediate revisions by 49 users not shown)

Line 1:

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

{{How to|date=October 2016}}

{{lowercase title}}

{{Citation style|date=October 2016}}

{{multiple issues|

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

{{Infobox Software

{{context|date=January 2017}}

| logo = Gulp.js logo.png

| developer = Fractal and contributors of the GitHub community

| latest release version = 4.0.0

| language = [[JavaScript]]

| category = [[Toolkit]]

| platform = [[Cross-platform]], see [[#Legacy browser support|Legacy browser support]]

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

}}

{{Infobox Softwaresoftware

'''gulp.js''' is an [[Open-source software|open-source]], extensible, powerful and efficient [[JavaScript]] toolkit by Fractal Innovations<ref name=":0">{{Cite book|title=Developing a Gulp Edge|last=|first=|publisher=Bleeding Edge Press|year=2014|isbn=978-1-939902-14-6|edition=1st|___location=|pages=|via=|author = Jed Mao, Maximilian Schmitt, Tomasz Stryjewski, Cary Country Holt, William Lubelski}}</ref> and the open source community at [[git]], used as a streaming [[build system]] in [[front-end web development]].

| name = gulp

| logo = Gulp.js logoLogo.pngsvg

| logo caption =

| logo alt =

| logo size = 100px

| collapsible =

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

| screenshot size =

| screenshot alt =

| caption =

| other_names =

'''gulp.js'''| isauthor an [[Open-source software|open-source]], extensible, powerful and efficient [[JavaScript]] toolkit by Fractal Innovations = Eric Schoffstall<ref name=":0">{{Cite book|title=Developing a Gulp Edge|last=|first=|publisher=Bleeding Edge Press|year=2014|isbn=978-1-939902-14-6|edition=1st|___locationauthor1=|pages=|via=|author = Jed Mao, |author2=Maximilian Schmitt, |author3=Tomasz Stryjewski, |author4=Cary Country Holt, |author5=William Lubelski }}</ref> and the open source community at [[git]], used as a streaming [[build system]] in [[front-end web development]].

| 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 = 45.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 =

| categorygenre = [[Toolkit]]

| license = [[MIT License]]<ref>{{urlcite web | url=https://github.com/gulpjs/gulp/blob/master/LICENSE | title=LicenseLICENSE tofile github.comon GitHub | languagewebsite=en[[GitHub]] | access-date=2020-12-31}}</ref><ref>{{cite web | url=https://www.npmjs.com/package/gulp 2016| title=License field from gulp - npm | access-date=2020-0512-3031}}</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 [[Nodenpm Package Manager(software)|Node Package Manager (npm)]], used for automation of time-consuming and repetitive tasks involved in web development like [[Minification (programming)|minification]], concatenation, [https://www.npmjs.com/package/gulp-buster cache busting], [[unit testing]], [[Linting software|linting]], [https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en image optimization], etc.<ref>{{urlcite 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-purposedpurpose plugins to carry them out. The gulp ecosystem hasincludes 300+more suchthan plugins3500 made availablesuch to choose fromplugins.<ref>{{urlcite web|httpurl=https://gulpjs.com/plugins/ |title=gulp.js plugin registry |website=Gulpjs.com |access-date=2016-12-14}}</ref>

== Overview ==

gulp<ref>{{Citecite web|url=https://github.com/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 stream]]s. These streams facilitate the connection of file operations through [[Pipeline (software)|pipelines]].<ref name="github.com">{{urlcite 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 the <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 numerous plugins. The users can also write their own plugins to define their own tasks.<ref>{{Citecite 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 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]], [[Software deployment|deploying]], creating notifications, unit testing, linting, etc.<ref name=":0" />

== Need for a task runner ==

The main reason why taskTask-runners like gulp and [[Grunt (software)|gruntGrunt]] are built on nodeNode.js israther because, the basicthan [[Node Package Manager|npm]] scriptsbecause arethe notbasic efficientnpm whenscripts itare comesinefficient towhen executing multiple tasks.

Even though a fewsome developers prefer [[Node Package Manager|npm]] scripts tobecause they can be simple and easy to implement, there are numerous ways where gulp and gruntGrunt seem to have an advantage over each other, and the default provided scripts.<ref name="gulpjs/gulp">{{Citecite 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 and doesdo not require any of these temporary locations, decreasing the number of I/O calls thus, improving performance.<ref>{{urlcite 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 gruntGrunt, each plugin needs to be configured to match its input ___location to the previous plugin’splugin's output. In gulp, the plugins are automatically pipe-lined.<ref name="github.com"/>

== Operation ==

The gulp tasks are run from thea [[Commandcommand-line interface|Command Line Interface]] (CLI)]]<ref name="gulpjs/gulp"/> shell like Grunt 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 project root directory of the package's source code. The gulpfile iscontains wheremost allof the pluginslogic arethat loadedgulp andneeds theto tasksrun areits definedbuild 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 installedlisted intoin the devDependencies section of <code>package.json</code>.<ref name=":2">{{Citecite 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">{{Citecite 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" />

The gulp tasks are run from the [[Command-line interface|Command Line Interface (CLI)]]<ref name="gulpjs/gulp"/> 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.<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 ==

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">{{Citecite 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 ===

Any installed plugin that is required to perform a task is to be added at the top of the gulpfile as a depedencydependency in the following format.<ref name=":1" /><ref name=":3" /> <syntaxhighlight lang="javascript">

//Adding dependencies

var gulp = require ( 'gulp');

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

</syntaxhighlight>

Line 41 ⟶ 77:

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>{{urlcite 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 () {

//Defining tasks

//do something

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

//do something

});

</syntaxhighlight>

Line 50 ⟶ 85:

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. <syntaxhighlight lang="javascript">

function fn1 () {

// do something

}

function fn2 () {

// Dodo something else

}

// Task with array of function names

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

</syntaxhighlight>

=== Default task ===

The default task is to be defined at the end of the gulpfile. It can be run by the <code>gulp</code> command in the shell. In the 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"/>

Line 71 ⟶ 106:

=== Image Task ===

Subsequently, theThe module mustdefinition can be at the beginning of ''<code>Gulpfile.js</code> gulpfilelike 'defined' asso: ''<syntaxhighlight lang= "javascript">

For the following example, the '' [https://www.npmjs.com/package/gulp-imagemin gulp-imagemin] plugin'' is required. To install the plugin, run the command <code> npm install --save-dev gulp-imagemin</code>.<ref>{{Cite web|url=https://www.npmjs.com/package/gulp-imagemin|title=gulp-imagemin|website=npm|access-date=2016-09-22}}</ref>

var gutilimagemin = require ( 'utilgulp-gulpimagemin');

Subsequently, the module must be at the beginning of '' gulpfile 'defined' as: ''<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 '' <nowiki/> 'images-orig/'.''

''<nowiki/>'' <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 ''<nowiki/> 'images/' folder<nowiki/>''. 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|___location=|pages=|via=}}</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 90 ⟶ 123:

=== Scripts Task ===

In the following example, all JavaScript files from the directory '' <nowiki/> 'scripts/' <nowiki/> '' 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 = 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>{{urlcite web|url=https://www.npmjs.com/package/gulp-uglify |title=gulp-uglify plugin|website=Npmjs.com |access-date=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 () {

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

.pipe (uglify ())

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

});

</syntaxhighlight>

=== 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>{{Citecite web|url=https://www.npmjs.com/package/gulp-watch|title=gulp-watch|website=npmNpmjs.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>{{urlcite 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 also==

* [[Grunt (software)]]

* [[Browserify]]

== References ==

{{reflistReflist|30em}}

== Literature ==

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

*{{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}}

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

== External links ==

* {{Official website}}

* {{GitHub|gulpjs/gulp|Gulp.jsgulp}}

[[Category:JavaScript programming tools]]