Is there something similar to build:js in the html files to concat css files? #623

kuatsure opened this Issue Oct 12, 2012 · 19 comments


None yet
4 participants

I noticed in the index.html file that there's a <!-- build:js scripts/plugins.js -->. Which takes all those files in that block, concats, and makes a new file ( named randomAlphaNumeric.plugins.js ).

<!-- build:css styles/styles.css -->
    <link rel="stylesheet" href="components/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="styles/screen.css"/>
<!-- endbuild -->

I tried this block, and it generates a file named randomAlphaNumeric.styles.css. When $ yeoman server:dist is run, there's a broken link regarding the css. This is what it generates

<link rel="stylesheet" href="styles/styles.css" ?="">

What you are trying to do should work, I'd take a look at your Gruntfile.js file... was it created by a generator or did you create it yourself?

A good place to start I suppose would be to take a look at the output when you run yeoman build

Does the usemin:handler task say it found the block with your css? If so it should spit out the new config, take a look at the concat portion it should have styles/styles.css (based on your example above) and an array of your files.

You should see the rev:css task being run before the usemin:html task. If that's correct the usemin:html task should tell you it re-wrote the styles/styles.css link tag and what it was and what it is now.

Grunt file is from a generator I made, but only edited to the sense of the file structure I use normally.

Yes. The block is found, concatted. rev:css is run which makes the new file but usemin:html is not picking up the new file name. Below is an excerpt.

usemin:html - index.html
>> scripts/vendor.js
was <script src="scripts/vendor.js"></script>
now <script src="scripts/2edc7af0.vendor.js"></script>
>> scripts/plugins.js
was <script src="scripts/plugins.js"></script>
now <script src="scripts/8ab52a5b.plugins.js"></script>

Running "usemin:css" (usemin) task

usemin:css - components/normalize-css/normalize.css

usemin:css - components/underscore/docs/docco.css

usemin:css - components/underscore/test/vendor/qunit.css

usemin:css - styles/74a6bc39.screen.css

usemin:css - styles/ee6faf8e.styles.css

No css rewrite, but it did pick up my js blocks.

Then perhaps usemin isn't configured to look for css-- Open your Gruntfile.js and find the usemin: {...} part down in the build configuration... for html and css it would look like this:

usemin: {
  html: ['**/*.html'],
  css: ['**/*.css']

If it only has the html part, 🎉 yay problem solved-- add the css config...
If it already looks like above then I'm stumped 💨


sleeper commented Oct 14, 2012

Which version of yeoman are you using ?
Doing similar test on master seems to work on my side ...

    // renames JS/CSS to prepend a hash of their contents for easier
    // versioning
    rev: {
      js: 'scripts/**/*.js',
      css: 'styles/**/*.css',
      img: 'images/**'

    // usemin handler should point to the file containing
    // the usemin blocks to be parsed
    'usemin-handler': {
      html: 'index.html'

    // update references in HTML/CSS to revved files
    usemin: {
      html: ['**/*.html'],
      css: ['**/*.css']

Using the lastest version 0.9.4

post your gruntfile.js and index.html in a gist and i'll see if it fails for me and if so why

Nothing wrong with your html or gruntfile, it worked fine for me.. I had to use my own stylesheet for screen.css... post yours screen.css to that gist and I'll see if that breaks it for me

Updated the gist. Added my dist index file, screen.scss ( app specific ), screen.css from the build.

I meant your original "styles/screen.css" file, you posted a rev'd screen.css with normalize.css stuff already in it

There isn't one per se. It's from a .scss file in the 'app' folder.

Here's a screen cap of the app folder.

I've got the same problem that @kuatsure is having.
I found a similiar issue where I posted my problem: h5bp/node-build-script#42

All concat, minifying and reversioning is working for scripts (.js files) but no replacement for .css in outputted index.html.
Also note that <link>tag in header has a ?character, maybe due to an error?

@chrixian you said it's working. I've updated Yeoman but still getting the same problem.

@chrixian @kuatsure I've found the problem.
I've got Yeoman 0.94 version and needs a fix on usemin task
The ?character at <link>is a regex mistake. You should rewrite this expression because css renaming is failing.
Found the correct workaround at #586

If apply changes this issue is solved.
Note: apply the patch on usemin.js at /usr/local/lib/node_modules/yeoman/tasks (on OSX)


sleeper commented Nov 16, 2012

I do not understand .. This is fixed in yeoman since some time now ?
Do you confirm it's not working on latest ?

@sleeper it is fixed on branch master of yeoman/yeoman.
But I don't know why when I installed previous version and after did the update this line was corrupt and of course was crashing.
I search in my code and replaced the regexp and then got working.

Updated to version 0.95 and this issue seems to be fixed. Although I did preform the workaround found in #586 before updating - so I can't confirm that it was the workaround or the update that fixed this. How about you @adriagil ?

I probably should have mentioned I was always working off master which is probably why mine was working while yours wasn't before 0.95 was released

Installing 0.94 or higher has the issue solved (I've checked the code) as changelog shows:

I guess case closed, eh? :)

Thanks guys!

kuatsure closed this Nov 16, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment