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
         ...

在每个页面{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 / repository。一旦检测到某些更改，page.css就会被覆盖。

嗯，当只有几页时，这个项目结构实际上是完美的，但是现在我有超过40页，编译时间大约需要1分钟。实际上我认为我编辑了所有页面使用的.scss文件，所有页面都必须被覆盖。

那么，我在这里缺少什么？如何改进我的项目文件结构，你是否在类似场景中有一些gruntfile conf的好例子？

Answer 1

我们还有一个Sass项目，其中有很多部分内容。我们还没有想出在修改很多.scss文件使用的部分时该怎么做;真的没有办法绕过必须编译所有这些（最终，当你部署时;有时你只在一个页面上工作而且真的只需要一个在短期内编译）。您可以设置grunt任务来单独编译每个页面，这样当您只需要编译单个.scss文件时，至少可以运行一些东西。

在你的情况下做的最好的事情可能是在这里开箱即思考......如果很多.scss文件不需要那个部分怎么办？如果它只被导入到一个main.scss文件中，该文件被编译成项目的每个页面上包含的缩小的main.css（作为页面上的第一个脚本，因此其样式将被任何更具体的页面样式覆盖）？我们有一个脚本，其中包括我们的通用样式，例如按钮，表单，面板......几乎每个页面都有的东西，并且在没有表单或者没有表单的页面上加载的负担不会太大按钮，特别是如果缩小了。

对于仅修改部分需要提示编译几个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'],
    },
}

通过列出文件和目录，您可以根据需要获得特定的文件和目录，并希望您能够设置只在需要更改时才编译所需内容的监视任务！祝你好运！

我们仍然在寻找关于如何更快地完成整个过程的建议，顺便说一下，这绝不是一个明确的答案，它只是我们到目前为止已经想到的一些技巧。

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

1 个答案: