grunt为js和css使用了两种不同的concat配置

Question

我正在使用grunt usemin来优化我的css和js文件。我只想为css文件而不是js文件自定义concat:生成的任务。但我注意到，生成的配置对此任务使用相同的选项，即使我在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。Javascript也有部分第三方依赖性，我无法控制，但无论如何都想将它们连接起来（而不是丑陋）。有些文件我无法使用默认分隔符（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文件，并返回附加了;的文件源。

Answer 2

不幸的是，usemin不支持您的场景。但你可以把它当作一个技巧：

• 配置全局concat/uglify以匹配您对CSS/JS文件的要求
• 为每种情况保留工程CSS或JS来修复它

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

1. CSS/JS 的concat配置

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

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

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

希望这能帮助