所以我不是最精通的人,但这使我陷入了困境。当我运行grunt响应式图像任务时,该任务运行良好,但没有输出任何内容到我的目标文件夹...
这是错误部分:
这是文件夹树:
我的Gruntfile.js中还有其他任务正在运行,因此响应_images任务就是这样。
完整代码
/**
* gruntfile.js
*
* original code from jeff1evesque @ https://gist.github.com/jeff1evesque/b98560d6c4d9914049f9
* modified as needed
*/
module.exports = function (grunt) {
grunt.initConfig({
// Watch task configuration
watch: {
css: {
files: 'src/scss/*.scss',
tasks: ['sass'],
},
js: {
files: 'src/js/*.js',
tasks: ['uglify'],
},
img: {
files: 'src/img/*.{png,jpg,gif}',
tasks: ['responsive_images', 'imagemin'],
},
html: {
files: 'src/*.html',
tasks: ['htmlmin'],
}
},
// Sass task configuration
sass: {
dist: {
files: [{
expand: true, // enable dynamic expansion
cwd: 'src/scss/',
src: ['**/*.scss'],
dest: 'dist/public/css/',
ext: '.min.css', // dest filepaths will have this extension
extDot: 'first', // extensions in filenames begin after the first dot
}],
options: {
style: 'compressed'
},
},
},
// Uglify task configuration
uglify: {
my_target: {
files: [{
expand: true, // enable dynamic expansion
cwd: 'src/js/',
src: ['**/*.js'],
dest: 'dist/public/js/',
ext: '.min.js', // dest filepaths will have this extension
extDot: 'last', // extensions in filenames begin after the last dot
}],
},
},
// Resize and save all images
responsive_images: {
dev: {
options: {
engine: 'gm',
sizes: [{
name: '320',
quality: 100,
width: 320
},{
name: '440',
quality: 100,
width: 440
},{
name: '680',
quality: 100,
width: 680
},{
name: '1024',
quality: 100,
width: 1024
},{
name: '1200',
quality: 100,
width: 1200
}]
},
files: [{
expand: true,
cwd: 'src/img/',
src: ['*.{jpg,gif,png}'],
dest: 'dist/public/img/',
}]
}
},
// Copy images to new destination
// copy: {
// dev: {
// files: [{
// expand: true,
// src: ['**/*'],
// cwd: 'src/img',
// dest: 'dist/public/img'
// }]
// }
// },
// Imagemin task configuration
imagemin: {
dynamic: {
files: [{
expand: true, // enable dynamic expansion
cwd: 'src/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/public/img/',
}],
},
},
//Htmlmin task configuration
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand : true,
cwd : 'src',
src : '**/*.html',
dest : 'dist/public'
}]
},
// dev: {
// files: [{
// expand: true,
// cwd: 'app',
// src: ['src/**/*.html', '*.html'],
// dest: 'dist/'
// }]
// },
},
});
// Load Plug-ins
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
// grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-responsive-images');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// Register Tasks: used as commands
grunt.registerTask('build-sass', ['sass', 'watch']);
grunt.registerTask('build-uglify', ['uglify', 'watch']);
grunt.registerTask('build-img', ['responsive_images']);
// grunt.registerTask('build-copy', ['copy', 'watch']);
grunt.registerTask('build-imagemin', ['imagemin']);
grunt.registerTask('build-htmlmin', ['htmlmin', 'watch']);
grunt.registerTask('default', ['sass', 'uglify', 'responsive_images','imagemin', 'htmlmin', 'watch']);
};
这只是response_images任务
module.exports = function (grunt) {
grunt.initConfig({
// Watch task configuration
watch: {
img: {
files: 'src/img/*.{png,jpg,gif}',
tasks: ['responsive_images'],
}
},
// Resize and save all images
responsive_images: {
dev: {
options: {
engine: 'gm',
sizes: [{
name: '320',
quality: 100,
width: 320
},{
name: '440',
quality: 100,
width: 440
},{
name: '680',
quality: 100,
width: 680
},{
name: '1024',
quality: 100,
width: 1024
},{
name: '1200',
quality: 100,
width: 1200
}]
},
files: [{
expand: true,
cwd: 'src/img/',
src: ['*.{jpg,gif,png}'],
dest: 'dist/public/img/',
}]
}
}
});
// Load Plug-ins
grunt.loadNpmTasks('grunt-responsive-images');
// Register Tasks: used as commands
grunt.registerTask('build-img', ['responsive_images']);
grunt.registerTask('default', ['responsive_images', 'watch']);
};
我已经检查了package.json和package-lock.json,一切似乎都按顺序进行,包括版本控制。
Grunt 1.0.3版 grunt-response-images v.1.10.1 GraphicsMagick v.1.3.31 操作系统Windows 10
请谢谢。