我有以下结构：
src/
modules/
module1/
js/
main.js
scss/
main.scss
index.html
module2/
js/
main.js
scss/
main.scss
index.html
我想运行一个 grunt 任务将它们复制到以下结构中：
dev/
js/
module1.js
module2.js
css/
module1.css
module2.css
module1.html
module2.html
有没有办法用现有的 grunt 插件来做到这一点？如果没有，我怎么能做到这一点？
这可以使用grunt-contrib-copy插件来完成。
需要注意的主要事项是，您可以使用重命名函数（它接收每个文件的目标和源）以编程方式更改目标。
这是一个（有点脆弱的）示例Gruntfile.js，应该复制到您想要的结构：
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
copy: {
main: {
files: [
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.js'],
dest: 'dev/js/',
rename: function(dest, src) {
// use the source directory to create the file
// example with your directory structure
// dest = 'dev/js/'
// src = 'module1/js/main.js'
return dest + src.substring(0, src.indexOf('/')) + '.js';
}
},
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.scss'],
dest: 'dev/css/',
rename: function(dest, src) {
return dest + src.substring(0, src.indexOf('/')) + '.css';
}
},
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.html'],
dest: 'dev/',
rename: function(dest, src) {
return dest + src.substring(0, src.indexOf('/')) + '.html';
}
}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
// Default task(s).
grunt.registerTask('default', ['copy']);
};
不再需要为此使用grunt-contrib-copy，您现在可以利用grunt.file.expandMapping其中的选项来更改文件扩展名，或定义返回输出文件名的函数。
这是将 .jade 模板编译为 .html 文件files的任务中的对象示例：jade
files: [{
expand: true,
src: "**/*.jade",
dest: "<%= distDir %>",
cwd: "<%= assetsDir %>/jade",
rename: function(dest, matchedSrcPath, options) {
// return the destination path and filename:
return (dest + matchedSrcPath).replace('.jade', '.html');
}
}]
ext: '.html'在这种情况下，使用该选项而不是该选项会更容易rename，但我在rename这里使用它是为了让您了解它是如何工作的。
有关grunt.file 文档ext中的和rename（和其他）选项的更多信息。这里和这里还有一些例子。
您可以简单地使用选项：expand : true, flatten: true
无需自定义重命名回调。
不完全是您问题的答案，但我在这里寻找带有 grunt 的相对 dest 文件夹，所以...这是我解决它的方法
...
base: {
files:
[
{
expand: true,
cwd: 'app/design/frontend/',
src: ['**/Magento_Sales/email-src/*.html'],
dest: '../../Magento_Sales/email/',
rename: function(dest, src, expand) {
src = path.parse(src)
return path.join(expand.cwd, src.dir, dest, src.base);
}
},
],
}
...
这一点path.join(expand.cwd, src.dir, dest, src.base);只是创建我需要的路径。
expand.cwd = app/design/frontend/
src.dir = <DYNAMIC_FOLDERS>/Magento_Sales/email-src/
dest = ../../Magento_Sales/email/
src.base = <FILE>.html
和所有一起=app/design/frontend/<COMPANY>/<MAIN-THEME>/Magento_Sales/email/<FILE>.html
在我的情况下，它现在将在相对目标文件夹中编译我的 html 电子邮件
如果您想将 .coffee 文件重命名为 .js 或类似文件，则只需对其进行调整；）
sudo npm install grunt-contrib-copy
copy: {
rename: {
files: [{
expand: true,
dot: true,
cwd: './app/scripts',
dest: './app/scripts/',
src: [
'**/*.coffee'
],
rename: function(dest, src) {
console.log(dest + src);
return dest + src.replace('.coffee','.js');
}
}]
}
},
我想将文件保存在我们找到该文件的根目录下创建的 min 文件夹中，以便将插件文件夹移动到另一个项目中更容易：
-- Plugins/
-- bootstrap/
-- bootstrap.js
-- bootstrap.css
-- min/
-- bootstrap.min.js
-- bootstrap.min.css
由于此页面，我发布了我找到的解决方案，也许它可以帮助其他人：
uglify: {
options: {
mangle: true
},
dynamic_mappings: {
// Grunt will search for "**/*.js" under "Plugins/" when the "uglify" task
// runs and build the appropriate src-dest file mappings then, so you
// don't need to update the Gruntfile when files are added or removed.
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'Plugins/', // Src matches are relative to this path.
src: ['**/*.js', '!**/*.min.js'], // Pattern to match (ignore .min files)
dest: '/min/', // Destination path prefix.
ext: '.min.js', // Dest filepaths will have this extension.
extDot: 'last', // Extensions in filenames begin after the first dot
rename: function( dest, matchedPath, options ) {
Pathname = matchedPath.substring( 0, matchedPath.indexOf('/') );
Filename = matchedPath.replace( Pathname, '' );
//Return "Plugins / plugin_folder / min / file_name.min.js"
return options.cwd + Pathname + dest + Filename;
}
},
],
},
}