Gulp.js: Difference between revisions

Revision as of 02:30, 23 September 2016

Revision as of 02:31, 23 September 2016

Line 25:

gulp needs [[Node.js]] and can be installed through the [[Node Package Manager]].

To remove a previously installed gulp, the command used is <code>npm rm --global gulp</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>.

gulp is to be installed globally to get access to its command line. It can then be installed separately to different project directories, facilitating the use of many versions of gulp in a single system. Before installing gulp locally to a project, the project directory is to be initialized. The command for installing is the same. While installing gulp to the project locally, [https://docs.npmjs.com/files/package.json package.json] file must already exist in the selected directory.<ref name=":0" />

'''

$ npm install --global gulp-cli

$ npm init

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

The first command installs gulp globally. The second command initializes the project directory and the last command installs gulp local to the project, at [https://docs.npmjs.com/files/package.json devDependencies] in the package.json file of the project<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> in the package.json file of the project.

== Operation ==

The gulp tasks are run from the [[Command-line interface|Command Line Interface (CLI)]]<ref>{{Cite web|url=https://github.com/gulpjs/gulp/blob/master/docs/CLI.md|title=gulpjs/gulp|website=GitHub|access-date=2016-09-23}}</ref> shell like Grunt and require package.json and gulpfile.js(simply gulpfile) in the project root directory. gulpfile.js 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" />. 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" />. Complex tasks are defined by chaining the plugins with the help of <code>.pipe()</code> operator<ref name=":3" />.

=== gulpfile ===

Line 83:

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>{{url|http://magazin.phlow.de/webdesign/gulp/}}</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 () {