Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (11)
En vedette
En vedette (13)
Similaire à Introduction to Gulp
Similaire à Introduction to Gulp (20)
Dernier
Dernier (20)
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#/
Notes de l'éditeur
- Package.json harus ditaruh di dalam direktori yang sama dengan file .js