如何快速制作 grunt sass 预处理器和 livereload？

Question

我正在使用 SCSS 创建一个项目。我用 Yeoman 搭建了一个项目，到目前为止一切正常。现在 SCSS 预处理器和 livereload 非常慢。

这是我的Gruntfile.js观看任务：

watch: { 
    sass: {
        files: ['<%= yeoman.app %>/_/css/**/*.{scss,sass}'],
        tasks: ['sass:server']
    },
    livereload: {
        options: {livereload: true},
        files: [
            '<%= yeoman.app %>/_/css/**/*.css',
            '<%= yeoman.app %>/_/css/*.css',
            '<%= yeoman.app %>/_/js/**/*',
            '<%= yeoman.app %>/script/*.js',
            '<%= yeoman.app %>/_/img/**/*',
            '<%= yeoman.app %>/*.php',
            '<%= yeoman.app %>/**/*.php'
        ]
    }
}

这是我的手表sass任务：

sass: {
    server: {
        options: {
            sourcemap: true,
            debugInfo: true,
            lineNumbers: true,
            style: 'expanded'
        },
        files : [{
            expand: true,
            cwd: '<%= yeoman.app %>/_/css',
            src: '**/*.scss',
            dest: '<%= yeoman.app %>/_/css',
            ext: '.css'
        }]
    },
    dist: {
        ...
    }
},

我有 main.scss 文件，其中包含我的大部分 css。我试图制作另一个较小的 .scss 文件，认为较小的文件加载速度可能更快。它几乎立即进行了预处理，但仅在 main.scss 处理为 main.css.

后才重新加载页面

我的问题是：

我应该如何安排我的 Gruntfile.js 以使 livereload 更快？
当smaller-file.scss被预处理并保存到磁盘为smaller-file.css时，为什么没有启动livereload？
如何使我的 sass.server 函数只处理被编辑的文件，而不是源中设置的所有文件？

Answer 1

实际上，这根本不是关于 Gruntfile.js 的。我在我的 main.scss 之上导入了整个 bootstrap，所以显然预处理它需要很多时间。

@import "../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

现在我只是抓住bootstrap我真正需要的部分。

如何快速制作 grunt sass 预处理器和 livereload？

How to make grunt sass preprocessor and livereload fast?

sass

gruntjs

livereload