nodejs / grunt usemin plugin
grunt-usemin, gruntjs, node.js, yeoman
Solution
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 https://github.com/yeoman/yeoman/issues/586
replace
content.replace(block, indent + '<link rel="stylesheet" href="' + target + '"\/?>');
with
content.replace(block, indent + '<link rel="stylesheet" href="' + target + '"/>');
If apply changes this issue is solved. Note: apply the patch on `usemin.js` at `/usr/local/lib/node_modules/yeoman/tasks` (on OSX)
Problem
I'm using yeoman and grunt to build my project and grunt-css plugin for using 'cssmin' instead of 'css' built-in with grunt.js index.html ``` <!-- build:css styles/styles.css --> <link rel="stylesheet" href="styles/main.css"/> <!-- endbuild --> <!-- build:js scripts/scripts.js --> <script src="scripts/vendor/jquery.min.js"></script> <script src="scripts/vendor/handlebars-1.0.0.beta.6.js"></script> <script src="scripts/vendor/ember-1.0.pre.min.js"></script> <script src="scripts/main.js"></script> <script src="scripts/routes/app-router.js"></script> <script src="scripts/store.js"></script> <script src="scripts/controllers/application-controller.js"></script> <script src="scripts/models/application-model.js"></script> <script src="scripts/views/application-view.js"></script> <!-- endbuild --> ``` Gruntfile.js ``` rev: { js: 'dist/scripts/**/*.js', // scripts/**/*.js css: 'dist/styles/**/*.css', // styles/**/*.css img: 'dist/images/**' // images/** }, 'usemin-handler': { html: 'index.html' }, usemin: { html: ['dist/**/*.html'], // **/*.html css: ['dist/**/*.css'] // **/*.css }, rjs: { // no minification, is done by the min task optimize: 'none', baseUrl: './scripts', wrap: true }, cssmin: { dist: { src: [ 'app/styles/**/*.css' ], dest: 'dist/styles/styles.css' } }, concat: { dist: { src: [ 'app/scripts/**/*.js' ], dest: 'dist/scripts/scripts.js', separator: '/**********/\n' } }, min: { dist: { src: [ 'dist/scripts/scripts.js' ], dest: 'dist/scripts/scripts.js', separator: '/**********/\n' } } ``` Then the build project structure is: ``` dist/ |__scripts/ |____04216377.scripts.js |__styles/ |____d41d8cd9.styles.css |__index.html ``` Then output index.html file ``` <link rel="stylesheet" href="styles/styles.css"/?> <script src="scripts/04216377.scripts.js"></script> ``` As you see all went OK except renaming the revisioned styles in index.html that should be 'styles/d41d8cd9.styles.css Anyone knows why? And is the questionmark '?' in the line normal??? Note: for more information this is outputted in my console (no errors) Running "rev:js" (rev) task dist/scripts/scripts.js --- 04216377.scripts.js Running "rev:css" (rev) task dist/styles/styles.css --- d41d8cd9.styles.css Running "rev:img" (rev) task Running "usemin:html" (usemin) task usemin:html - dist/index.html scripts/scripts.js ``` was <script src="scripts/scripts.js"></script> now <script src="scripts/04216377.scripts.js"></script> ``` Running "usemin:css" (usemin) task usemin:css - dist/styles/d41d8cd9.styles.css And no renaming has been done! Thanks a lot guys!