Gulp.js: Difference between revisions

Revision as of 14:56, 13 September 2016

Revision as of 15:12, 13 September 2016

Line 3:

| Manufacturer = Fractal and contributors of the GitHub community

| Current version = <! - Versions please insert intermittently ->

4.0.0 & nbsp; <ref> {{Internet source | url = https: //github.com/gulpjs/gulp/blob/4.0/CHANGELOG.md | title = Change Log 4.0.0 | author = | ed = | = factory gulp. js | date = | language = en | access = 2016-05-31}} </ ref> <br /> <small> {{date | 2 | 6 | 2015}} </ small>

| Current version release date = <! - Please insert date after the version ->| OS = [[Platform independence | across platforms]]| Language = [[JavaScript]]| Category = [[Toolkit]]

| Royalty = [[MIT license]] <ref> {{Internet source | url = https: //github.com/gulpjs/gulp/blob/master/LICENSE | title = License to github.com | language = en | access = 2016-05-30}} </ ref>| Website = [http://gulpjs.com/ www.gulpjs.com/]}}

| OS = [[Platform independence | across platforms]]

'' 'Gulp.js' '' is a [[process (computer science) | Task]] - Runner, based on [[Node.js]] to several [[Workflow | Workflow]] - to automate tasks in Webentwicklungsprozess. <ref> {{cite | author = Joshua Barnett | title = Building a Cross-Platform Mobile game with HTML5 | ed = University of East Anglia | compilation = | band = | number = | edition = | publisher = | ___location = | year = 2014 | pages = | ISBN = | online = http: //www.caffeinatednightmare.com/mindflip/}} </ ref> <ref> {{cite | author = Artemij Fedosejev | title = React.js Essentials | ed = | compilation = | = tape | number = | edition = 1 | publisher = Packt Publishing | place = Birmingham | date = 2015 | chapter = Installing Powerful Tools for Your Project | pages = 12-14 | ISBN = 978-1-78355- 162-0}} </ ref> So can gulp used, for example, to [[hypertext markup Language | HTML]], [[JavaScript]] and [[Cascading style sheets | CSS]] to collapse, [[sass ( stylesheet language) | 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> {{cite |. Author = Henri Levälampi | title = Modular Web Development Framework | ed = Helsinki Metropolia University of Applied Sciences | compilation = | band = | number = | edition = | publisher = | ___location = Helsinki | date = 2015-12-04 | pages = | ISBN =}} </ ref>

| Language = [[JavaScript]]

| Category = [[Toolkit]]

| Royalty = [[MIT license]] <ref> {{Internet source | url = https: //github.com/gulpjs/gulp/blob/master/LICENSE | title = License to github.com | language = en | access = 2016-05-30}} </ ref>

| Website = [http://gulpjs.com/ www.gulpjs.com/]

}}

'' 'Gulp.js' '' is a [[process (computer science) | Task]] - Runner, based on [[Node.js]] to several [[Workflow | Workflow]] - to automate tasks in Webentwicklungsprozess. <ref> {{cite | author = Joshua Barnett | title = Building a Cross-Platform Mobile game with HTML5 | ed = University of East Anglia | compilation = | band = | number = | edition = | publisher = | ___location = | year = 2014 | pages = | ISBN = | online = http: //www.caffeinatednightmare.com/mindflip/}} </ ref> <ref> {{cite | author = Artemij Fedosejev | title = React.js Essentials | ed = | compilation = | = tape | number = | edition = 1 | publisher = Packt Publishing | place = Birmingham | date = 2015 | chapter = Installing Powerful Tools for Your Project | pages = 12-14 | ISBN = 978-1-78355- 162-0}} </ ref> So can gulp used, for example, to [[hypertext markup Language | HTML]], [[JavaScript]] and [[Cascading style sheets | CSS]] to collapse, [[sass ( stylesheet language) | 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> {{cite |. Author = Henri Levälampi | title = Modular Web Development Framework | ed = Helsinki Metropolia University of Applied Sciences | compilation = | band = | number = | edition = | publisher = | ___location = Helsinki | date = 2015-12-04 | pages = | ISBN =}} </ ref>

== Installation ==

Gulp needed [[Node.js]] and installed by the [[Node Package Manager]]. For this purpose, the command <code> {| 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|titel=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 <code> {{lang | en | gulp}} </ code> will launch the default task. With <code> {{lang | en | gulp <task name>}} </ code> the task with each taskName runs.

In addition there are a number of [http://gulpjs.com/plugins Plugins] for gulp.

== == Gulpfile.js

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

// Define Modules

var gulp = require ( 'gulp');

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

</syntaxhighlight>

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> <syntax highlightsyntaxhighlight lang = "javascript">

</ 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> {{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> <syntax highlight lang = "javascript">

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

    // do something

});

</syntaxhighlight>

</ Syntax highlight>

Alternatively, create a task that performs several pre-defined functions. These are passed as the second parameter using an array. <Syntax highlightsyntaxhighlight lang = "javascript">

function fn1 () {

    // do something

}

function fu2 () {

    // Do something else

}

// Task with array of function names

gulp.task ( 'taskName', [ 'fn1', 'fu2']);

</syntaxhighlight>

</ Syntax highlight>

=== === Default task

The default task is that task that by entering the <code> {{long gulp} | | s} command is executed </ code> in the Shell. In this case, the default task does nothing. <Syntax highlightsyntaxhighlight lang = "javascript">

// Gulp default task

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

</syntaxhighlight>

</ Syntax highlight>

== Example tasks ==

=== === 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': <syntax highlightsyntaxhighlight lang = "javascript">

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

</syntaxhighlight>

</ Syntax highlight>

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. <syntax highlightsyntaxhighlight lang = "javascript">

// Images task

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

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

         .pipe (imagemin ())

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

});

</syntaxhighlight>

</ Syntax highlight>

=== === 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. <syntax highlightsyntaxhighlight lang = "javascript ">

// Script task

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

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

         .pipe (uglify ())

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

});

</syntaxhighlight>

</ 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 highlightsyntaxhighlight lang = "javascript">

// Rerun the task When a file changes

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

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

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

});

</syntaxhighlight>

</ Syntax highlight>

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 112 ⟶ 106:

== References ==

<References />

{{SORTING: Gulpjs}}