Javascript 拥有Grunt名称文件,并通过Gruntfile.js包含带有源文件名的横幅

Javascript 拥有Grunt名称文件,并通过Gruntfile.js包含带有源文件名的横幅,javascript,json,gruntjs,lodash,grunt-contrib-concat,Javascript,Json,Gruntjs,Lodash,Grunt Contrib Concat,我正在尝试设置一个定制的Gruntfile.js,作为未来项目(主要是web性能优化任务)的样板文件 与此问题最相关的任务是连接。以下是最近项目中该任务的配置: concat: { css: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',

我正在尝试设置一个定制的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: ";"
            }
        },
concat:{
css:{
选项:{
横幅:'/*!*/\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..css'
},
js:{
选项:{
横幅:'/*!-Version--Compiled-*/\n',
},
src:[
“cformnkp.js”,
“AC_RunActiveContent.js”,
“js/moo_12.js”,
'js/sl_slider.js',
“js/swfobject.js”,
'scripts/*.js',
“pro_下拉菜单_2/*js”
],
dest:'concat..js',
分隔符:“;”
}
},
为了让我之后的任何其他开发人员都知道我做了什么,我希望在连接代码的每个部分(即“横幅”)之前都添加一条注释,说明在连接它们之前原始文件名是什么

如果新文件的名字很明显的话,那也很酷。例如,如果连接的JS文件是
cformnkp-AC_RunActiveContent-moo_12-sl_slider-swfobject.JS
(这忽略了动态添加的文件,以及最后一个专门枚举的文件,但您知道了)

我原以为
可以实现这一点,但它只插入了
package.json
中列出的我的包的名称


我不能完全理解LoDash模板文档,这里似乎没有任何内容说明如何实现这一点,尽管这看起来很简单。有什么帮助吗?

对于包含原始文件路径的代码的每个部分之间的分隔符,您可以使用grunt contrib concat的
过程
选项,如本问题所述:


对于像
lib1-lib2-lib3.js这样的文件名,您可以查看api页面

grunt.file.expand()
函数获取文件模式列表,并返回匹配文件名的完整列表(带路径)

从这里开始,grunfile.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('-');

谢谢,我会更详细地浏览API文档,但看起来这正是我想要的。如果是这样的话,我会把它标记为正确的。我最近在复习这段代码,并在
lastIndexOf
上阅读;我希望我能投更多的票。谢谢你的帮助。
    dist: {
        src: src ,
        dest: 'dist/'+final_name+'.js'
    }