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.
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!
Related
I still have some problems to handle my assets in symfony. The best practices say, I should store my assets in web/.
But I dont like to store my raw sass files there, because its a public folder and I think only compiled or static files should be stored there.
Thats why I store them (js and sass) currently in app/Resources. And my assetic.read_from is app/Resources. But then there are some bundles, that are symlinked by assets:install to web/bundles/.
And now, when I want to include this bundle-assets in my twig files, I have to go there by ../../web/bundles/.. in the stylesheets block. That doesnt look very clean, so I did a symlink app/Resources/bundles->web/bundles/ and that works.
But I still think its too much fiddle and I would like to know if there is a cleaner way that better collects my assets in one place.
Don't use AsseticBundle, it was even removed in default symfony-standard 2.8. Managing frontend assets with php is workaround for someone who really don't want to use "the right tools"
I personally keep my source files in /assets/ and with Grunt JS I compile them to /web/assets/ which later is served from assets.somedomain.com through CDN
2 years ago I wrote post about managing assets with symfony, it's still valid and up to date. You might want to check it out.
http://konradpodgorski.com/blog/2014/06/23/better-way-to-work-with-assets-in-symfony-2/
I should extend post by things I learned since then but always not enough time :)
I don't see why you can't use web/ folder for your assets.
I often work with less and other file format which are afterward processed and minified.
The solution to your problem seems simple to me: Use two folder in the web/ folder.
The first folder would be your source/ folder. In which you would place all your sass files. You will add a .htaccess file to this same folder, and deny all access (you can copy from the .htaccess file in the src/ folder).
Then a second folder, lets call it assets which will hold all your compiled and minified assets.
That should do the trick... ;)
You may be interested in this topic as well. It may help to hide futher the existence of your source/ folder. ;)
If you really don't want to have your sources files in the web/ folder, then loot at this, it should help you place your sources files in your bundle.
Lets assume I have 2 static assets (html files) in my project, files a.html and b.html.
File a.html has a link to file b.html inside of it.
Now I run a build and the 2 files got their name changed and everything is working fine (by the filerev module).
Now I need to make a small change only in file b.html -> filerev will give a new name to file b.html in the next build. Because file a was not changed it will have the same name as the prev build.
Now, in the next build usemin will go to file a and will fix the link to the new file b name and everything looks fine. But not, because file a still has the same name as prev build, users will get a broken link when trying to access file b from a.
I guess a workaround is to instead of having hashes of the file names, generate random file names each time.
That way you are generating all files so it is not optimized, but you prevent the caching problems between versions, while still allow caching of the browser for the same version.
Using the grunt-angular-template task can solve this issue as it is adding all the templates to the $templateCache of angular, so the no real requests will be made to the server when a template is requested and the recent template is loaded from the cache. Of course it is not ideal as in big applications you will not want this as this may increase your js file size
I have a template, one of those you could buy, with many css/js/images, very beautiful.
But I have to control these pages with Ruby on Rails, which I am still learning.
The template files have many directives for other files and folders.
I am trying to understand the Assets Pipeline and I am feeling that it looks not good.
There are dozens of css files, with the directives for many images that are placed in other folders.
I am very scared to be straightforward.
I am not the project owner, I just have these two requirements:
Use this template
Build the system in Ruby on Rails
Could someone indicate me the correct way to get along with this situation.
Thanks a lot.
There is no direct solution to this, but may be this can help: install_theme gem. I haven't used it but the link shows how to use an html/css/js theme in rails application.
Friends,
There is a solution for dummies!
I am feeling so fool.
Inside Rails folders, there is a folder called public
We just have to put our css/js/images inside this folder.
For example, in my template, the index.html was in the same folder then a folder called assets which has sub folder css, js, images
So, the files need for index.html were (relatively to it) in assets/css/... or assets/js/...
Thus, all I had to do was copy my whole folder assets to inside the public directory below Ruby on Rails files.
I found it here:
The Asset Pipeline
I am sorry for the dummy question.
Thanks a lot!
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)
I create a default yeoman project. yeoman server works great.
yeoman build results in files put in the dist folder.
when i push to a folder on a staging server that is not at the root i get 404s. This is to be expected ( i think ), but does anyone know how to modify the grunt file or pass in something to the compiler argument to allow the behavior i want?
Which is to run yeoman build and then be able to push the content of the dist folder to a non root location and not have the website choke on the image paths and js paths etc?
thanks for your time cp
My bug was caused by confusion about yeoman.
I was having problems with the build process and paths and the renaming of images.
So my bad.
I think this is the solution to my issue.
Not the best but what I have learned is that …
If you define an image path in the .scss as “../” Yeoman will not modify the path or image name.
Problem: it still renames all the images and compresses them, so the .css can’t find the correct image.
The unmodified image does not exist in dist / images
So the work around is
1.Keep the ../ in the .scss file.
2.Run yeoman build
3.And then use optiPng on all the images we want to compress. This will result in compressed images that are not renamed.
4.Then drop those images in your images folder on staging.
And the. css will be able to target them.
FYI yeoman uses optiPng. (i think)