grunt-contrib-imagemin - 拍摄两个不同文件夹的图像
grunt-contrib-imagemin - Take images of two different folders
我正在尝试设置 grunt-imagemin 拍摄两个不同文件夹的图像。
我有两个文件夹:
- 图片-用户
- 图片-产品。
我的想法是将 grunt-imagemin 与 grunt-watch 一起使用,然后避免手动执行此任务。
我有一个流量很大的网站,当我手动执行此操作时,CPU 崩溃了。
我认为在用户上传图片的同时执行此操作可能会更好。
我的gruntfile.js是:
grunt.initConfig({
uglify: {
files: {
src: 'client/js/views/*.js', // source files mask
dest: 'client/js/views/min/', // destination folder
expand: true, // allow dynamic building
flatten: true, // remove all unnecessary nesting
ext: '.js' // replace .js to .min.js
}
},
watch: {
js: { files: 'client/js/views/*.js', tasks: [ 'uglify' ] },
},
imagemin: {
dist: {
options: {
optimizationLevel: 7,
progressive: 5
},
files: [{
expand: true,
cwd: 'client/img/images-users',
src: '**/*.{gif,GIF,jpg,JPG,png,PNG}',
dest: 'client/img/images-users-compressed/'
}]
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-newer');
// register at least this one task
grunt.registerTask('default', ['watch']);
grunt.registerTask('resize', ['newer:imagemin']);
谢谢。
我想把答案分成两部分。
第一部分:我尝试使用 grunt-watch、grunt-newer 和 grunt-imagemin,但无法正常工作。
当有人上传图片时,grunt-watch 会在图片结束上传到服务器之前检测到此事件。所以,grunt-imagemin 失败了。
为了解决这个问题,我使用了 gm package 但如果你使用其他语言,我相信有一个类似的库。
第二部分:如果你来到这个post找不同的文件夹拍照。
我很轻松的解决了这个问题。
你试试这个代码:
imagemin: {
dynamic: {
options: {
optimizationLevel: 7,
progressive: true,
},
files: [{
expand: true,
cwd: "xx/img/your-path/",
src: "**/*.{gif,GIF,jpg,JPG,png,PNG}",
dest: "xx/img/your-path/compressed/"
}, {
expand: true,
cwd: "xx/img/other-path/",
src: "**/*.{gif,GIF,jpg,JPG,png,PNG}",
dest: "xx/img/other-path/compressed/"
}]
}
}
我正在尝试设置 grunt-imagemin 拍摄两个不同文件夹的图像。
我有两个文件夹:
- 图片-用户
- 图片-产品。
我的想法是将 grunt-imagemin 与 grunt-watch 一起使用,然后避免手动执行此任务。 我有一个流量很大的网站,当我手动执行此操作时,CPU 崩溃了。 我认为在用户上传图片的同时执行此操作可能会更好。
我的gruntfile.js是:
grunt.initConfig({
uglify: {
files: {
src: 'client/js/views/*.js', // source files mask
dest: 'client/js/views/min/', // destination folder
expand: true, // allow dynamic building
flatten: true, // remove all unnecessary nesting
ext: '.js' // replace .js to .min.js
}
},
watch: {
js: { files: 'client/js/views/*.js', tasks: [ 'uglify' ] },
},
imagemin: {
dist: {
options: {
optimizationLevel: 7,
progressive: 5
},
files: [{
expand: true,
cwd: 'client/img/images-users',
src: '**/*.{gif,GIF,jpg,JPG,png,PNG}',
dest: 'client/img/images-users-compressed/'
}]
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-newer');
// register at least this one task
grunt.registerTask('default', ['watch']);
grunt.registerTask('resize', ['newer:imagemin']);
谢谢。
我想把答案分成两部分。
第一部分:我尝试使用 grunt-watch、grunt-newer 和 grunt-imagemin,但无法正常工作。 当有人上传图片时,grunt-watch 会在图片结束上传到服务器之前检测到此事件。所以,grunt-imagemin 失败了。
为了解决这个问题,我使用了 gm package 但如果你使用其他语言,我相信有一个类似的库。
第二部分:如果你来到这个post找不同的文件夹拍照。 我很轻松的解决了这个问题。
你试试这个代码:
imagemin: {
dynamic: {
options: {
optimizationLevel: 7,
progressive: true,
},
files: [{
expand: true,
cwd: "xx/img/your-path/",
src: "**/*.{gif,GIF,jpg,JPG,png,PNG}",
dest: "xx/img/your-path/compressed/"
}, {
expand: true,
cwd: "xx/img/other-path/",
src: "**/*.{gif,GIF,jpg,JPG,png,PNG}",
dest: "xx/img/other-path/compressed/"
}]
}
}