Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Gulp

3,255 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
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2ZDZFYj ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×