本文件基于以下两篇文章

gulp 安装及入门

gulp 监听sass文件修改，自动执行编译任务

 

Browser Sync 可以搭建简单的本地服务器并能实时刷新浏览器,  而且支持刷新多个设备

1、安装插件

npm install browser-sync --save-dev

2、引入插件

// 引入浏览器刷新插件
var browserSync = require('browser-sync');

3、创建浏览器刷新任务

gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir: 'app' // 指定项目文件夹
        }
    })
});

4、创建sass任务, 编译sass并刷新浏览器

gulp.task('sass', function() {
    gulp.task('sass', function(){
        return gulp.src('app/scss/style.scss') // 指定源文件
            .pipe(sass())  // sass 转为 css
            .pipe(gulp.dest('app/css')) // 指定输出目录

            .pipe(browserSync.reload({ // 每次修改sass文件 都刷新浏览器
                    stream: true
            }))
      });
});

5、创建watch任务, 监听scss文件变化, 在执行watch任务之前，先执行browserSync, sass

gulp.task('watch', ['browserSync', 'sass'], function (){
    gulp.watch('app/scss/**/*.scss', ['sass']);
});

6、

gulp watch

然后修改sass文件后，控制台打印如下日志，并自动刷新浏览器。