gulp编译sass,es6,实现压缩和实时重载

目录结构

+--node_modules
+--public
|  +--css
|  +--sass
   |  +--index.scss
|  +--es6
   |  +--index.js
|  +--js
+--index.html
+--gulpfile.js
+--package.json

插件

1.用于编译es6, 压缩js;
  gulp-babel,  @babel/preset-env,  @babel/core,  gulp-uglify
2.用于编译sass, 压缩css,  自动补全浏览器前缀;
  gulp-sass,  gulp-clean-css,  gulp-autoprefixer
3.实时重载;
  browser-sync

gulpfile.js配置

var gulp = require("gulp"), 
    sass = require("gulp-sass"),   
    browserSync = require("browser-sync"),    
    autoprefixer = require("gulp-autoprefixer"),    
    babel = require("gulp-babel"),    
    uglify = require("gulp-uglify"),  
    minifyCss = require("gulp-clean-css"),    
    reload = browserSync.reload;
//sass编译
gulp.task("sass", function() {    
  gulp.src("public/sass/*.scss")    
  .pipe(sass())    
  // 浏览器前缀补全    
  .pipe(autoprefixer({
    browsers: ["last 3 versions"],
    cascade: false
  }))
  // css压缩
  .pipe(minifyCss({
    keepSpecialComments: "*"
  }))
  .pipe(gulp.dest("public/css"))
  .pipe(reload({stream: true}))
})
//es6编译
gulp.task("es6", function() {
  gulp.src("public/es6/*.js")
  .pipe(babel({
  //# Babel 7
  //npm install --save-dev gulp-babel @babel/core @babel/preset-env
  //# Babel 6
  //npm install --save-dev gulp-babel@7 babel-core babel-preset-env
    presets: ['@babel/env']
  }))
  //js压缩
  .pipe(uglify())
  .pipe(gulp.dest("public/js"))
})
gulp.task("server", ["sass", "es6"], function() {
  browserSync({
    server: {
      baseDir: "public"
    }
  })
  gulp.watch("public/sass/*.scss", ["sass"])
  gulp.watch("public/es6/*.js", ["es6"])
  gulp.watch("**/*.*", {cwd: "public"}, reload)
})

执行命令gulp server