1

我正在使用 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] }
    }
}

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

4

2 回答 2

2

我有同样的问题，因为我连接了 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任务将为您生成的配置合并。您也可以在此配置中直接指定一个separator选项concat，但是这将是 CSS 和 JS 的分隔符，这并没有真正的帮助。

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

于 2015-07-16T14:48:37.593 回答
1

不幸的是 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: "}"}]
    }
}

希望这有帮助

于 2014-11-28T04:43:54.327 回答