1

Grunt などの使用を含め、Visual Studio 2015 への更新を進めようとしています。

.scssファイルが変更されたときにGrunt にファイルを再コンパイルさせることはできますが、問題があります。私はテーマ設定に SASS を使用しており、私の CSS の多くは中央の_main.scss. 私が欲しいのは、そのファイルを編集するときに、theme-*.scssを含むすべてのファイルを再コンパイルする必要があることです_main.scss。

watch依存関係が変更されたときに物事を再コンパイルするように伝える方法やそのようなものはありますか? 依存関係を手動で指定しなければならない場合でも？

4

1 に答える 1

1

あるファイルから別のファイルへの依存関係をたどる方法があるかどうかはわかりませんが、.scssファイルの変更を監視してから、sass タスクを実行してテーマ ファイルを更新できます。

したがって、sass タスクは次のようになります。

    sass : {
        build: {
            files : {
                'path/to/compiled-foo.css': 'path/to/theme-foo.scss',
                'path/to/compiled-bar.css': 'path/to/theme-bar.scss',
                // Or more generally
                'path/to': 'path/to/theme-*.scss',
            }
        }
    },

そして、次のような監視タスク:

    watch : {
        themes: {
            files : [ 'path/to/_main.scss' ],
            tasks : [ 'sass' ],
            options : {
                // You may change these to better suit your needs
                spawn : false,
                interrupt: true,
                livereload: true
            },
        },
    },

これの欠点は、変更するたびにすべてのテーマがコンパイルされることです_main.scss. さまざまなテーマを監視する別のファイルがある場合は、内部にさらに多くのタスクを含めることができます (別のタスクを作成して呼び出すwatch代わりに(例:または)、そのテーマだけを再コンパイルします。themestheme_footheme_barsass:theme_foosass:theme_bar

grunt watch特定のタスクで実行することもできます: grunt watch theme_foo、これは更新されませんtheme_barが、theme_foo.

編集: をモジュール化して_main.scss、_foo.scss、_bar.scssおよび_common.scssにし、_common.scss変更がすべてのテーマに影響する_foo.scss場合と、 にのみ影響する場合に変更できtheme_fooます。このようにして、変更された場合にのみ監視_foo.scssおよび更新できます。theme_fooまたは変更時にすべてのテーマを更新します_common.scss。

編集 2 (コメントに基づく): blueとred
の 2 つのテーマがあるとします。2 つの sass タスク (テーマごとに 1 つ) があります。

    sass : {
        red: {
            files : {
                'path/to/compiled-red.css': 'path/to/theme-red.scss',
            }
        },
        blue: {
            files : {
                'path/to/compiled-blue.css': 'path/to/theme-blue.scss',
            }
        },
    },

現在、実行grunt sassすると両方のテーマが更新されます。ただし、実行grunt sass redすると、赤いテーマだけが更新されます。

必要なテーマだけをwatch更新するには、次の 2 つのタスクがあります。

    watch : {
        red: {
            files : [ 'path/to/theme-red.scss' ],
            tasks : [ 'sass:red' ],
            options : { /* ... */ },
        },

        blue: {
            files : [ 'path/to/theme-blue.scss' ],
            tasks : [ 'sass:blue' ],
            options : { /* ... */ },
        },
    },

red呼び出しに注意してくださいsass:red(そのテーマのタスクとそのテーマのみ)。blueを呼び出しても同じことが起こりsass:blueます。

変更時にすべてのテーマを更新するに_main.scssは、内部にもう 1 つのタスクを追加しますwatch。

    watch : {
        red: {
            files : [ 'path/to/theme-red.scss' ],
            tasks : [ 'sass:red' ],
            options : { /* ... */ },
        },

        blue: {
            files : [ 'path/to/theme-blue.scss' ],
            tasks : [ 'sass:blue' ],
            options : { /* ... */ },
        },

        all: {
            files : [ 'path/to/_main.scss' ],
            tasks : [ 'sass' ],
            options : { /* ... */ },
        },
    },

今all、あなたの を監視しています_main.scss。それが変更されると、 のすべてのタスクsassが実行されます (つまりsass:red、 とsass:blue)。

于 2015-08-10T17:30:14.337 に答える