Question

我正在努力完成Visual Studio 2015的更新，包括使用Grunt等。

我可以让Grunt在更改时重新编译.scss个文件，但我遇到了问题。我使用SASS进行主题化，而我的很多CSS都在中心_main.scss。我想要的是当我编辑该文件时，它应该重新编译包含theme-*.scss的所有_main.scss文件。

有没有办法告诉watch或类似的东西在依赖关系发生变化时重新编译？即使我必须手动指定依赖项？

Answer 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内有更多的任务（而不是themes你可以让theme_foo和theme_bar调用不同的任务（例如： sass:theme_foo或sass: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 （根据评论）：
假设我们有两个主题，蓝色和红色。我们将有两个sass任务（每个主题一个）：

    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更新为所需主题，您将完成两项任务：

    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的{{1}}也是如此。

要在sass:blue更改时更新每个主题，请在_main.scss中再添加一个任务：

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）。

如何让Grunt重新编译相关的SASS文件？

1 个答案: