Content deleted Content added
Citation bot (talk | contribs) Add: date, website. | Use this bot. Report bugs. | Suggested by Abductive | #UCB_webform 808/3850 |
Stevebroshar (talk | contribs) It's a build tool; not a framework |
||
| (6 intermediate revisions by 6 users not shown) | |||
Line 1:
{{Short description|Server-side JavaScript
{{lowercase title}}
{{multiple issues|
Line 17:
| 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 =
| latest_release_date = {{Start date and age|
| latest preview version =
| latest preview date =
Line 49:
}}
'''gulp''' is an [[Open-source software|open-source]] [[JavaScript]] toolkit
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>
Line 63:
== 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 ==
Line 112:
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 |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 () {
| |||