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.

Bower & Grunt - A practical workflow

5,418 views

Published on

A practical workflow using Bower and Grunt that keeps your vendor folder clean, copies your assets in different locations and makes your dependency management an easy task.

Published in: Software

Bower & Grunt - A practical workflow

  1. 1. Bower & Grunt A practical workflow riccardo coppola about.me/riccardocoppola
  2. 2. Workflow step 1: Bower Manage front end dependencies
  3. 3. What?
  4. 4. Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.
  5. 5. Why?
  6. 6. Declutter your lib/vendor folder Too often we end up with 5 different versions of the same library (jQuery is an always-working example...). Which one are we actually using?
  7. 7. Dependency management No more downloads from ten different websites to get your dependencies. No more version mismatch problems.
  8. 8. Automate dependency management $ bower install That’s it
  9. 9. vs ● Flexible: install from Bower registry, GitHub, zip, fs location ● created solely for the front-end and optimized with that in mind ● flat dependency tree (just one lib for each type), good for front-end related stuff ● Most commonly used for managing Node.js modules ● works for the front-end too when combined with Browserify ● nested dependency tree (size heavy), good for server side modules
  10. 10. How?
  11. 11. Install Bower $ npm install -g bower Bower requires Node, npm and Git.
  12. 12. Search for a package http://bower.io/docs/api/#search bower search <package>
  13. 13. Install a package # registered package (specific version) $ bower install jquery#1.2.3 # GitHub shorthand $ bower install desandro/masonry http://bower.io/docs/api/#install # Git endpoint $ bower install git://github.com/user/package.git # URL $ bower install http://example.com/script.jsv
  14. 14. Maintaining dependencies # install package and add it to bower.json dependencies $ bower install <package> --save # install package and add it to bower.json devDependencies $ bower install <package> --save-dev
  15. 15. bower.json (bower.json : bower = package.json : npm) { "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>", "<name>": "<folder>", "<name>": "<package>" }, "devDependencies": { "<test-framework-name>": "<version>" } }
  16. 16. Is it enough? Bower is just a tool, helps us organize front end dependencies and keeps track of versions.
  17. 17. What we get ➔ CSS and JS in the same folder ➔ docs/ tests/ src/ minified versions and sourcemaps are all not needed ➔ Bower components folder can grow if not cleaned
  18. 18. What we want ➔ separated vendor folders for CSS and JS ➔ single, non minified version of every lib, nothing else ➔ clean vendor folder containing just used libs and only one version
  19. 19. Workflow step 2: grunt-bowercopy Scrupulously manage file locations for bower dependencies.
  20. 20. Why ➔ Consistently positions your dependencies where you want them in your repository. ➔ Conveniently facilitates tracking your dependencies without committing the entire Bower components folder. ➔ Has the potential to reduce build times dramatically. ➔ By default, runs bower install for you
  21. 21. https://www.npmjs.org/package/grunt-bowercopy $ npm install grunt-bowercopy --save-dev
  22. 22. grunt/bowercopy.js js: { options: { destPrefix: 'public/js/vendor }, files: { 'jquery.js': 'jquery/jquery.js', 'require.js': 'requirejs/require.js' }, }, sass: { options: { destPrefix: 'public/css/vendor }, files: { 'bootstrap': 'bootstrap-sass-official/bootstrap.js' }, }, ...
  23. 23. Workflow step 3: grunt-contrib-clean Clear files and folders
  24. 24. https://www.npmjs.org/package/grunt-contrib-clean $ npm install grunt-contrib-clean --save-dev
  25. 25. grunt/clean.js { vendor: ["public/css/vendor/*", "public/js/vendor/*"] }
  26. 26. Everything together
  27. 27. aliases.js { vendor: ["clean:vendor", "bowercopy:js", "bowercopy:sass"] }
  28. 28. If you commit your dependencies 1. .gitignore the Bower component folder 2. Add a hook on git pre-commit and run ‘grunt vendor’ as part of your pre-commit workflow 3. Push your public/css/vendor & public/js/vendor
  29. 29. If you DO NOT commit your dependencies 1. .gitignore the Bower component folder, public/css/vendor & public/js/vendor 2. Have your CI run ‘npm install’ as first step of the front end workflow 3. Modify your package.json
  30. 30. package.json { "name": "myApp", "version": "0.1.0", ... "scripts": { "postinstall": "./node_modules/grunt/bin/grunt vendor" }, ... }
  31. 31. That’s all folks!

×