grunt usemin转换资产的路径

时间:2014-08-20 11:05:22

标签: javascript angularjs gruntjs yeoman grunt-usemin

这是我的输入文件(使用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 -->

并使用min编译一个单元文件vendor.xxxx.js中的所有文件并将html替换为:

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

但这里的路径是相对的,我想要一条绝对的道路。此外,角度应用程序位于我的节点服务器的子目录中(在仪表板/中),因此我正在使用nignx并重定向所需的内容。我想:

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

但脚本文件本身应该不受影响。

1 个答案:

答案 0 :(得分:4)

您的问题与usemin有关,请参阅此处的文档:https://github.com/yeoman/grunt-usemin

只需将index.html中的评论替换为:

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

表示:

<!-- build:PATH_WHERE_TO_FIND_FILES DESTINATION_PATH -->

通过ngAnnotate替换ngmin:

修改您的Gruntfile:

替换:

// 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'
    }]
  }
},

通过

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

并替换:

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

人:

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

运行以下两个命令来修改package.json: 1. npm卸载grunt-ngmin --save 2. npm install grunt-ng-annotate --save