|
|
var gulp = require("gulp");
|
|
|
var connect = require("gulp-connect");
|
|
|
|
|
|
var minifyHtml = require("gulp-minify-html"); //压缩html
|
|
|
|
|
|
var rename = require("gulp-rename"); //重命名
|
|
|
var minifyCss = require("gulp-minify-css"); //压缩CSS
|
|
|
var uglify = require('gulp-uglify');//压缩js
|
|
|
var autoprefixer = require("gulp-autoprefixer");
|
|
|
var scssToCss = require("gulp-sass")(require('sass')); //scss to css
|
|
|
|
|
|
var clean = require("gulp-clean");
|
|
|
|
|
|
var fileinclude = require("gulp-file-include");
|
|
|
|
|
|
|
|
|
var babel = require('gulp-babel');
|
|
|
|
|
|
const imagemin = require('gulp-imagemin');
|
|
|
// npm install gulp-imagemin @6.1.0
|
|
|
// 创建
|
|
|
gulp.task("connect", function () {
|
|
|
connect.server({
|
|
|
root: "dist", //根目录
|
|
|
livereload: true, //自动更新
|
|
|
port: 9909, //端口
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
gulp.task("fileinclude", function () {
|
|
|
// 适配page中所有文件夹下的所有html，排除src下的tpl文件夹中html
|
|
|
gulp
|
|
|
.src(["src/*.html", "!src/tpl/**.html"])
|
|
|
.pipe(
|
|
|
fileinclude({
|
|
|
prefix: "@@",
|
|
|
basepath: "@file",
|
|
|
})
|
|
|
)
|
|
|
.pipe(gulp.dest("dist"));
|
|
|
});
|
|
|
gulp.task("html", function () {
|
|
|
return gulp
|
|
|
.src("src/*.html")
|
|
|
.pipe(fileinclude()) //替换头部底部
|
|
|
.pipe(minifyHtml({quotes:true})) //执行压缩
|
|
|
.pipe(gulp.dest("dist"))
|
|
|
.pipe(connect.reload());
|
|
|
});
|
|
|
gulp.task("scss", function () {
|
|
|
return gulp
|
|
|
.src("src/static/scss/*.scss")
|
|
|
.pipe(scssToCss())//编译scss
|
|
|
.pipe(gulp.dest("src/static/css/"))
|
|
|
});
|
|
|
gulp.task("css", function () {
|
|
|
return gulp
|
|
|
.src("src/static/css/*.css")
|
|
|
.pipe(autoprefixer("last 15 version", "ie 8"))
|
|
|
.pipe(rename({ suffix: "" })) //rename压缩后的文件名
|
|
|
.pipe(minifyCss()) //执行压缩
|
|
|
.pipe(gulp.dest("dist/static/css/"))
|
|
|
.pipe(connect.reload()); //更新;
|
|
|
});
|
|
|
|
|
|
// 清空dist文件夹
|
|
|
gulp.task("clean", function () {
|
|
|
return gulp.src(["dist/*"]).pipe(clean());
|
|
|
});
|
|
|
|
|
|
gulp.task("watchs", function () {
|
|
|
gulp.watch("src/*.html", gulp.series("html"));
|
|
|
gulp.watch("src/tpl/*.html", gulp.series("html"));
|
|
|
gulp.watch("src/static/scss/*.scss", gulp.series(
|
|
|
"scss",
|
|
|
gulp.parallel("css")
|
|
|
));
|
|
|
gulp.watch("src/static/js/*.js", gulp.series("script"));
|
|
|
gulp.watch("gulpfile.js", gulp.series("default"));
|
|
|
});
|
|
|
|
|
|
|
|
|
// 定义JavaScript转译任务
|
|
|
gulp.task('script', () => {
|
|
|
return gulp.src('src/static/js/**/*.js') // 指定要转译的JavaScript文件夹
|
|
|
.pipe(babel({
|
|
|
presets: ['@babel/env'] // 使用Babel预设来转译ES6到ES5
|
|
|
}))
|
|
|
.pipe(uglify())
|
|
|
.pipe(gulp.dest('dist/static/js/')); // 输出转译后的文件到dist/static/js/文件夹
|
|
|
});
|
|
|
|
|
|
|
|
|
gulp.task("lib", function () {
|
|
|
return gulp
|
|
|
.src("src/static/lib/*.js")
|
|
|
.pipe(gulp.dest("dist/static/lib/"))
|
|
|
.pipe(connect.reload()); //更新;
|
|
|
});
|
|
|
|
|
|
gulp.task("img", function () {
|
|
|
return gulp
|
|
|
.src('src/static/img/*.{jpg,png}')
|
|
|
.pipe(imagemin())
|
|
|
.pipe(gulp.dest("dist/static/img/"))
|
|
|
.pipe(connect.reload()); //更新;
|
|
|
});
|
|
|
|
|
|
gulp.task(
|
|
|
"default",
|
|
|
gulp.series(
|
|
|
"clean",
|
|
|
"scss",
|
|
|
gulp.parallel("html","lib","script","img", "css"),
|
|
|
gulp.parallel("connect", "watchs")
|
|
|
)
|
|
|
);
|
|
|
|
|
|
gulp.task(
|
|
|
"build",
|
|
|
gulp.series(
|
|
|
"clean",
|
|
|
"scss",
|
|
|
gulp.parallel("html","lib","script","img", "css")
|
|
|
)
|
|
|
);
|