'Gulp.js' is a Task - Runner, based on Node.js to several Workflow - to automate tasks in Webentwicklungsprozess. <ref> 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=|ed= ignored (help); Unknown parameter |online= ignored (|url= suggested) (help) </ ref> <ref> 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) </ ref> 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 <ref> 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)CS1 maint: ___location missing publisher (link) </ ref>
| Gulp.js | |
|---|---|
| Repository | |
| Website | gulpjs |
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 <ref> {{Internet source </ code> 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}} </ ref>
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 </ code> will launch the default task. With gulp <task name> </ code> 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. <Syntax highlight lang = "javascript">
// Define Modules
var gulp = require ( 'gulp');
var gutil = require ( 'util-gulp');
</ Syntax highlight>
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 <ref> [https:. //github.com/gulpjs/gulp/blob/ 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) </ ref> <syntax highlight lang = "javascript">
gulp.task ( 'taskName', function () {
// do something
});
</ Syntax highlight>
Alternatively, create a task that performs several pre-defined functions. These are passed as the second parameter using an array. <Syntax highlight lang = "javascript">
function fn1 () {
// do something
}
function fu2 () {
// Do something else
}
// Task with array of function names
gulp.task ( 'taskName', [ 'fn1', 'fu2']);
</ Syntax highlight>
=== === Default task
The default task is that task that by entering the {{long gulp} | | s} command is executed </ code> in the Shell. In this case, the default task does nothing. <Syntax highlight lang = "javascript">
// Gulp default task
gulp.task ( 'default', [ ]);
</ Syntax highlight>
Example tasks
=== === Image Task
For the following example, the gulp-imagemin plugin <ref> gulp-imagemin Plugin </ ref> required. For this, by running the command {{lang | npm install --save-dev-gulp imagemin} | s} </ code> installed the required plug-in shell.
Subsequently, the module must be at the beginning of gulpfile.js 'defined': <syntax highlight lang = "javascript">
var imagemin = require ( 'gulp-imagemin');
</ Syntax highlight>
The subsequent image Task performs optimizing images. gulp.src () </ code> retrieves all the images with the extension .png, .gif or .jpg in the directory 'images-orig /' . .pipe (imagemin ()) </ code> schleußt the images found by the optimization process through and with .pipe (gulp.dest ()) </ code> are the optimized images afterwards to folder < nowiki /> 'images /' saved. Without gulp.dest () </ code> the images would indeed optimized, but are not stored <ref> [http:. //magazin.phlow.de/webdesign/gulp/ http:. //magazin.phlow.de/webdesign/gulp/]. {{cite web}}: Check |url= value (help); Cite has empty unknown parameter: |factory= (help); Missing or empty |title= (help); Unknown parameter |= ignored (help); Unknown parameter |Title= ignored (|title= suggested) (help) the optimized images to another folder , the original images remain with us. <syntax highlight lang = "javascript">
// Images task
gulp.task ( 'images', function () {
gulp.src ( 'images-orig / *. {png, gif, jpg}')
.pipe (imagemin ())
.pipe (gulp.dest ( 'images /'));
});
</ Syntax highlight>
=== === Scripts Task
In the following example, all JavaScript files from the directory 'scripts /' .pipe (uglify ()) </ code> and optimized with gulp. least ( 'scripts /') </ code> overwritten <ref> [https:. //liechtenecker.at/front-end-workflow-mit-gulp/ "front-end workflow with Gulp"]. {{cite web}}: Check |url= value (help); Cite has empty unknown parameter: |factory= (help); Unknown parameter |= ignored (help); Unknown parameter |access= ignored (|access-date= suggested) (help) </ ref> For this must first return to the required gulp-uglify plugin <ref> [https: / /www.npmjs.com/package/gulp-uglify gulp-uglify plugin] </ ref> on npm installed and at the beginning of gulpfile.js define the module. <syntax highlight lang = "javascript ">
// Script task
gulp.task ( 'scripts', function () {
gulp.src ( 'scripts / *. js')
.pipe (uglify ())
.pipe (gulp.dest ( 'scripts /'));
});
</ Syntax highlight>
=== === 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. <Syntax highlight lang = "javascript">
// Rerun the task When a file changes
gulp.task ( 'watch', function () {
gulp.watch ( '. scripts / js **', [ 'scripts']);
gulp.watch ( 'images-orig / **', [ 'images']);
});
</ Syntax highlight>
Furthermore, it is possible to accomplish an update of the browser content using the Watch-tasks <ref> [https:. //www.browsersync.io/docs/gulp/ https:. //www.browsersync.io/docs/gulp/]. {{cite web}}: Check |url= value (help); 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) </ ref> 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
References