Gulp.js: Difference between revisions

Revision as of 05:11, 30 March 2020

Revision as of 23:17, 23 December 2020

Line 10:

| 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 | accessdateaccess-date=2019-05-06 | title=gulp changelog}}</ref>

| language = [[JavaScript]]

| genre = [[Toolkit]]

| platform = [[Cross-platform]]

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

| name = gulp

}}

'''gulp''' is an [[Open-source software|open-source]] [[JavaScript]] toolkit created by 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|___location=|pages=|via=|author1=Jed Mao |author2=Maximilian Schmitt |author3=Tomasz Stryjewski |author4=Cary Country Holt |author5=William Lubelski }}</ref> used as a streaming [[build system]] (similar to a more package-focussed [[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 |access-date= |accessdate=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= |accessdate=2016-12-14}}</ref>

== Overview ==

gulp<ref>{{cite 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">{{cite web|url=https://github.com/substack/stream-handbook |title=substack/stream-handbook: how to write node programs with streams |publisher=GitHub |access-date= |accessdate=2016-12-14}}</ref> gulp reads the file system and pipes the data at hand from one single-purposed plugin to another 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>{{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 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 ==

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 |accessdateaccess-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"/>

== Operation ==

Line 45:

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

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

//do something

Line 80:

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 |accessdateaccess-date=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 () {

Line 91:

=== 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 |accessdateaccess-date=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 |access-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 () {

Line 111:

</syntaxhighlight>

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

==References==

Line 117:

==Literature==

*{{Cite book|title=Developing a Gulp Edge|publisher=Bleeding Edge Press|year=2014|isbn=978-1-939902-14-6|edition=1st|___location=|pages=|via=|author1=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 ==