1

我按照我们亲爱的朋友 Chris Coyier 的教程Gruntfile.js正确安装了 imagemin 。它可以编译，但我有两个奇怪的怪癖，基本上是两个问题......

问题一：

图像被创建双倍或三倍，这仅使用一个grunt命令。下面你可以看到命令 grunt 之后创建的文件结构。想象一下，如果watch经常这样做！我需要一个解决方案，因为如果可能的话，我希望这个功能是自动的，有什么帮助吗？

在此处输入图像描述

问题 2：

图像正确缩小，但我总是收到图像为空的错误，如下所示。有趣的是，那个图像已经被制作出来了。我想如果第一个问题得到解决，这个问题很可能会得到解决。在终端输出下方。

终端输出：

Running "imagemin:dynamic" (imagemin) task
✔ images/245x600.gif (saved 1.22 kB)
✔ images/300x500.gif (saved 1.38 kB)
✔ images/310x600.gif (saved 1.46 kB)
✔ images/400x600.gif (saved 1.85 kB)
✔ images/660x342.gif (saved 2.54 kB)
✔ images/940x487.gif (saved 3.69 kB)
✔ images/960x410.gif (saved 3.67 kB)
✔ images/build/build/245x600.gif (saved 1.22 kB)
✔ images/build/build/300x500.gif (saved 1.38 kB)

Warning: gifsicle: images/build/245x600.gif: empty file

这里问的是我的 Gruntfile.js 配置：

module.exports = function(grunt) {

    // 1. All configuration goes here
    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        // 2. Configuration for concatinating files goes here.

        // Concatonate various files into one
        concat: {
            dist: {
                src: [
                    'js/vendor/*.js', // All JS in the libs folder
                    'js/plugin.js', // All JS in the libs folder
                    'js/global.js'  // This specific file
                ],
                dest: 'js/build/production.js',
            }
        },

        // Creates a minified version of the javascript files of the project
        uglify: {
            build: {
                src: ['js/vendor/*.js', 'js/plugin.js', 'js/global.js'],
                dest: 'js/build/production.min.js'
            }
        },

         // Minifies automatically the images of the project
        // imagemin: {
        //     dynamic: {
        //         files: [{
        //             expand: true,
        //             cwd: 'images/',
        //             src: ['**/*.{png,jpg,gif}'],
        //             dest: 'images/build/'
        //         }]
        //     }
        // },

        // Watches for changes done on the project and builds the commands if neccesary
        watch: {

             options: {
                livereload: true,
            },

            scripts: {
                files: ['js/*.js'],
                tasks: ['concat', 'uglify'],
                options: {
                    spawn: false,
                },
            },

            sass: {
                dist: {
                    options: {
                        style: 'compressed'
                    },
                    files: {
                        'css/build/style.css': 'sass/style.scss'
                    }
                }
            },

            css: {
                files: ['css/*.scss'],
                tasks: ['sass'],
                options: {
                    spawn: false,
                }
            }
        }

    });

    // 3. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat', 'uglify', 'sass', 'compass', 'watch']);
4

2 回答 2

1

这是旧的，但我有同样的问题并想通了。问题是，第一次运行 grunt 会正确创建文件和文件夹，但第二次它会抓取所有以前缩小的文件并尝试重新缩小。

我的 Gruntfile.js 的 imagemin 部分现在看起来像这样：

imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'img/',
                src: ['*.{png,jpg,gif}'],
                dest: 'img/build'
            }]
        }
    },

我相信 cwd 是您添加源目录的位置，而您的 src 是相对的。所以我只用 * 替换了 **/*。这样，grunt 只会在我的 img 目录中查找图像，而不是进入子目录。

于 2015-12-08T16:11:55.630 回答
0

感谢您发布 Grunt 文件，我现在看到了您的问题……您正在将缩小的图像放回您用作源的文件夹中。因此该过程从images目录中获取一个图像文件，将其缩小，然后将缩小版本放入images文件夹中......然后该过程重复，因此它尝试缩小已经缩小的文件。相反，只需将缩小版本放入不同的文件夹：

imagemin: {
    dynamic: {
        files: [{
            expand: true,
            cwd: 'images/',
            src: ['**/*.{png,jpg,gif}'],
            dest: 'build/imagemin' // <-- don't make the destination the same as src!
        }]
    }
},
于 2014-02-05T14:33:19.577 回答