0

我正在尝试设置一个自定义的 Gruntfile.js 以用作未来项目（主要是 Web 性能优化任务）的样板。

与这个问题最相关的任务是串联。这是最近项目中该任务的配置：

concat: {
            css: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
                },
                src: [
                     'wp-content/plugins/orangebox/css/orangebox.css', 
                     'wp-content/themes/caps/style.css', 
                     'styles.css', 
                     'contact.css', 
                     'pro_dropdown_2/pro_dropdown_2.css', 
                     'css/slider.css'
                ],

                dest: 'combined.<%= grunt.template.today("ddmmyyyy") %>.css'
            },

            js: {
                options: {
                    banner: '/*! <%= pkg.name %>-Version-<%= pkg.version %>-Compiled-<%= grunt.template.today("dd-mm-yyyy") %> */\n',
                },

                src: [
                    'cformnkp.js',
                    'AC_RunActiveContent.js',
                    'js/moo_12.js',
                    'js/sl_slider.js',
                    'js/swfobject.js',
                    'scripts/*.js',
                    'pro_dropdown_2/*js'
                ],

                dest: 'concat.<%= grunt.template.today("ddmmyyyy") %>.js',
                separator: ";"
            }
        },

为了让我之后的任何其他开发人员知道我做了什么，我想在连接代码的每个部分（即“横幅”）之前添加一个注释，说明在我将它们全部连接之前原始文件名是什么。

如果新文件的名称很明显，那也很酷。例如，如果连接的 JS 文件是cformnkp-AC_RunActiveContent-moo_12-sl_slider-swfobject.js（这忽略了动态添加的文件，以及最后一个专门枚举的文件，但你明白了）。

我认为<%= pkg.name %>可以做到这一点，但它只插入我的包的名称，如package.json.

我无法完全理解 LoDash 模板文档，这里似乎没有任何内容表明如何做到这一点，尽管它看起来很简单。一点帮助？

4

1 回答 1

1

至于包含原始文件路径的代码的每个部分之间的分隔符process，您可以使用此问题中提到的 grunt-contrib-concat 选项：grunt-concat separator option?

对于类似的文件名lib1-lib2-lib3.js，您可以查看grunt.file api 页面。

该grunt.file.expand()函数采用文件模式列表并返回匹配的文件名的完整列表（带路径）。

从那里， Gruntfile.js中的一些老式 Javascript 代码将获得您想要的结果。

之前grunt.initConfig： 

var src = [
    'cformnkp.js',
    'AC_RunActiveContent.js',
    'js/moo_12.js',
    'js/sl_slider.js',
    'js/swfobject.js',
    'scripts/*.js',
    'pro_dropdown_2/*js'
];

// returns full list of .js files that matches your *.js
var complete_src = grunt.file.expand(src); 


var final_name = '';

// some string manipulations to get your the format you want 

for (var i = 0; i < complete_src.length; i++) {
    complete_src[i] = complete_src[i].substring(complete_src[i].lastIndexOf('/') + 1, complete_src[i].length - 3);

}

var final_name = complete_src.join('-');

然后：

    dist: {
        src: src ,
        dest: 'dist/'+final_name+'.js'
    }
于 2013-11-29T09:50:37.420 回答