简体   繁体   中英

grunt-contrib-imagemin - Take images of two different folders

I'm trying to set that grunt-imagemin take images of two different folders.

I have two folders:

  1. Images-Users
  2. Images-Products.

My idea is to use grunt-imagemin with grunt-watch then avoid doing this task manually. I have a website with lots of traffic and when I do this manually, the CPU collapses. I think to do this while users are uploaded the images, may be better.

My gruntfile.js is:

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']);

Thanks.

I would like to separate the answer in two parts.

First-part: I tried with grunt-watch, grunt-newer and grunt-imagemin but I couldn't make it work. When someone upload an image, grunt-watch detects this event before that the image ends upload to the server. So, grunt-imagemin fails.

To resolve this problem, I used the gm package but if you use another language I am sure that there is a similar library.

Second-part: If you came to this post looking take pictures of different folders. I solved this problem very easy.

You try with this code:

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

        }]
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM