Question

我正在使用grunt usemin来优化我的css和js文件。我想自定义concat：仅为css文件生成任务，而不是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] }
    }
}

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

Answer 1

我有同样的问题，因为我连接了CSS和JavaScripts。 Javascripts还有部分第三方依赖，我无法控制，但无论如何想要连接（而不是uglify）。有些文件无法与默认分隔符（\n）连接。

这是我最终想出的：

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

      return src;
    }
  }
},

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

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

Answer 2

不幸的是，usemin不支持您的方案。但你可以做到这一点：

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

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

CSS / JS的连接配置

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: "}"}]
    }
}

希望这个帮助

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

2 个答案: