Grunt usemin、filerev 和 load-grunt-config答案

【问题标题】：Grunt usemin, filerev and load-grunt-configGrunt usemin、filerev 和 load-grunt-config
【发布时间】：2015-04-08 16:03:06
【问题描述】：

更新

我已经上传了我在这里遇到的问题的示例：

https://github.com/ianjamieson/grunt-usemin-issue

运行 grunt build 时，您会看到它生成了 dist 文件夹并在正确的 revved 文件中，但是我无法使用正确的文件路径更新 page.html！

我将问题的其余部分留在这里供参考，但是，您可以忽略它并仅使用 GitHub 存储库作为示例。

我正在尝试将 filerev 模块与 usemin 一起使用，但我认为可能存在一些问题，因为我也在使用 load-grunt-config。

usemin 上的文档说我应该只添加一个 revmap 并将值设置为：

<%= grunt.filerev.summary %>

但是，这返回的是未定义的。

GruntFile.js

module.exports = function(grunt) {

     var config = {
         buildTasks: [
             'newer:copy', // copies the src directory to dist (htdocs)
             'requirejs', // do an r.js build to concat modular dependencies
             'fetchpages', // if there are any remote resources, fetch them here
             'concat:head', // concats js in the head
             'concat:foot', // concats js in the head
             'uglify:head', // compresses js in the head
             'uglify:foot', // compresses js in the foot
             'cssmin', // minifies and concats css
             'filerev', // changes the file name to include md5 hash and force cache refresh
             'usemin', // runs through html and inputs minified js and css
             'newer:htmlclean', // removes whitespace from html files where required
             'newer:imagemin', // minify newer images
             'clean:afterBuild' // deletes files that are not required for build
         ]
     };

    require('time-grunt')(grunt);
    require('load-grunt-config')(grunt, {
        jitGrunt: {
            staticMappings: {
                fetchpages: 'grunt-fetch-pages'
            }
        }
    });

    grunt.registerTask('build', config.buildTasks);

};

usemin.js

module.exports = function (grunt, options) {
    return {
        revmap: '<%= grunt.filerev.summary %>',
        html: [
            'path/to/page'
        ]
    };
};

filerev.js

module.exports = function(grunt, options) {
    return {
        options: {
            algorithm: 'md5',
            length: 10
        },
        js: {
            src: [
                'path/to/js.js'
            ]
        },
    };
};

我收到了错误：

Running "usemin:revmap" (usemin) task
Verifying property usemin.revmap exists in config...OK
Files: [no src] -> revmap
Options: type="revmap"
Replaced 0 references to assets

【问题讨论】：

我认为您缺少useminPrepare 任务。以下是从他们的文档中复制的 In a typical usemin setup you launch useminPrepare first, then call every optimization step you want through their generated subtask and call usemin in the end.
嗨@Vishwanath，我尝试添加 useminPrepare 任务，但没有成功

标签： gruntjs grunt-usemin

【解决方案1】：

我已经设法解决了这个问题，您可以在此处的主分支中看到一个工作示例：

https://github.com/ianjamieson/grunt-usemin-issue

主要的帮助是usemin 任务中的assetsDirs 选项。起初我还有一个拼写错误，叫它assetDir，所以请确保包含 s！这是此工作项目中 Gruntfile 的示例：

module.exports = function(grunt) {

 grunt.initConfig({
    copy: {
      main: {
        cwd: 'src/',
        src: '**',
        dest: 'dist/',
        expand: true,
        flatten: false
      },
    },
    useminPrepare: {
        html: 'dist/templates/page/page.html',
        options: {
            dest: './dist',
            root: './dist'
        }
    },
    filerev: {
        options: {
          algorithm: 'md5',
          length: 16
        },
        js: {
          src: 'dist/resources/js/app.min.js'
        }
      },
      usemin: {
        html: 'dist/templates/page/page.html',
        options: {
            assetsDirs: ['dist']
        }
      }
  });

  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-debug-task');
  grunt.loadNpmTasks('grunt-filerev');

    grunt.registerTask('build', [
      'copy',
      'useminPrepare',
      'concat:generated',
      'uglify:generated',
      'filerev',
      'usemin'
    ]);
};

revved 文件是从 assetsDirs 文件夹中相对搜索的，因此在本例中为 dist。 HTML 中的文件路径是resources/js/app.js。所以通过将两者结合起来，它正在查看dist/resources/js/app.js

【讨论】：

【解决方案2】：

我回答了类似的问题here

我没有使用 usemin，因为我使用 requirejs 加载模块，所以我不希望我的 html 文件被更新为新的文件名。 Requirejs 的映射配置功能是我用来将原始模块名称映射到新模块名称的。

【讨论】：