Gulp.js: Difference between revisions

Revision as of 02:52, 15 September 2016

Revision as of 03:09, 15 September 2016

Line 18:

== gulp vs Grunt ==

Both Grunt and gulp are task runners in JavaScript built on node. Grunt runs tasks by transforming files and saves as new ones in temporary folders. 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 many temporary files. Whereas gulp streams through the file system and does not require any of these temporary locations. Since it streams the data it also decreasesdecreasing the number of I/O calls and alsothus, improvesimproving performance. Grunt uses configuration files to perform tasks whereas gulp requires its build file to consist ofbe codecoded. 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.

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

gulp is to be installed globally and then, locally after initialising the project directory. While installing the project locally, package.json file must already exist in the selected directory.

Line 29 ⟶ 31:

$ npm init

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

This command installs gulp locally and is savedsaves at devDependencies in the package.json file.

== Operation ==

This gulp tasks are run from the Command Line Interface (CLI) shell like Grunt and require package.json and gulpfile.js in the project root directory. gulpfile.js is where 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. The default task runs by <code>$gulp</code>. Individual tasks can be defined by gulp.task and need to beare run by <code>gulp <task> <othertask></code>. Complex tasks are defined by chaining the plugins with the help of <code>.pipe()</code> operator.

== gulpfile.js ==

FirstTo ofstart allwith, the necessary modules must be defined in the gulpfile.js. <syntaxhighlight lang="javascript">

//DefineDefining Modules

var gulp = require ( 'gulp');

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

</syntaxhighlight>

The tasks can then be created. A gulp task is defined by ''gulp.task'' and getstakes athe name for the task as the first parameter and the second parameter is a function.

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> {{Internet source | url = https://github.com/gulpjs/gulp/blob/4.0/docs/API.md | title = gulp API docs | author = | ed = | = factory gulp.js | date = | language = en | access = 2016-05-28}} </ref> <syntaxhighlight lang = "javascript">

Line 49 ⟶ 51:

</syntaxhighlight>

Alternatively, a task that performs several predefined functions that can be created. Those functions are passed as the second parameter usingin the form of an array. <syntaxhighlight lang="javascript">

function fn1 () {

// do something

Line 63 ⟶ 65:

=== Default task ===

The default task is that task thatcreated by entering the <code><nowiki> {{long gulp} | | s} command is executed </nowiki></code> in the Shell. In thisthe case below, the default task does nothing. <syntaxhighlight lang ="javascript">

// Gulp default task

gulp.task ( 'default', [ '']);