本文主要讲解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);
});
