Intro to Gulp
•
1 like•1,535 views
This document introduces Gulp, an automated build system that uses streams and pipes to enhance workflows. It discusses advantages like performance gains from concatenating and minifying files. Gulp can be used to compile stylesheets and scripts, concatenate files, minify code, clean up files and more. Key aspects like file watchers that automatically rerun tasks on changes are highlighted. A demo is promised to show Gulp in action.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Intro to Gulp
Similar to Intro to Gulp (20)
More from Matt Brunt
More from Matt Brunt (9)
Intro to Gulp
- 1. @TheMattBruntIntro to Gulp Intro to Gulp The Streaming Build System “Automate and enhance your workflow”
- 2. @TheMattBruntIntro to Gulp Before I talk about Gulp
- 3. @TheMattBruntIntro to Gulp Task Runners
- 4. @TheMattBruntIntro to Gulp Gulp vs Grunt vs Cake vs Broccoli vs Brunch vs NPM scripts Anyone else hungry?
- 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. @TheMattBruntIntro to Gulp What should I use? Whatever you want. You’re the ones working with it. Choose what you like.
- 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. @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. @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. @TheMattBruntIntro to Gulp You may have pictured something like this: This is what Gulp does.
- 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. @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. @TheMattBruntIntro to Gulp package.json Node packages!
- 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. @TheMattBruntIntro to Gulp Learn just 4 Gulp functions
- 17. @TheMattBruntIntro to Gulp gulp.src(globs[, options]) Emits a readable stream of files that matches the glob. This is piped to other streams.
- 19. @TheMattBruntIntro to Gulp gulp.dest(path[, options]) Returns a writeable stream. Files piped to this are written to the filesystem
- 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
- 23. @TheMattBruntIntro to Gulp gulp.watch(glob, fn) Runs the function whenever a file matching the glob changes.
- 24. @TheMattBruntIntro to Gulp Congratulations! You are now an expert in using Gulp.
- 25. @TheMattBruntIntro to Gulp The Gulpfile Where the magic happens
- 27. @TheMattBruntIntro to Gulp Best Practices?
- 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. @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. @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. @TheMattBruntIntro to Gulp Favourite feature?
- 32. @TheMattBruntIntro to Gulp File watchers. No more save file, switch to terminal, re-run task. Repetitive & boring.
- 33. @TheMattBruntIntro to Gulp Demo It’s easier to see it in action.
- 34. @TheMattBruntIntro to Gulp Talk through gulpfile.js Configuration Gulp utils Run a task See changes File watchers Browser sync PHP Stuff!
- 35. @TheMattBruntIntro to Gulp Links & info http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/ http://xkcd.com/378/ https://github.com/Brunty/intro-to-gulp-talk/