Gulp

案例1：

功能：browser-sync，监听sass，css，js，html文件

//导入工具包 require('node_modules里对应模块')
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var reload      = browserSync.reload;

//定义一个serve任务（自定义任务名称）
gulp.task('serve', ['sass','jsWatch'], function() {  //定义任务（任务名称，依赖任务名称，回调函数）

    browserSync.init({
        server: "./"   //静态服务器
    });

    gulp.watch('js/*.js', ['jsWatch']);//监听js文件
    gulp.watch("css/sass/*.scss", ['sass']);//监听scss文件
    gulp.watch("*.html").on('change', reload);//监听html文件，change就reload重载
});

// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src("css/sass/*.scss")//执行任务处理的文件路径
        .pipe(sass.sync().on('error', sass.logError))//编译出错时命令行打印错误，但不跳出gulp
        .pipe(gulp.dest("css/stylesheets"))//处理完成后文件生成路径
        .pipe(reload({stream: true}));
});

gulp.task('jsWatch',function(){
      gulp.src('js/*.js');
      .pipe(browserSync.stream());
})

gulp.task('default', ['serve']);//定义默认任务（命令行输入gulp即可）

案例2：

待补充！！

其他：

1.browser-sync默认打开根目录的index.html，需要打开指定页面，在地址栏输入localhost:3000/other.html

2.