1

我正在尝试完成对 Visual Studio 2015 的更新，包括使用 Grunt 等。

当文件发生变化时，我可以让 Grunt 重新编译.scss文件，但我遇到了问题。我使用 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（而不是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调用也会发生同样的情况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和sass:blue）。

于 2015-08-10T17:30:14.337 回答