1

親愛なる友人である Chris Coyier のこのチュートリアルGruntfile.jsに従って、正しく imageminにインストールしました。それはコンパイルされますが、基本的に2つの問題、2つの奇妙な癖があります...

問題 1:

画像は 2 重または 3 重に作成されますが、これはgruntコマンド 1 つだけです。以下に、コマンド 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 を実行するとファイルとフォルダーが正しく作成されますが、2 回目には以前に縮小されたファイルもすべて取得され、再縮小が試行されることでした。

私の 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 に答える