CODEWITHSUNDEEP
javascriptangularjsgruntjsyeomangrunt-usemin
Vinz243
Vinz243

Reputation: 9938

Grunt usemin transform path to assets

This is my input file (using yeoman-angular)

  <!-- build:js(./) scripts/vendor.js -->
  <!-- bower:js -->
  <script src="bower_components/angular/angular.js"></script>
  ...
  <script src="bower_components/pagedown-semantic-ui/pagedown.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

And usemin compile all the files in a signle file vendor.xxxx.js and replace the html with:

<script src="scripts/vendor.f5d9f6b9.js"></script>

But the path here is relative and I'd like an absolute path. Besides, the angular app is in a subdir of my node server (in dashboard/), so am using nignx and redirecting what's necessary. I'd like:

<script src="/dashboard/scripts/vendor.f5d9f6b9.js"></script>

But the script file itself should be untouched.

Upvotes: 0

Views: 1433

Answers (1)

apairet
apairet

Reputation: 3172

Your question is related to usemin, see the doc here: https://github.com/yeoman/grunt-usemin

Simply replace the comment in your index.html to this:

<!-- build:js(./) /dashboard/scripts/vendor.js -->

which means:

<!-- build:PATH_WHERE_TO_FIND_FILES DESTINATION_PATH -->

To replace ngmin by ngAnnotate:

Modify your Gruntfile:

Replace: 

// ngmin tries to make the code safe for minification automatically by
// using the Angular long form for dependency injection. It doesn't work on
// things like resolve or inject so those have to be done manually.
ngmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/concat/scripts',
      src: '*.js',
      dest: '.tmp/concat/scripts'
    }]
  }
},

By

ngAnnotate: {
    options: {
        singleQuotes: true
    },
    dist: {
        files: [{
            expand: true,
            cwd: '.tmp/concat/scripts',
            src: '*.js',
            dest: '.tmp/concat/scripts'
        }]
    }
},

And replace:

grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
]);

By:

grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
]);

Run these 2 commands to modify your package.json: 1. npm uninstall grunt-ngmin --save 2. npm install grunt-ng-annotate --save

Upvotes: 4

Related Questions