Gulp-Bower Presentation

Building a front-end toolchain with Gulp and Bower

Transcript

1. Building a front-end toolchain with Gulp and Bower
2. What is Gulp? A javascript task runner that helps automate repetitive development tasks.
3. How does Gulp work? • Streaming build system • Uses node filestreams • Manipulates files in memory • Files are ‘piped’ through plugins • Integrates with any technology stack • Focus is on I/O
4. Gulp I/O
5. Gulp do’s and don’ts • Keep task names short & explicit • Modularize tasks into separate files • Maintain a list of file paths in a variable • Serve files from a dedicated build folder • Don’t cram all tasks into gulpfile.js • Don’t download every plugin ever • Avoid duplicating tasks only to change one process • Don’t serve files from a ‘tmp’ folder Do’s Don’ts
6. gulpfile.js
7. Gulp setup • ‘npm install -g gulp’ • Plugins • ‘npm install <plugin> --save-dev’ • CLI • ‘gulp <task>’ • IDE integration (optional)
8. What is Bower? A package manager for front-end dependencies.
9. Bower setup • ‘npm install -g bower’ • bower.json • ‘bower init’ • .bowerrc file (optional) • CLI • ‘bower install <package> --save'
10. Demo https://github.com/bellizio/gulp-starter-kit
11. Questions?
12. Resources Gulp • https://github.com/bellizio/gulp-starter-kit • https://github.com/gulpjs/gulp • http://gulpjs.com/plugins/ Bower • http://bower.io/ • https://scotch.io/tutorials/manage-front-end-resources-with-bower