CODEWITHSUNDEEP
node.jsgruntjsyeomangrunt-usemin
adriagil
adriagil

Reputation: 135

nodejs / grunt usemin plugin

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!

Upvotes: 3

Views: 2597

Answers (1)

adriagil
adriagil

Reputation: 135

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)

Upvotes: 5

Related Questions