introduction to gulp
DESCRIPTION
Introduction to Gulp. This slide's content includes installation of Gulp, how to use Gulp, run Gulp tasks and comparison with Grunt.TRANSCRIPT
![Page 1: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/1.jpg)
Introduction to Gulp
Arga Padan David Hutagalung
![Page 2: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/2.jpg)
What’s
Gulp
• Front-end development tool
• Task automation in JavaScript
• Streaming build system
![Page 3: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/3.jpg)
WhyGulp
• Demand on large projects • Repetitive,
tedious tasks
• Saving time
![Page 4: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/4.jpg)
Gettingstarted
![Page 5: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/5.jpg)
More technically
..
❶ from command line… $ npm install -g gulp (install Gulp globally)
❷ create gulpfile.js & package.json (on your project folder. See at slide 13-15 for more details)
❸ from command line..
$ npm install [plugin_name] --save (project folder)
![Page 6: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/6.jpg)
More technically..(cont.)
gulpfile.js Tells Gulp for every tasks, what those tasks are, when to run them.
package.json List of installed plugins
Create both of them at root directory
![Page 7: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/7.jpg)
API • task• src • pipe • dest • watch
![Page 8: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/8.jpg)
APItaskdefining a task
gulp.task(name[, deps], fn)
name → task name deps → arrays of tasks (deps isn’t mandatory) fn → performs task operation
![Page 9: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/9.jpg)
APIsrcTakes a glob & represents a file structure
gulp.src(globs) globs → file path
![Page 10: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/10.jpg)
APIpipe
for data streaming (output from prev. process become input for the next process)
Makes Gulp different compared to Grunt
.pipe([data_stream])
data_stream → task or file destination
![Page 11: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/11.jpg)
APIdestWrite files into desired directory
gulp.dest(path)
path → file directory for written files
![Page 12: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/12.jpg)
API watchWatch files and do something when a file changes
• gulp.watch(glob, fn)
glob → file(s) to watch for changes.fn → defined function (added with gulp.task())
![Page 13: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/13.jpg)
gulpfile.js
var [variable_name] = require(‘[plugin_name]');
gulp.task(‘[task_name]’, function () { return gulp.src(‘[file_name]’).pipe( [variable_name]() ) ;
});
![Page 14: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/14.jpg)
gulpfile.js (continued)
gulp.task('watch', function () {gulp.watch(‘[file_name]', [‘task_name']);
});
![Page 15: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/15.jpg)
package.json
{ "name": “[package_name]", "dependencies": { "gulp": "^3.8.5", "gulp-clean": "^0.3.1", }}
![Page 16: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/16.jpg)
Common Tasks
• SASS Compile (gulp-ruby-sass)
• Minify code .css (gulp-minify-css)
.js & .html (gulp-uglify)
• Watch (gulp-watch)
![Page 17: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/17.jpg)
vs
GruntGulp
![Page 18: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/18.jpg)
Similarity
• JavaScript-based task runner
• Running on Node.js
![Page 19: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/19.jpg)
Difference
![Page 20: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/20.jpg)
Build system workflow
![Page 21: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/21.jpg)
GulpInput
Read Files
Write Files
Modify Files
Output
Modify Files
Modify Files
![Page 22: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/22.jpg)
GruntInput Read Files
Temp folder
Write Files
Read Files
Temp folder
Write Files
Read Files Write Files
Output
Modify Files
Modify Files
Modify Files
![Page 23: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/23.jpg)
Building Responsivity
Uses streams from Node.js,
No any stream use, some files are stored temporarily
So Gulp builds faster than Grunt!
![Page 24: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/24.jpg)
Configuration & Code
![Page 25: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/25.jpg)
Plugins
Gulp : 432 plugins
Grunt : 2,580 plugins(as of March 2014) http://www.oomphinc.com/blog/2014-03/
gulp-vs-grunt-node-js-automation-tools-showdown/
![Page 26: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/26.jpg)
Example : Compile LESS (Gulp)
![Page 27: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/27.jpg)
Compile LESS (Grunt)
![Page 28: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/28.jpg)
Source• http://markgoodyear.com/2014/01/getting-started-
with-gulp/
• https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
• https://www.npmjs.org/
• http://gulpjs.com/
• http://www.oomphinc.com/blog/2014-03/gulp-vs-grunt-node-js-automation-tools-showdown/
![Page 29: Introduction to Gulp](https://reader033.vdocument.in/reader033/viewer/2022061218/54b6c6de4a795996608b45c9/html5/thumbnails/29.jpg)
Source• http://jaysoo.ca/2014/01/27/gruntjs-vs-
gulpjs/
• http://blog.ponyfoo.com/2014/07/04/choose-grunt-gulp-or-npm
• blog.evanyou.me/2013/12/29/gulp-piping/
• http://slides.com/contra/gulp#/