Gulp.js: Difference between revisions

Revision as of 14:50, 13 September 2016

Revision as of 14:52, 13 September 2016

Line 3:

| Logo =

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

Line 10:

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

Line 34:

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

Line 69:

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

// Images task

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