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: {
    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更快？
当small-file.scss被预处理并以较小的file.css保存到磁盘时，为什么没有启动livereload？
如何制作我的sass.server函数，使其只处理编辑过的文件，而不是源文件中设置的所有文件？

Answer 1

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

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

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

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

1 个答案: