Grunt BrowserSync 和 SASS 手表

Question

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

当我执行时：

grunt

BrowserSync 服务器启动，我看到“服务文件来自：./ 和监视文件。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 选项有误。

Grunt BrowserSync 和 SASS 手表

Grunt BrowserSync and SASS watch

sass

gruntjs

browser-sync