grunt-contrib-imagemin - 拍摄两个不同文件夹的图像

时间:2015-07-25 03:12:34

标签: javascript gruntjs grunt-contrib-imagemin

我正在尝试将grunt-imagemin设置为两个不同文件夹的图像。

我有两个文件夹:

  1. 图片-用户
  2. 图片 - 产品。
  3. 我的想法是使用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']);
    

    感谢。

1 个答案:

答案 0 :(得分:3)

我想将答案分为两部分。

第一部分:我尝试使用grunt-watch,grunt-newer和grunt-imagemin,但我无法使其正常工作。 当有人上传图像时,grunt-watch会在图像结束上传到服务器之前检测到此事件。所以,grunt-imagemin失败了。

要解决此问题,我使用了gm package,但如果您使用其他语言,我确信有类似的库。

第二部分:如果你来这个帖子看不同文件夹的照片。 我很容易解决这个问题。

您尝试使用此代码:

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/"

        }]
    }
}