1

我听说过“快速照明”Libsass。我从 Ruby 切换到 Grunt。但无论我使用哪种编译方法（Ruby、grunt-contrib-sass、grunt-sass），速度都是一样的。编译 bootstrap-scss 需要 15 秒。

grunt.js：

module.exports = function (grunt) {
    require('time-grunt')(grunt);

    grunt.initConfig({
        watch: {
            src: {
                files: ['public_html/sass/*.scss'],
                tasks: ['compass:dev']
            },
            options: {
                livereload: true
            }
        },
        compass: {
            dev: {
                options: {
                    config: 'config.rb'
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

配置.rb：

# Require any additional compass plugins here.
require 'bootstrap-sass'

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public_html/css"
sass_dir = "public_html/sass"
images_dir = "public_html/images"
javascripts_dir = "public_html/js"
fonts_dir = "public_html/fonts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# output_style = :expanded
environment = :development

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
line_comments = true

sourcemap = true
sass_options = {:sourcemap => true}

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
4

1 回答 1

0

通过您的配置，您仍在使用 Compass 编译您的 SCSS 文件，该grunt-sass任务既未配置也未运行。由于 Compass 是基于 Ruby 的并且仍在使用 Ruby SASS 预处理器，因此您没有看到编译时间的改进。

Libsass是 SASS 编译器的 C/C++ 实现，它完全摒弃了 Ruby。在这篇博文的评论中提到 Compass 有很多 Ruby 依赖，因此在可预见的将来不会移植到 Libsass。因此，如果您严重依赖 Compass 的 mixin 和函数，则必须坚持使用 Ruby 预处理器。

如果您可以取消 Compass，则可以使用grunt-sass以下配置：

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
        src: {
            files: ['public_html/sass/*.scss'],
            tasks: ['sass:dev']
        },
        options: {
            livereload: true
        }
    },
    sass: {
        options: {
            sourceMap: true,
            outputStyle: 'expanded'
        },
        dev: {
          files: [{
            expand: true,
            src: ['public_html/sass/**/*.{scss,sass}'],
            dest: 'public_html/css/'
          }]
        }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
}

查看grunt-sass 页面以获取有关可用选项的更多信息。

于 2015-01-16T15:56:01.637 回答