Gulp.js: Difference between revisions

Revision as of 14:53, 13 September 2016

Revision as of 14:55, 13 September 2016

Line 13:

| 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, [[sassSass ( 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 ==

Line 117:

{{SORTING: Gulpjs}}

[[Category: Free Software]]

[[Category: ECMAScript]]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 '' 'images-orig /' ''. <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 /' '' saved. Without <code> gulp.dest () </ code> the images would indeed optimized, but are not stored <nowiki><ref> </nowiki>[[Template:Internet source]] the optimized images to another folder , the original images remain with us. <syntax highlight lang = "javascript">

[[Category: ECMAScript]]

// Images task

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

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

        .pipe (imagemin ())

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

});</code></code></code></code>

<code><code><code><code>

</ Syntax highlight>

=== === Scripts Task

In the following example, all JavaScript files from the directory '' <meta /> 'scripts /' <meta /> '' <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 highlight lang = "javascript ">

// Script task

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

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

        .pipe (uglify ())

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

});

</ Syntax highlight></code></code>

<code><code>

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

* <cite class="citation"><span style="font-size:100%" class="error citation-comment">Empty citation ([[Help:CS1 errors#empty citation|help]])</span></cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fen.wikipedia.org%3AUser%3AStiruma%2Fsandbox&rft.genre=book&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" class="Z3988"><span style="display:none;">&nbsp;</span></span>

* <cite class="citation">"Build Tools and Automation", pp.&nbsp;400–408</cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fen.wikipedia.org%3AUser%3AStiruma%2Fsandbox&rft.atitle=Build+Tools+and+Automation&rft.genre=bookitem&rft.pages=400-408&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" class="Z3988"><span style="display:none;">&nbsp;</span></span> <span style="font-size:100%" class="error citation-comment">Unknown parameter <code style="color:inherit; border:inherit; padding:inherit;">&#x7C;Publisher=</code> ignored (<code style="color:inherit; border:inherit; padding:inherit;">&#x7C;publisher=</code> suggested) ([[Help:CS1 errors#parameter ignored suggest|help]]); </span><span style="font-size:100%" class="error citation-comment">Unknown parameter <code style="color:inherit; border:inherit; padding:inherit;">&#x7C;Title=</code> ignored (<code style="color:inherit; border:inherit; padding:inherit;">&#x7C;title=</code> suggested) ([[Help:CS1 errors#parameter ignored suggest|help]]); </span><span style="font-size:100%" class="error citation-comment">Unknown parameter <code style="color:inherit; border:inherit; padding:inherit;">&#x7C;Year=</code> ignored (<code style="color:inherit; border:inherit; padding:inherit;">&#x7C;year=</code> suggested) ([[Help:CS1 errors#parameter ignored suggest|help]]); </span><span style="font-size:100%" class="error citation-comment">Unknown parameter <code style="color:inherit; border:inherit; padding:inherit;">&#x7C;Author=</code> ignored (<code style="color:inherit; border:inherit; padding:inherit;">&#x7C;author=</code> suggested) ([[Help:CS1 errors#parameter ignored suggest|help]]); </span><span style="font-size:100%" class="error citation-comment">Unknown parameter <code style="color:inherit; border:inherit; padding:inherit;">&#x7C;Edition=</code> ignored (<code style="color:inherit; border:inherit; padding:inherit;">&#x7C;edition=</code> suggested) ([[Help:CS1 errors#parameter ignored suggest|help]]); </span><span style="font-size:100%" class="error citation-comment">Missing or empty <code style="color:inherit; border:inherit; padding:inherit;">&#x7C;title=</code> ([[Help:CS1 errors#citation missing title|help]])</span>

== Links ==

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

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

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

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

== References ==

<references />

[[Template:SORTING: Gulpjs]]

[[Category:Free ECMAScriptSoftware]]

[[Category:ECMAScript]]</code></code></code></code></code></code>