我正在尝试建立一个自定义的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模板文档,这里似乎没有任何内容表明如何做到这一点,尽管这看起来很直接。帮个忙?
对于包含原始文件路径的代码的每个部分之间的分隔符,您可以使用本问题中提到的grunt contrib concat的process
选项:grunt concat分隔符选项?
对于像lib1-lib2-lib3.js
这样的文件名,您可以查看grunt.fileapi页面。
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'
}