Using grunt-usemin with Mean.io (separate public/ and app/ folders)

Question

I created a new project using yeoman angular generator which I then modified to some extend to fit my own needs. However later on I realized I'd like to use mean.io for express and mongodb supports. It took me quite some time to copy necessary parts from the mean.io default project to my own project. However I am still facing serious problems with grunt-rev and grunt-usemin.

The original yeoman generated project had app/ folder which contained all the AngularJS items. The new project however has app/ folder for all the items that exist in the server and then public/ folder for all the items needed in the client end. Now the grunt-rev plugin renames the css and image files to contain some identifier that matches the version of that item. I think this is pretty useful so I would like to keep it in my project. Now then; my index.html is located in the app/ folder and all the css and images are in the public/ folder. In my index.html I got images in format like "<img src="images/imagename.png">". This works when I test the project by launching the node express server since it offers both the app/views/ and public/ from the same location which is the server root. Usemin doesn't understand this however as the image sources don't match the absolute folder structure. I tried to move app/views/ content to app/ but to no avail. The same happens with css files that are built with cssmin. I got property in my index.html and under that all my css. After the build I got styles/main.css there but as usemin doesn't realize the folder structure, I end up with styles/main.css in index.html and 986a2d75.application.css in styles/.

Is there any way to let usemin know that two folders should be handled like they are one? I found that you could force usemin to look for certain pattern but that would force me to remember to add every image to gruntfile separately so I'd rather not use these plugins at all before I'd do that.

Answer 1

Finally found out about Generator Angular Fullstack which did everything I needed and more. It properly handles the copying of files from src->.tmp->dist and does all the necessary usemin magic in the process. Awesome tool!