这是我的代码。我想为每个不同大小的文件设置不同的目标，只是为了让我的文件树更有条理。显然，我所做的并不起作用，我是否需要先将它们全部放在同一个文件夹中，然后以某种方式将它们移动到正确的文件中？如果是这样的话，你能告诉我如何去做吗？
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-responsive-images');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.initConfig({
uglify: {
js: {
src: 'assets/js/*.js',
dest: 'assets/min-files/main.min.js'
},
},
cssmin: {
dev: {
options: {
report: 'min'
},
src: 'assets/css/*.css',
dest: 'assets/min-files/main.min.css'
}
},
responsive_images: {
dev: {
options: {},
sizes: [{
name: 'small',
width:320,
height: 240,
suffix:'jpg',
dest: 'assets/images/main-page-bg/small'
},{
name: 'medium',
width: 640,
quality: 80,
suffix:'jpg',
dest: 'assets/images/main-page-bg/medium'
},{
name: 'large',
width: 1024,
quality: 80,
suffix:'jpg',
dest: 'assets/images/main-page-bg/large'
},{
name: 'retina',
width:1024,
quality: 100,
suffix:'jpg',
dest: 'assets/images/main-page-bg/retina'
}],
files: [{
expand: true,
src: '*.jpg',
//dest: 'assets/images/new/'
}]
}
},
});
};
答案 0 :(得分：2)
...我需要先将它们全部放在同一个文件夹中，然后以某种方式将它们移动到正确的文件中
有两种方法可以配置responsive_images任务，将结果文件定向到不同的目的地......
使用custom-dest属性，您可以按如下方式配置responsive_images任务：
module.exports = function(grunt) {
grunt.initConfig({
responsive_images: {
allImages: {
options: {
sizes: [{
name: 'small',
width: 320,
quality: 80
}, {
name: 'medium',
width: 640,
quality: 80
}, {
name: 'large',
width: 1024,
quality: 80
}, {
name: 'retina',
width: 2048,
quality: 80
}]
},
files: [{
expand: true,
cwd: './images',
src: '**/*.{jpg,png}',
custom_dest: 'assets/images/main-page-bg/{%= name %}/'
}]
}
}
});
grunt.loadNpmTasks('grunt-responsive-images')
grunt.registerTask('respImages', [
'responsive_images:allImages'
]);
};
grunt-responsive-images也可以配置为使用多个目标。
有关多目标的进一步文档，请参阅grunt文档中的multi-tasks和Task Configuration and Targets。
注意： 此选项显然比第一选项更详细，但是，它可以更好地控制您的配置选项等。
对于您的方案，您可以配置单独的目标，以便为您需要的每个输出目标文件夹包含dest路径。例如：
module.exports = function(grunt) {
grunt.initConfig({
responsive_images: {
small: { //<-- This is the Target for 'small' images
options: {
sizes: [{
name: 'small',
width: 320,
quality: 80
}]
},
files: [{
expand: true,
cwd: './images',
src: '**/*.{jpg,png}',
dest: 'assets/images/main-page-bg/small'
}]
},
medium: { //<-- This is the Target for 'medium' images
options: {
sizes: [{
name: 'medium',
width: 640,
quality: 80
}]
},
files: [{
expand: true,
cwd: './images',
src: '**/*.{jpg,png}',
dest: 'assets/images/main-page-bg/medium'
}]
},
large: { //<-- This is the Target for 'large' images
options: {
sizes: [{
name: 'large',
width: 1024,
quality: 80
}]
},
files: [{
expand: true,
cwd: './images',
src: '**/*.{jpg,png}',
dest: 'assets/images/main-page-bg/large'
}]
},
retina: { //<-- This is the Target for 'retina' images
options: {
sizes: [{
name: 'retina',
width: 2048,
quality: 80
}]
},
files: [{
expand: true,
cwd: './images',
src: '**/*.{jpg,png}',
dest: 'assets/images/main-page-bg/retina'
}]
}
}
});
grunt.loadNpmTasks('grunt-responsive-images')
grunt.registerTask('respImages', [
'responsive_images:small', // <-- Targets in a task are called using a colon separator.
'responsive_images:medium',
'responsive_images:large',
'responsive_images:retina'
]);
};
responsive_images 通过键入以下命令，可以通过CLI运行选项1和2的要点：
$ grunt respImages
根据每个目标中定义的options，这将输出多个图像文件（到不同的目标文件夹）。
目前，上面显示的两个选项都假设所有源图像都存储在项目目录顶层的名为 images 的文件夹中。根据您的目录设置， 可能 需要在files对象中重新配置（对于每个目标）。
我建议尝试上面演示的任一选项，相应地进行修改，然后选择最适合您要求的选项。