用于 js 和 css 的 grunt usemin 2 个不同的 concat 配置答案

【问题标题】：grunt usemin 2 different concat configs for js and css用于 js 和 css 的 grunt usemin 2 个不同的 concat 配置
【发布时间】：2014-11-11 20:33:27
【问题描述】：

我正在使用 grunt usemin 来优化我的 css 和 js 文件。我想为 css 文件定制 concat:generated 任务，而不是 js 文件。但我注意到即使我在 post 对象中指定 css 键，生成的配置也会使用相同的选项来完成此任务：

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({

        copy: {
            ejs: {
                src: 'index.html',
                dest: 'index.prod.html'
            }
        },

        useminPrepare: {
            html: 'index.html',
            options: {
                dest: 'static',
                root: 'static',
                flow: {
                    steps: {
                        'js': ['concat', 'uglifyjs'],
                        'css': ['concat', 'cssmin']
                    },
                    post: {
                        js: [{
                            name: 'uglify',
                            createConfig: function (context, block) {
                                // console.log('\ncontext:\n',context,'\nblock:\n',block);
                                context.options.generated.options = {
                                    // options for uglify:generated task
                                };
                            }
                        }],
                        css: [{
                            name: 'concat',
                            createConfig: function (context, block) {
                                // console.log('\ncontext:\n',context,'\nblock:\n',block);
                                context.options.generated.options = {
                                    process: function (src, filepath) {
                                        // options for concat:generatedCSS
                                        console.log('\nfilepath: ', filepath);
                                        return src;
                                    }
                                };
                            }
                        }]
                    }
                }
            }
        },

        usemin: {
            html: [ 'index.prod.html' ]
        }

    });

    grunt.registerTask('default', ['watch']);
    grunt.registerTask('min', ['copy', 'useminPrepare', 'concat', 'uglify', 'usemin']);

};

生成的concat任务是

concat: {
    generated: {
        files: [
            {
                dest: 'path to optimized css',
                src: [ 'css files...' ]
            },
            {
                dest: 'path to optimized js',
                src: [ 'js files...' ]
            }
        ],
        options: { process: [Function] }
    }
}

有没有办法实现这个？谢谢

【问题讨论】：

标签： gruntjs grunt-usemin grunt-contrib-concat grunt-contrib-uglify

【解决方案1】：

我有同样的问题，因为我同时连接了 CSS 和 JavaScript。 Javascripts 也部分是我无法控制的第 3 方依赖项，但无论如何都想连接（而不是丑化）它们。有些文件我无法使用默认分隔符 (\n) 连接。

这是我最后想到的：

concat: {
  options: {
    process: function(src, filepath) {
      // output an extra semicolon when concatenating javascripts
      if (/\.js$/.test(filepath)) {
        return src + ';';
      }

      return src;
    }
  }
},

基本上，您在 concat 中指定的任何内容都将与 useminPrepare 任务将为您生成的配置合并。您也可以在此 concat 配置中直接指定 separator 选项，但这将是 CSS 和 JS 的分隔符，并没有真正的帮助。

在这里我检查它是否是一个带有非常基本扩展检查的 JavaScript 文件，并返回带有 ; 附加的文件源。

【讨论】：

【解决方案2】：

很遗憾，usemin 不支持您的方案。但是你可以把它当作一个技巧：

配置全局 concat/uglify 以匹配您对两个 CSS/JS 文件的要求
为每个案例保留工程 CSS 或 JS 来修复它

例如，如果我想通过 ; 分隔符连接 only JS 文件，我可以这样做：

CSS/JS 的 concat 配置

concat: {
    generated: {
        options: {
            separator: grunt.util.linefeed + ";" + grunt.util.linefeed
        }
    }
}

删除所有 ; 分隔符 - CSS 文件中的错误

replace: {
    cssConcat: {
        src: ["<%=pkg.public%>generate-resources/*.css"],
        dest: "<%=pkg.public%>generate-resources/",
        replacements: [{from: "};", to: "}"}]
    }
}

希望有帮助

【讨论】：