![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)](https://image.slidesharecdn.com/introductiontogulp-140717020032-phpapp02/85/Introduction-to-Gulp-5-320.jpg)
![API
task
defining a task
gulp.task(name[, deps], fn)
name → task name
deps → arrays of tasks
(deps isn’t mandatory)
fn → performs task
operation](https://image.slidesharecdn.com/introductiontogulp-140717020032-phpapp02/85/Introduction-to-Gulp-8-320.jpg)
![API
pipe
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](https://image.slidesharecdn.com/introductiontogulp-140717020032-phpapp02/85/Introduction-to-Gulp-10-320.jpg)
![gulpfile.js
var [variable_name] = require(‘[plugin_name]');
⋮
gulp.task(‘[task_name]’, function () {
return gulp
.src(‘[file_name]’)
.pipe( [variable_name]() ) ;
⋮
});](https://image.slidesharecdn.com/introductiontogulp-140717020032-phpapp02/85/Introduction-to-Gulp-13-320.jpg)
![gulpfile.js (continued)
gulp.task('watch', function () {
gulp.watch(‘[file_name]', [‘task_name']);
});](https://image.slidesharecdn.com/introductiontogulp-140717020032-phpapp02/85/Introduction-to-Gulp-14-320.jpg)
![package.json
{
"name": “[package_name]",
"dependencies": {
"gulp": "^3.8.5",
"gulp-clean": "^0.3.1",
⋮
}
}](https://image.slidesharecdn.com/introductiontogulp-140717020032-phpapp02/85/Introduction-to-Gulp-15-320.jpg)
Introduction to Gulp
- 1. Introduction to Gulp Arga Padan David Hutagalung
- 2. What’s Gulp • Front-end development tool • Task automation in JavaScript • Streaming build system
- 3. Why Gulp • Demand on large projects • Repetitive, tedious tasks • Saving time
- 5. 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)
- 6. 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
- 7. API • task • src • pipe • dest • watch
- 8. API task defining a task gulp.task(name[, deps], fn) name → task name deps → arrays of tasks (deps isn’t mandatory) fn → performs task operation
- 9. API src Takes a glob & represents a file structure gulp.src(globs) globs → file path
- 10. API pipe 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
- 11. API dest Write files into desired directory gulp.dest(path) path → file directory for written files
- 12. API watch Watch 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())
- 13. gulpfile.js var [variable_name] = require(‘[plugin_name]'); ⋮ gulp.task(‘[task_name]’, function () { return gulp .src(‘[file_name]’) .pipe( [variable_name]() ) ; ⋮ });
- 14. gulpfile.js (continued) gulp.task('watch', function () { gulp.watch(‘[file_name]', [‘task_name']); });
- 15. package.json { "name": “[package_name]", "dependencies": { "gulp": "^3.8.5", "gulp-clean": "^0.3.1", ⋮ } }
- 16. Common Tasks • SASS Compile (gulp-ruby-sass) • Minify code .css (gulp-minify-css) .js & .html (gulp-uglify) • Watch (gulp-watch)
- 17. vs GruntGulp
- 18. Similarity • JavaScript-based task runner • Running on Node.js
- 19. Difference
- 21. Gulp Input Read Files Write Files Modify Files Output Modify Files Modify Files
- 22. Grunt Input Read Files Temp folder Write Files Read Files Temp folder Write Files Read Files Write Files Output Modify Files Modify Files Modify Files
- 23. Building Responsivity Uses streams from Node.js, No any stream use, some files are stored temporarily So Gulp builds faster than Grunt!
- 25. 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/
- 26. Example : Compile LESS (Gulp)
- 28. Source • http://markgoodyear.com/2014/01/getting-started- with-gulp/ • https://github.com/gulpjs/gulp/blob/master/docs/ge tting-started.md • https://www.npmjs.org/ • http://gulpjs.com/ • http://www.oomphinc.com/blog/2014-03/gulp-vs- grunt-node-js-automation-tools-showdown/
- 29. 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#/
Editor's Notes
- #16: Package.json harus ditaruh di dalam direktori yang sama dengan file .js