目錄結(jié)構(gòu)
+--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, 自動(dòng)補(bǔ)全瀏覽器前綴;
gulp-sass, gulp-clean-css, gulp-autoprefixer
3.實(shí)時(shí)重載;
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())
// 瀏覽器前綴補(bǔ)全
.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)
})
執(zhí)行命令gulp server
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
