Gulp.js: Difference between revisions

Revision as of 21:56, 22 October 2016

Revision as of 21:58, 22 October 2016

Line 22:

The main reason why task-runners like gulp and [[Grunt (software)|grunt]] are built on node is because, the basic [[Node Package Manager|npm]] scripts are not efficient when it comes to executing multiple tasks.

Even though a few developers prefer [[Node Package Manager|npm]] scripts to 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>{{url|https://css-tricks.com/gulp-for-beginners/}}</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 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>

== Operation ==

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