目录结构
+--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
