0

これは Grunt で Compass を使用する方法に関する質問です。データ入力ステップで何かがうまくいかない。コンソールで、.scss ファイルのみを変更すると、コンパスが同じファイルを数回 (4 回、5 回、または最大 10 回) いっぱいにすることに気付きました。あなたの意見では、それは何に依存していますか? これが私の gruntfile.js です。ご親切にありがとうございました。

module.exports = function (grunt) {

var _homeJs = ['contents/js/jquery.Cinema.js', 'contents/js/jquery.SkinOverlay.js'];
var _homeJsExclude = []

_homeJs.forEach(function (entry) {
    _homeJsExclude.push('!' + entry)
});


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

    concat: {
        dist: {
            src: ['contents/js/*.js', _homeJsExclude],
            dest: 'contents/dist/js/global.js'
        },
        lib: {
            src: 'contents/plugins/**/*.js',
            dest: 'contents/dist/js/libs.js'
        },
        globalhome: {
            files: {
                'contents/dist/js/global.home.js': _homeJs
            }
        }
    },
    uglify: {
        dist: {
            src: ['<%= concat.dist.dest %>'],
            dest: 'contents/dist/js/global.min.js'
        },
        globalhome_min: {
            src: 'contents/dist/js/global.home.js',
            dest: 'contents/dist/js/global.home.min.js'
        },
        lib: {
            src: ['<%= concat.lib.dest %>'],
            dest: 'contents/dist/js/libs.min.js'
        }
    },
    compass: {
        dist: {
            options: {
                sassDir: 'contents/sass/',
                cssDir: 'contents/dist/css',
                watch: true,
                outputStyle: 'compressed',
                linecomments: false
            }
        }
    },
    cssmin: {
        target: {
            files: [
                {
                    './contents/dist/css/ie-css/ie8/ie8.min.css': ['./contents/css/ie-css/ie8/ie8.css']
                },
                {
                    './contents/dist/css/main.min.css': ['./contents/dist/css/main.css']
                },
                {
                    './contents/dist/css/responsive.min.css': ['./contents/dist/css/responsive.css']
                }
            ]
        }
    },
    concurrent: {
        target: {
            tasks: ['compass', 'watch'],
            options: {
                logConcurrentOutput: true
            }
        }
    },
    watch: {
        js: {
            files: ['contents/js/*.js', 'contents/plugins/**/*.js'],
            tasks: ['concat', 'uglify:dist', 'uglify:globalhome_min'],
            options: {
                reload: true
            }
        },
        css: {
            files: ['contents/sass/**/*.scss', 'contents/dist/css/'],
            tasks: ['concurrent:target'], 
            options: {
                reload: true
            }
        }
    },
});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);

};

4

1 に答える 1

0

ここにはいくつかの問題があります...まず、watchsass ファイルをcompass既にタスクに入れています。明示的なタスクでそれらを監視する必要はありませんwatch。さらに、sass ファイルが変更されると、concurrentタスクがwatch再度実行されるように設定されます。

これは、今設定したロジック フローです。

  1. Start watch、sassまたはコンパイルされたcssファイルが変更されるのを待ちます
  2. sass ファイルが変更されると、watchが実行concurrentされ、次に が実行されcompass、次にの別のインスタンスがwatch実行されます。
  3. compassタスクは CSS をコンパイルします。これにより、タスクwatchは変更を検出し、concurrentタスクを再度実行します。
  4. これが続き、すべてが台無しになります。

したがって、現在持っているものの代わりに、この (簡略化された) 構成を使用してください。

grunt.initConfig({
    // ...

    compass: {
        dist: {
            options: {
                sassDir: 'contents/sass/',
                cssDir: 'contents/dist/css',

                // *** remove this option
                // watch: true,

                outputStyle: 'compressed',
                linecomments: false
            }
        }
    },
    // ...

    // *** remove this whole task, in the current config you do not need it
    /*
    concurrent: {
        target: {
            tasks: ['compass', 'watch'],
            options: {
                logConcurrentOutput: true
            }
        }
    },
    */
    watch: {
        // ...

        css: {
            // *** only watch the source files, not the output
            files: ['contents/sass/**/*.scss'],
            // *** run the `compass` task directly
            tasks: ['compass'], 
            options: {
                reload: true
            }
        }
    }
});

あなたはすべてを開始します：

~/my-project$ grunt watch

または、最初にコンパスを実行する場合は、変更を監視します。

~/my-project$ grunt compass watch
于 2015-01-28T16:01:59.040 に答える