Gulp.js

'Gulp.js' is a Task - Runner, based on Node.js to several Workflow - to automate tasks in Webentwicklungsprozess. ^[3][4] So can gulp used, for example, to HTML, JavaScript and CSS to collapse, SCSS convert to CSS to optimize images and files in a "dist" - to copy folders. Also can be used gulp this to update the browser automatically or to start the web server automatically ^[5]

Gulp.js
Repository	github.com/gulpjs/gulp
Website	gulpjs.com

Installation

Gulp needed Node.js and installed by the Node Package Manager. For this purpose, the command {| s | {long npm install --global gulp-cli}} is | run [6]

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 [7]

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 ^[8] 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 [9] 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 [10] For this must first return to the required gulp-uglify plugin [11] 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 ^[12] 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. "Change Log 4.0.0". {{cite web}}: Cite has empty unknown parameter: |ed= (help); Unknown parameter |access= ignored (|access-date= suggested) (help)
2. "License to github.com". {{cite web}}: Unknown parameter |access= ignored (|access-date= suggested) (help)
3. Joshua Barnett (2014), Building a Cross-Platform Mobile game with HTML5 {{citation}}: Cite has empty unknown parameters: |band= and |compilation= (help); External link in |online= (help); Unknown parameter |ed= ignored (help); Unknown parameter |online= ignored (|url= suggested) (help)
4. Artemij Fedosejev (2015), "Installing Powerful Tools for Your Project", React.js Essentials (1 ed.), Birmingham: Packt Publishing, pp. 12–14, ISBN 978-1-78355-162-0 {{citation}}: Cite has empty unknown parameters: |ed= and |compilation= (help); Unknown parameter |= ignored (help)
5. Modular Web Development Framework, Helsinki, 2015-12-04 {{citation}}: Cite has empty unknown parameters: |band= and |compilation= (help); Unknown parameter |. Author= ignored (help); Unknown parameter |ed= ignored (help)
6. {{Internet source in the [Shell] [Shell (OS)] |. Url =https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md%7Ctitel=gulp - Getting Started |factory = gulp.js | language = en | access = 2016-05-28}}
7. 4.0 / docs / API.md "gulp API docs". {{cite web}}: Check |url= value (help); Cite has empty unknown parameter: |ed= (help); Unknown parameter |access= ignored (|access-date= suggested) (help)
8. gulp-imagemin Plugin
9. {{Internet source | url = http://magazin.phlow.de/webdesign/gulp/ | Title = by starting with Gulp.js - optimizing sites automating sequences | author = | = ed | factory = | date = | language = | = access
10. "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)
11. [https: / /www.npmjs.com/package/gulp-uglify gulp-uglify plugin]
12. 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