Gulp.js

| Website = www.gulpjs.com/

Gulp.js
Stable release	4.0.0
Repository	github.com/gulpjs/gulp
Platform	across platforms
Available in	JavaScript
License	MIT License[1]
Website	gulpjs.com

}}

gulp.js is an open source, extensible, powerful and efficient JavaScript toolkit by Fractal innovations and open source community at git, used as a streaming build system in front end web development commonly . It is a task runner built on Node.js and npm, used for automation of time consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, image optimization etc. gulp uses a code-over-configuration approach to define its tasks and relies on its small, single purposed plugins to carry them out.

Overview

gulp.js is a build tool in JavaScript built on node streams. The streams facilitate the connection of file operations through pipelines. gulp reads the file system and pipes the data at hand from its one single purposed plugin to other through pipes 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 create new ones. This grants the ability to perform complex tasks through linking its myriad of plugins. The users can also write their own plugins to define their own tasks. gulp requires knowledge on JavaScript and coding to define its tasks. gulp is a build system which means aside from running tasks it is also capable of copying files from one ___location to another, compiling, deploying, creating notifications, unit testing, linting etc.

gulp vs Grunt

Both Grunt and gulp are task runners in JavaScript built on node. Grunt runs tasks by transforming files and save as new ones in temporary folders. The output of one task is taken as input for another one and on until it reaches 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 these temporary locations. Since it streams the data it also decreases the number of I/O calls and also improves performance. Grunt uses configuration files to perform tasks whereas gulp requires its build file to consist of code. In grunt, each plugin needs to be configured to match its input ___location to the previous plugin’s output. In gulp they are automatically pipe-lined.

Installation

Gulp needs Node.js and can be installed by the Node Package Manager. To remove a previously installed gulp the command is npm rm --global gulp.

Install gulp globally, then initialize the project directory and install in the project locally.

$ npm install --global gulp-cli
$ npm init
$ npm install --save-dev gulp

Operation

In order to work with gulp, called gulpfile must be created. In the gulpfile is a JavaScript - file named "gulpfile.js". In this file called tasks in JavaScript are defined. This gulp tasks are run from the shell. The command gulp will launch the default task. With gulp <task name> the task with each taskName runs.

In addition there are a number of Plugins for gulp.

Gulpfile.js

In the first step all the modules must be defined in the gulpfile.js.

//Define Modules
var gulp = require ( 'gulp');
var gutil = require ( 'util-gulp');

In the next step, the tasks can then be created. A gulp task is defined by gulp.task and gets a 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 ^[3]

gulp.task ( 'taskName', function () {
//do something
});

Alternatively, create a task that performs several pre-defined functions. These are passed as the second parameter using an array.

function fn1 () {
// do something
}

function fu2 () {
// Do something else
}

// Task with array of function names
gulp.task ( 'taskName', ['fn1','fu2']);

Default task

The default task is that task that by entering the {{long gulp} | | s} command is executed in the Shell. In this case, the default task does nothing.

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

Example tasks

Image Task

For the following example, the gulp-imagemin plugin ^[4] required. For this, by running the command [ s} installed the required plug-in shell.

Subsequently, the module must be at the beginning of gulpfile.js 'defined':

var imagemin = require ( 'gulp-imagemin');

The subsequent image Task performs optimizing images. gulp.src () retrieves all the images with the extension .png, .gif or .jpg in the directory 'images-orig/' . .pipe (imagemin ()) schleußt the images found by the optimization process through and with .pipe (gulp.dest ()) are the optimized images afterwards to folder 'images/' saved. Without gulp.dest () the images would indeed optimized, but are not stored ^[5] Since we store 2016-05-30] Error: {{Lang}}: text has italic markup (help) the optimized images to another folder , the original images remain with us.

// Images task
gulp.task ( 'images', function () {
    gulp.src ( 'images-orig/*. {png, gif, jpg}')
        .pipe (imagemin ())
        .pipe (gulp.dest ( 'images/'));
});

Scripts Task

In the following example, all JavaScript files from the directory 'scripts/' .pipe (uglify ()) and optimized with gulp. least ( 'scripts/') overwritten ^[6] For this must first return to the required gulp-uglify plugin ^[7] on npm installed and at the beginning of gulpfile.js define the module.

//Script task
gulp.task ( 'scripts', function () {
    gulp.src ( 'scripts/*. js')
        .pipe (uglify ())
        .pipe (gulp.dest ( 'scripts/'));
});

Watch Task

The Watch-task serves to react to changes of files. In the following example, the tasks of the names are scripts and images called when it JavaScript files or images should change in the specified directories.

// Rerun the task When a file changes
gulp.task ( 'watch', function () {
    gulp.watch ( '. scripts/js **', [ 'scripts']);
    gulp.watch ( 'images-orig/**', [ 'images']);
});

Furthermore, it is possible to accomplish an update of the browser content using the Watch-tasks ^[8] For this, there are numerous options and plugins.

Literature

• {{citation}}: Empty citation (help)
• "Build Tools and Automation", pp. 400–408 {{citation}}: Cite has empty unknown parameter: |ISBN 978-1-4302-6268-8= (help); Missing or empty |title= (help); Unknown parameter |Author= ignored (|author= suggested) (help); Unknown parameter |Edition= ignored (|edition= suggested) (help); Unknown parameter |Publisher= ignored (|publisher= suggested) (help); Unknown parameter |Title= ignored (|title= suggested) (help); Unknown parameter |Year= ignored (|year= suggested) (help)

Links

• Official Website
• gulp.js on GitHub
• Gulp for Beginners - CSS-Tricks
• Browsersync + Gulp

References

1. "License to github.com". {{cite web}}: Unknown parameter |access= ignored (|access-date= suggested) (help)
2. https://github.com/gulpjs/gulp/blob/4.0/CHANGELOG.md. {{cite web}}: Cite has empty unknown parameters: |hrsg=, |autor=, and |datum= (help); Missing or empty |title= (help); Unknown parameter |sprache= ignored (|language= suggested) (help); Unknown parameter |titel= ignored (|title= suggested) (help); Unknown parameter |werk= ignored (|work= suggested) (help); Unknown parameter |zugriff= ignored (|access-date= suggested) (help)
3. "gulp API docs". {{cite web}}: Cite has empty unknown parameter: |ed= (help); Unknown parameter |access= ignored (|access-date= suggested) (help)
4. Plugin
5. {{Internet source | url = http://magazin.phlow.de/webdesign/gulp/%7C Title = by starting with Gulp.js - optimizing sites automating sequences | author = | = ed | factory = | date = | language = | = access
6. "front-end workflow with Gulp". {{cite web}}: Cite has empty unknown parameter: |factory= (help); Unknown parameter |= ignored (help); Unknown parameter |access= ignored (|access-date= suggested) (help)
7. gulp-uglify plugin
8. https://www.browsersync.io/docs/gulp/. {{cite web}}: Cite has empty unknown parameter: |factory= (help); Missing or empty |title= (help); Unknown parameter |= ignored (help); Unknown parameter |Title= ignored (|title= suggested) (help); Unknown parameter |access= ignored (|access-date= suggested) (help)

Template:SORTING: Gulpjs