//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'); //本地安装gulp所用到的地方
var sass = require('gulp-sass');

// 定义一个sass的任务
gulp.task('sass', function () {
  return gulp.src('dist/css/*.scss')   //该任务针对的文件
  .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));  //将会在dist/css下生成*.css
});

// 监听sass编译 自动执行sass任务，编译监听sass并生成css文件
gulp.task('sass:watch', function () {
    gulp.watch('dist/css/*.scss', ['sass']);
});

 //引入gulp插件browser-sync
 var browserSync = require('browser-sync').create();
// 静态服务器 + 监听 scss/html/js 文件
gulp.task('browser-sync', function() {
    browserSync.init({ //初始化项目跟目录为'./'
        server: {
            baseDir: "./"
        }
    });
    gulp.watch('*.html').on('change', browserSync.reload);            //监听html文件的变化，自动重新载入
    gulp.watch('dist/css/*.css').on('change', browserSync.reload);    //监听css文件的变化，自动重新载入
    gulp.watch('dist/js/*.js').on('change', browserSync.reload);      //监听js文件的变化，自动重新载入

});

//默认启动的gulp任务数组['browser-sync', 'sass:watch']
gulp.task('default', ['browser-sync', 'sass:watch']);输入代码