使用sprockets-sass加速compass sass编译

Question

使用sprockets-sass加速compass sass编译

4

我正在处理一些大型项目，使用了compass（包括compass精灵工具）sass框架cli工具（compass watch、compass compile），来创建app.css文件。该项目的Sass使用多个@import语句来包含数十个Sass部分。

问题在于，每次对任何导入到app.scss文件中的Sass部分进行小更改后，app.css文件都需要编译超过2分钟（app.css有70000行），同时编译所有这些部分，而我只需要一行更改。

我进行了广泛的研究，并找到了像这篇文章http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import这样的文章，建议使用spockets代替@import来包含sass部分。我比较喜欢这种解决方案，但需要进行大量的重构，甚至测试它是否起作用，而且所有的全局包含，如mixin和变量，也需要包含在项目中使用的每个Sass部分中，这也不是理想的。

在进一步的研究后，我发现了这个https://github.com/petebrowne/sprockets-sass工具，应该可以将@imports自动转换为spockets require语句，以供编译器使用，并保留全局导入的功能。

问题是我不懂Ruby，也没有使用任何与Ruby相关的东西，除了“gem install”语句之外）

有人懂Ruby可以帮我一步一步地解释如何使compass编译器与sprockets-sass配合工作吗？

P.S请不要提出像libsass这样的解决方案，因为我已经测试过它，排除了所有与compass精灵相关的问题，但libsass编译40000行的剩余代码仍需要很长时间（我怀疑问题的一部分不在于编译速度，而在于系统需要创建400000行文件后所需的时间）。

- asmodianis

我尝试在我的gulp文件中使用https://github.com/petebrowne/sprockets-sass，像这样，但编译速度没有改变。 var gulp = require("gulp"); var compass = require('gulp-compass'); path = require('path');

gulp.task('compass', function() {
  gulp.src('./sass/*.scss')
    .pipe(compass({
      project: path.join(__dirname, './'),
      require: ["sprockets", "sprockets-sass", "sass", "compass"],
      css: 'cssOut',
      sass: 'sass',
      image: 'images'
    }))
    .pipe(gulp.dest('cssOut'));
});

- asmodianis

在执行此操作之前，我已经安装了sprockets-sass，方法如下：gem install sprockets-sass。看起来@import语句仍然具有与以前相同的性质，或者sprockets没有帮助加快编译速度。 - asmodianis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hitmands · Accepted Answer

1

你能做的唯一事情就是将输出的顶层文件（app.css）拆分成多个输出的顶层文件，并在compass编译结束时使用sprockets任务重新合并它们！这样可以优化sass缓存的使用，最终的合并任务也很有效，因为只是简单的连接操作！

顺便提一下，目前Compass已被Chris Eppstein（Compass的作者）开发的EyeGlass项目所替代。

因此，考虑使用(grunt/gulp)与libsass（一种用C/C++编写的Sass编译器）和EyeGlass进行整体重构，以添加所有类似于Compass的功能！

希望能有所帮助！

- Hitmands

我尝试将所有的局部文件编译成单独的CSS文件，但不幸的是，在项目中进行大规模重构之前是不可能的。局部文件使用了在app.scss中从上面导入的文件中的mixin，因此如果我尝试将其分别编译，它会失败。 - asmodianis

你应该在所有多个输出文件中使用共享的 partial，例如：_application-definition.scss 需要 _mymixins.scss 和 _myvariables.scssoutputfile1 需要 _application-definition.scss outputfile2 需要 _application-definition.scss - Hitmands

是的，你当然是正确的，但这样做我需要从每个部分文件中删除 _ 前缀，并且正如我所说，这些共享的 @imports 将需要移动到不止一个而是多个庞大的项目中，这是相当大的重构工作，不值得这样做。我怀疑我会获得允许以这种方式进行重构的权限。很可能当前项目将保持原样，未来的项目将使用 PostCSS 进行制作。我正在寻找的是较少痛苦的解决方案。虽然我开始怀疑是否有任何解决方案。 - asmodianis

小心使用PostCSS，它比Libsass更高效，因为PostCSS只是一个解析器，当你添加插件时，你会（当然）失去性能...对我来说，拥有高效的构建过程的最佳方法是：

使用EyeGlass和Libsass作为预处理器（混合、变量、文件系统访问）
仅将PostCSS用作EyeGlass/Libsass输出的优化器，例如添加自动前缀和分组媒体查询...

:) 但这只是我的观点！ - Hitmands