Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bower and Grunt workflow

I just want to get an opinion on my workflow. I am aware of Yeoman and have on purpose decided not to use it. My workflow goes like this:

  1. Run bower install to install all project assets dependencies.
  2. Run grunt which copies all js files from the bower components folder to a new js folder and all css files to a new css folder.
  3. Further use grunt task to concatenate and minify all js and css files from the new folders and put them in a dist folder.
  4. Refer to the final minified css and js in dist folder from HTML.

One thing i certainly don't want to do in my grunt task is to perform dependency specific task e.g. grab all js file from bootstrap folder into the new js folder, then grab all js file from prettyphoto folder into the new js folder. I want the grunt task to be as generic as possible so that i can use the same gruntfile in any project no matter what the bower dependencies might look like. The reason is if i should spend all those time writing my gruntfile for each project, why would i not just grab the source codes for all the dependencies in conventional way.

So there is a grunt-contrib-copy plugin to copy files from one place to another which i use to grab all js files from inside the bower's components folder. The problem is most of the bower components come with regular js and minified version of it. So, i am copying both of them and concatenating and uglifying them. So duplicate code!

Does my workflow makes sense? Is so, how can I get rid of the problem I mentioned in the paragraph above?

like image 305
Prashant Avatar asked May 30 '13 21:05

Prashant


People also ask

What is grunt and Bower?

Bower belongs to "Front End Package Manager" category of the tech stack, while Grunt can be primarily classified under "JS Build Tools / JS Task Runners".

What is Bower and NPM?

Bower is a package manager, like npm, which manages frameworks, libraries, assets, and utilities, installs them, and makes sure they are up to date. Traditionally, many web development projects combined npm and Bower. npm was used to manage back-end dependencies, while Bower was used for front-end dependencies.

What is Bower in Node js?

Bower is a package manager for client-side libraries and components that contain HTML, CSS, JavaScript, fonts, image files, and so on. You can install, locate, upgrade, and remove Bower packages without leaving WebStorm, on the dedicated Bower page or from the command line in the built-in terminal.

What is Bower in angular js?

Bower is a package manager for the web. To install angular, bower install angular. Angular is grabbed from github. We get a bower_components directory with angular inside of it.


1 Answers

If I'm understanding correctly, you should take a look at grunt-usemin. You can wrap your js tags in <!-- build:js js/foo.js -->. The useminPrepare task that's included in the package will cycle through any scripts (or css, or images, etc.) that are there and dynamically add them to the concat or uglify task.

The one downside I've found is that the usemin task is fairly slow but hopefully if this pull request is implemented, things will get much, much faster.

like image 53
imjared Avatar answered Sep 18 '22 18:09

imjared