Introduction to Gulp

1,635 views
1,381 views

Published on

Introduction to Gulp. This slide's content includes installation of Gulp, how to use Gulp, run Gulp tasks and comparison with Grunt.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,635
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
70
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

  • Package.json harus ditaruh di dalam direktori yang sama dengan file .js
  • Introduction to Gulp

    1. 1. Introduction to Gulp Arga Padan David Hutagalung
    2. 2. What’s Gulp • Front-end development tool • Task automation in JavaScript • Streaming build system
    3. 3. Why Gulp • Demand on large projects • Repetitive, tedious tasks • Saving time
    4. 4. Getting started
    5. 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. 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. 7. API • task • src • pipe • dest • watch
    8. 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. 9. API src Takes a glob & represents a file structure gulp.src(globs) globs → file path
    10. 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. 11. API dest Write files into desired directory gulp.dest(path) path → file directory for written files
    12. 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. 13. gulpfile.js var [variable_name] = require(‘[plugin_name]'); ⋮ gulp.task(‘[task_name]’, function () { return gulp .src(‘[file_name]’) .pipe( [variable_name]() ) ; ⋮ });
    14. 14. gulpfile.js (continued) gulp.task('watch', function () { gulp.watch(‘[file_name]', [‘task_name']); });
    15. 15. package.json { "name": “[package_name]", "dependencies": { "gulp": "^3.8.5", "gulp-clean": "^0.3.1", ⋮ } }
    16. 16. Common Tasks • SASS Compile (gulp-ruby-sass) • Minify code .css (gulp-minify-css) .js & .html (gulp-uglify) • Watch (gulp-watch)
    17. 17. vs GruntGulp
    18. 18. Similarity • JavaScript-based task runner • Running on Node.js
    19. 19. Difference
    20. 20. Build system workflow
    21. 21. Gulp Input Read Files Write Files Modify Files Output Modify Files Modify Files
    22. 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. 23. Building Responsivity Uses streams from Node.js, No any stream use, some files are stored temporarily So Gulp builds faster than Grunt!
    24. 24. Configuration & Code
    25. 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. 26. Example : Compile LESS (Gulp)
    27. 27. Compile LESS (Grunt)
    28. 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. 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#/

    ×