项目文件结构，当你有很多页面时如何减少指南针中的SASS编译时间？

Question

对于一个项目，我正在使用 SASS 3.2.19 和 Compass 0.12.5 以及 Grunt 的最新版本。

我的文件结构如下：

styles/
    css/
      page1.css
      page2.css
      page3.css
      ...
    sass/
      page1.scss
      page2.scss
      page3.scss
      ...
      generics/
         _general.scss
         _menu.scss
         _ie.scss
         ...
      partials/
         _sectionBegin.scss
         _sectionClients.scss
         ...

在每个 pages{number}.scss 文件中，我像这样导入我实际需要的 scss 块：

@import "generics/general"; // inside this file _ie.scss is imported
@import "generics/menu";
@import "partials/sectionBegins";
@import "partials/sectionClients";

.additionalStyles {
    background: url(/example/example-cover.jpg) no-repeat;
 }

最后，这是我的 Gruntfile.js ：

compass: {
     dev: {
        options: {
           sassDir: ['styles/sass'],
           cssDir: ['styles/css'],
           outputStyle: 'expanded',
           noLineComments: true,
           environment: 'development'
        }
     },
...
grunt.registerTask('default', ['compass:dev' , 'watch']);

所以，我在这里所做的是将 Grunt 设置为监视 sass/ 存储库。一旦它检测到一些变化，page.css 就会被覆盖。

好吧，当只有几页时，这个项目结构实际上工作得很好，但现在我有 40 多页，编译时间大约需要 1 分钟。 确实假设我编辑了一个所有页面都使用的 .scss 文件，所有页面都必须被覆盖。

那么，我在这里缺少什么？我怎样才能改进我的项目文件结构，在类似的场景中你有一些很好的 gruntfile conf 例子吗？

Answer 1

我们还有一个包含很多部分的 Sass 项目。我们还没有弄清楚在修改许多 .scss 文件使用的部分时该怎么做；确实没有办法避免编译所有这些（最终，当您部署时；有时您只在一个页面上工作，并且确实只需要在短期内编译一个页面）。您可以设置 grunt 任务来单独编译每个页面，这样当您只需要编译单个 .scss 文件时，您至少可以运行一些东西。

在您的情况下，最好的办法可能是在这里跳出框框思考...如果很多 .scss 文件不需要该部分内容怎么办？如果它只被导入到一个 main.scss 文件中，该文件编译成一个缩小的 main.css，该文件包含在项目的每个页面中（作为页面上的第一个脚本，因此它的样式将被任何更具体的页面样式覆盖)?我们有一个脚本，其中包含我们的通用样式，例如按钮、表单、面板......几乎每个页面上的东西，并且在没有表单或没有表单的页面上加载并不是太大的负担按钮，尤其是在缩小的情况下。

对于修改partial只需要提示编译几个Sass文件的情况，我们想出了一个使用Gruntfile的解决方案。您可以使用 grunt-contrib-watch 根据检测到更改的位置运行不同的任务。例如，我们为 grunt-contrib-sass 设置了以下 2 个任务：

sass: {
    dev_mainstyles: {
        options: {
            sourcemap: true,
            trace: true,
            style: 'expanded',
            compass: true,
            lineNumbers: true
        },
        files: {
            '...css/main.css': '...sass/main.scss',
        },
    },
    dev_customerstyles: {
        options: {
            sourcemap: true,
            trace: true,
            style: 'expanded',
            compass: true,
            lineNumbers: true
        },
        files: [{
            expand: true,
            cwd: '.../sass/',
            src: ['customers/**/*.scss'],
            dest: '.../css/',
            ext: '.css'
        }],
    },
}

我已经为 grunt-contrib-watch 设置了以下任务：

watch: {
    sassmain: {
        files: ['.../sass/*.scss'],
        tasks: ['sass:dev_mainstyles'],
    },
    sasscustomers: {
        files: ['.../sass/customers/**/*.scss'],
        tasks: ['sass:dev_customerstyles'],
    },
}

通过列出文件和目录，您可以获得所需的具体内容，并希望您能够设置监视任务，仅在发生变化时编译所需的内容！祝你好运！

我们仍在寻找有关如何使整个过程更快的建议，顺便说一下，这绝不是一个确定的答案，这只是我们迄今为止想出的一些技巧。