本文主要讲解4个方面：

1、gulp;
2、sass;
3、browser-sync;
4、es6转译es;

依赖的模块：

{
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.24.4",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-sass": "^4.0.1"
  }
}

gulp的配置方法：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var babel = require('gulp-babel');
var reload = browserSync.reload;

gulp.task('sass', function() {
    gulp.src('app/scss/index.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(reload({ stream:true }));
});
gulp.task('babel', () =>
    gulp.src('app/es6_js/*.js')
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(gulp.dest('app/js'))
);

// 监视 Sass 文件的改动，如果发生变更，运行 'sass' 任务，并且重载文件
gulp.task('serve', ['sass'], function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
     host: '0.0.0.0',
     port: 9909//端口
  });

   gulp.watch('app/scss/*.scss', ['sass']);
   gulp.watch('app/es6_js/*.js', ['babel']);
   gulp.watch(['*.html', 'css/**/*.css', 'js/**/*.js'], {cwd: 'app'}, reload);
});