【问题标题】:grunt-contrib-imagemin - Take images of two different foldersgrunt-contrib-imagemin - 拍摄两个不同文件夹的图像
【发布时间】:2015-07-25 03:12:34
【问题描述】:

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

我有两个文件夹:

  1. 图片-用户
  2. 图片-产品。

我的想法是将 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']);

谢谢。

【问题讨论】:

  • 我想尝试类似这个塞巴斯蒂安的东西。你是怎么做的?
  • 我解决了这个问题。几分钟后,我会更新响应。

标签: javascript gruntjs grunt-contrib-imagemin


【解决方案1】:

我想把答案分成两部分。

第一部分:我尝试使用 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/"

        }]
    }
}

【讨论】:

  • 感谢塞巴斯蒂安。我一定会检查你链接到的 GM 包
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-06-09
  • 2014-12-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多