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.

Intro to Gulp


Published on

  • Be the first to comment

Intro to Gulp

  1. 1. @TheMattBruntIntro to Gulp Intro to Gulp The Streaming Build System “Automate and enhance your workflow”
  2. 2. @TheMattBruntIntro to Gulp Before I talk about Gulp
  3. 3. @TheMattBruntIntro to Gulp Task Runners
  4. 4. @TheMattBruntIntro to Gulp Gulp vs Grunt vs Cake vs Broccoli vs Brunch vs NPM scripts Anyone else hungry?
  5. 5. @TheMattBruntIntro to Gulp Don’t use Grunt! Use Gulp! Don’t use Gulp! Use Grunt! Don’t use either! Use NPM! (why bother with anything, it’s all pointless when the robots take over…)
  6. 6. @TheMattBruntIntro to Gulp What should I use? Whatever you want. You’re the ones working with it. Choose what you like.
  7. 7. @TheMattBruntIntro to Gulp Disadvantages? • More dependencies • At the mercy of plugins supporting things • gulp-ruby-sass to use ruby-sass for example • ‘Bloat’ • Gulp is a relative newcomer compared to Grunt • Smaller install base than Grunt - though it’s catching up • Pretty much everything here can be done in npm-scripts
  8. 8. @TheMattBruntIntro to Gulp Grunt • Single Gruntfile • + plugins • No code logic • Plugins based on a configuration object Gulp • Single Gulpfile • + plugins • Relies on code logic via pipes • Configuration isn’t as ‘clean’ as Grunt • It’s up to you how you want to configure and write your file They both essentially do the same thing, just in different ways.
  9. 9. @TheMattBruntIntro to Gulp In your head, picture a build system It should take files, modify them in a few ways, then output the results.
  10. 10. @TheMattBruntIntro to Gulp You may have pictured something like this: This is what Gulp does.
  11. 11. @TheMattBruntIntro to Gulp Gulp uses streams and pipes Gulp does nothing but provide some streams and a basic task system Plugins do the rest
  12. 12. @TheMattBruntIntro to Gulp Getting started with Gulp • Install Node.js (there’s multiple ways to do this) • CD to project directory and create package.json • npm init # asks lots of questions • echo {} > package.json # quick & dirty • Install gulp globally • npm install -g gulp • Install gulp to the project • npm install --save-dev gulp • Create gulpfile.js and go from there!
  13. 13. @TheMattBruntIntro to Gulp package.json Node packages!
  14. 14. @TheMattBruntIntro to Gulp Installing plugins • npm install --save-dev package-name • Configuration options for when using a plugin are plugin- specific, docs / README on the package pages!
  15. 15. @TheMattBruntIntro to Gulp Learn just 4 Gulp functions
  16. 16. @TheMattBruntIntro to Gulp 1
  17. 17. @TheMattBruntIntro to Gulp gulp.src(globs[, options]) Emits a readable stream of files that matches the glob. This is piped to other streams.
  18. 18. @TheMattBruntIntro to Gulp 2
  19. 19. @TheMattBruntIntro to Gulp gulp.dest(path[, options]) Returns a writeable stream. Files piped to this are written to the filesystem
  20. 20. @TheMattBruntIntro to Gulp 3
  21. 21. @TheMattBruntIntro to Gulp gulp.task(name[, deps], fn) Registers the function as a gulp task with a name Can specify dependencies on other tasks
  22. 22. @TheMattBruntIntro to Gulp 4
  23. 23. @TheMattBruntIntro to Gulp, fn) Runs the function whenever a file matching the glob changes.
  24. 24. @TheMattBruntIntro to Gulp Congratulations! You are now an expert in using Gulp.
  25. 25. @TheMattBruntIntro to Gulp The Gulpfile Where the magic happens
  26. 26. @TheMattBruntIntro to Gulp gulpfile.js
  27. 27. @TheMattBruntIntro to Gulp Best Practices?
  28. 28. @TheMattBruntIntro to Gulp How should it be structured? • Split tasks into separate files and include them with a plugin. • Or just define all tasks in the file. • Use a separate config file. • Or include config within gulpfile.js • Object • JSON However you want.
  29. 29. @TheMattBruntIntro to Gulp What can we do with it? • Pretty much anything you want. • Compile SASS / LESS / Stylus etc into CSS. • Compile CoffeeScript etc into JS. • Concatenate files. • Minify files. • Clean up / rename / move files. • Syncing of your browser across multiple devices. • Re-run tests. • and so on…
  30. 30. @TheMattBruntIntro to Gulp Outcomes & Benefits • Performance gains: • Concatenating files reduces the number of requests to fetch assets for our site. • Minifying reduces file size of CSS / Images / JS.
 Smaller files lead to faster page load times. • Portable. • Setup once, commit gulpfile.js and dependencies, every dev has the same setup. • Automatic re-running of tasks. • Easy to use.
  31. 31. @TheMattBruntIntro to Gulp Favourite feature?
  32. 32. @TheMattBruntIntro to Gulp File watchers. No more save file, switch to terminal, re-run task. Repetitive & boring.
  33. 33. @TheMattBruntIntro to Gulp Demo It’s easier to see it in action.
  34. 34. @TheMattBruntIntro to Gulp Talk through gulpfile.js Configuration Gulp utils Run a task See changes File watchers Browser sync PHP Stuff!
  35. 35. @TheMattBruntIntro to Gulp Links & info