Gulp.js: Difference between revisions

Revision as of 15:14, 13 September 2016

Revision as of 15:20, 13 September 2016

Line 21:

== == Gulpfile.js

In the first step all the modules must be defined in the gulpfile.js. <syntaxhighlight lang="javascript">

// Define Modules

var gulp = require ( 'gulp');

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

Line 27:

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> {{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">

gulp.task ( 'taskName', function () {

// do something

});

</syntaxhighlight>

Line 56:

=== === Image Task

For the following example, the '' gulp-imagemin plugin '' <ref>[https://www.npmjs.com/package/gulp-imagemin/ gulp-imagemin Plugin]</ref> required. For this, by running the command <code> {{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': <syntaxhighlight lang= "javascript">

Line 62:

</syntaxhighlight>

The subsequent image Task performs optimizing images. <Code> gulp.src () </code> retrieves all the images with the extension .png, .gif or .jpg in the directory '' <nowiki/> 'images-orig /' <nowiki/> ''. <Code> .pipe (imagemin ()) </code> schleußt the images found by the optimization process through and with <code> .pipe (gulp.dest ()) </code> are the optimized images afterwards to folder '' <nowiki/> 'images /' <nowiki/> '' saved. Without <code> gulp.dest () </code> the images would indeed optimized, but are not stored <ref> {{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 </ref> Since we store 2016-05-30}} the optimized images to another folder , the original images remain with us. <syntaxhighlight lang = "javascript">

// Images task

gulp.task ( 'images', function () {

gulp.src ( 'images-orig / *. {png, gif, jpg}')

.pipe (imagemin ())

.pipe (gulp.dest ( 'images /'));

});

Line 73:

=== === Scripts Task

In the following example, all JavaScript files from the directory '' <nowiki/> 'scripts /' <nowiki/> '' <code> .pipe (uglify ()) </code> and optimized with <code> gulp. least ( 'scripts /') </code> overwritten <ref> {{Internet source | url = https://liechtenecker.at/front-end-workflow-mit-gulp/ | title = front-end workflow with Gulp | author = | = ed | factory = | date = | language = | access = 2016-05-30}} </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. <syntaxhighlight lang = "javascript">

// Script task

gulp.task ( 'scripts', function () {

gulp.src ( 'scripts / *. js')

.pipe (uglify ())

.pipe (gulp.dest ( 'scripts /'));

});

</syntaxhighlight>

Line 86:

// Rerun the task When a file changes

gulp.task ( 'watch', function () {

gulp.watch ( '. scripts / js **', [ 'scripts']);

gulp.watch ( 'images-orig / **', [ 'images']);

});

</syntaxhighlight>

Furthermore, it is possible to accomplish an update of the browser content using the Watch-tasks <ref> {{Internet source | url = https://www.browsersync.io/docs/gulp/ | Title = Browsersync + Gulp.js | author = | = ed | factory = | date = | language = | access = 2016-05-30}} </ref> For this, there are numerous options and plugins.

== Literature ==

Line 100:

== Links ==

* [Http://gulpjs.com/ Official Website]

* [Https://github.com/gulpjs/gulp/ gulp.js on GitHub]

* [Https://css-tricks.com/gulp-for-beginners/ Gulp for BeginnersGulpforBeginners - CSS-Tricks]

* [Https://www.browsersync.io/docs/gulp/ Browsersync + Gulp]

== References ==