3

Grunt を使用して CSS をコンパスでコンパイルし、ブラウザの livereload をトリガーしています。これらは私の監視タスクです：

watch: {
    styles: {
        options: {
            spawn: false,
        },
        files: [assetsDir + '/**/*.scss', '!**/*.{dev,min}.scss'],
        tasks: [
            'concat:styles',
            'compass:styles',
            'imagemin:styles',
            'cssmin:styles',
            'clean:styles',
        ],
    },
    scripts: {
        options: {
            spawn: false,
        },
        files: [assetsDir + '/**/*.js', '!**/*.{dev,min}.js'],
        tasks: [
            'concat:scripts',
            'uglify:scripts',
        ],
    },
    livereload: {
        options: {
            livereload: true,
            spawn: false,
        },
        files: [assetsDir + '/**/*.{dev,min}.{css,js}'],
    },
},

現時点では、styles タスクが完全に完了するまで livereload タスクはトリガーされませんが、imagemin によってかなりの遅延が発生する可能性があります。私が本当に気にかけているのは、コンパスが終了するとすぐに準備が整う CSS だけです。

コンパスが完了するとすぐに livereload をトリガーし、他のタスクを続行できるようにするにはどうすればよいですか? CSS が変更されたときに imagemin をトリガーする以下の構成を試しましたが、機能していないようです。この imagemin では、何らかの理由でまったくトリガーされません。複数のタスクで同じファイルを監視することはできませんか?

watch: {
    styles: {
        options: {
            spawn: false,
        },
        files: [assetsDir + '/**/*.scss', '!**/*.{dev,min}.scss'],
        tasks: [
            'concat:styles',
            'compass:styles',
            'cssmin:styles',
            'clean:styles',
        ],
    },
    scripts: {
        options: {
            spawn: false,
        },
        files: [assetsDir + '/**/*.js', '!**/*.{dev,min}.js'],
        tasks: [
            'concat:scripts',
            'uglify:scripts',
        ],
    },
    images: {
        options: {
            spawn: false,
        },
        files: [assetsDir + '/**/*.{dev,min}.css'],
        tasks: [
            'imagemin:styles',
        ],
    },
    livereload: {
        options: {
            livereload: true,
            spawn: false,
        },
        files: [assetsDir + '/**/*.{dev,min}.{css,js}'],
    },
},

ありがとう。

4

1 に答える 1

5

grunt-concurrentを使用して 3 つの監視タスクを並行して実行することで、これを機能させることができました。

concurrent: {
    options: {
        logConcurrentOutput: true,
    },
    watch: [
        'watch:scripts',
        'watch:styles',
        'watch:livereload',
    ],
},
于 2013-08-12T16:09:33.910 に答える