Grunt BrowserSync 和 SASS 手表

Question

我在使用 SASS 处理的监视任务设置 BrowserSync 时遇到一些问题。

当我执行时：

grunt

BrowserSync 服务器启动，我看到“Serving files from: ./ and Watching files。sass 从未编译过。就像两个任务都没有启动一样。

当我执行时：

grunt watch

sass 被监视并正确编译，但没有启动 BrowserSync 服务器。

module.exports = function(grunt) {

grunt.initConfig({
    watch: {
        files: 'components/css/scss/*.scss',
        tasks: ['sass']
    },

    sass: {                              // Task
        dist: {                            // Target
          options: {                       // Target options
            style: 'expanded'
          },
          files: {                         // Dictionary of files
            'components/css/screen.css' : 'components/css/scss/screen.scss'        // 'destination': 'source'
          }
        }
    },

    browserSync: {
        bsFiles: {
            src : ['components/css/*.css', '*.html']
        },
        options: {
            server: {
                baseDir: "./"
            },
            options: {
                watchTask: true
            }
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');

grunt.registerTask('default', ["browserSync", "watch"]);

};

Answer 1

这可能会修复错误：

    browserSync: {
        bsFiles: {
            src : ['components/css/*.css', '*.html']
        },
        options: {
            server: {
                baseDir: "./"
            },
            watchTask: true
        }
    }

watchTask 选项出错。