Gulp.js: Difference between revisions

Revision as of 03:21, 15 September 2016

Revision as of 03:28, 15 September 2016

Line 74:

=== Image Task ===

For the following example, the '' gulp-imagemin plugin '' <ref>{{url|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> installedinstalls the required plug-in shell.

Subsequently, the module must be at the beginning of '' gulpfile.js 'defined' as: ''<syntaxhighlight lang= "javascript">

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

</syntaxhighlight>

The subsequent image Task performs optimising 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> schedules the images found by the optimisation process through and with <code> .pipe (gulp.dest ()) </code> are the optimised images afterwards to folderthe '' <nowiki/> 'images/' folder<nowiki/> to be'' saved. Without <code> gulp.dest () </code> the images would indeed optimisedoptimise, but are not stored <ref> {{Cite | url = http://magazin.phlow.de/webdesign/gulp/| Title = by starting with Gulp.js - optimising sites automating sequences | author = | = ed | factory = | date = | language = | = access </ref> Since we store 2016-05-30}} the optimized images to another folder ,and the original images remain with us. <syntaxhighlight lang = "javascript">

// Images task

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

Line 91:

=== Scripts Task ===

In the following example, all JavaScript files from the directory '' <nowiki/> 'scripts/' <nowiki/> '' <code> .pipe (uglify ()) </code> andare 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, one must first return to the required '' gulp-uglify plugin '' <ref> [https://www.npmjs.com/package/gulp-uglify gulp-uglify plugin] </ref> on '' npm '' installedpackage installer and at the beginning of '' gulpfile.js , the'' definemodule theshould modulebe defined. <syntaxhighlight lang = "javascript">

//Script task

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

Line 101:

=== Watch Task ===

The Watch-task serves to react to changes ofin files. In the following example, the tasks ofwith the names are '' scripts '' and '' images ''are called when itany of JavaScript files or images should change in the specified directories. <syntaxhighlight lang = "javascript">

// Rerun the task When a file changes

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