新建gulpfile.js文件
const gulp = require('gulp');
const babel = require('gulp-babel'); // 语法转换
const concat = require('gulp-concat'); // 合并
const uglify = require('gulp-uglify'); // js压缩
const sass = require('gulp-sass'); // scc编译
const htmlmin = require('gulp-htmlmin'); //html压缩
const watch = require('gulp-watch');// 监听文件
const connect = require('gulp-connect'); // 服务
const imagemin = require('gulp-imagemin'); // 图片压缩
const rev = require('gulp-rev');//对文件名加MD5后缀
const revCollector = require('gulp-rev-collector');//替换路径
const del = require('del');// 清空目录
const minifyCSS = require('gulp-minify-css'); //css压缩
// es6语法转换 js压缩 md5命名
gulp.task('js', async() => {
await gulp.src('./app/js/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('./dist/js'))
.pipe(rev.manifest('rev-js-manifest.json'))
.pipe(gulp.dest('./dist/rev'))
.pipe(connect.reload())
});
// scss编译成css
gulp.task("scss", async () => {
await gulp.src('./app/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./app/css'))
});
// scc合并压缩
gulp.task("css", async() => {
await gulp.src(['./app/css/index.css', './app/css/base.css'])
.pipe(concat('index.css'))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(rev())
.pipe(gulp.dest('./dist/css'))
.pipe(rev.manifest('rev-css-manifest.json'))
// .pipe(rev.manifest())
.pipe(gulp.dest('./dist/rev'))
.pipe(connect.reload())
})
// 压缩图片
gulp.task('img', async () => {
await gulp.src('./app/img/*')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'))
})
// html压缩
gulp.task('html', async() => {
await gulp.src('./app/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist/'))
.pipe(connect.reload())
});
gulp.task('clean', async() => {
await del(['dist/*']);
})
//服务
gulp.task('connect', function () {
connect.server({
root: "app",
port: 8080,
livereload: true,
});
});
//监视文件， 自动执行
gulp.task('myWatch', function(){
gulp.watch('./app/scss/*.scss', gulp.series('scss'))
gulp.watch('./app/css/*.css', gulp.series('css'))
gulp.watch('./app/js/*.js', gulp.series('js'))
gulp.watch('./app/index.html', gulp.series('html'))
gulp.watch('./app/img/*', gulp.series('img'))
})
//问题，修改引入文件打包之后单独执行一次
gulp.task('rev', async () => {
await gulp.src(['./dist/rev/*.json', './dist/*.html'])
.pipe(revCollector({replaceReved:true}))
.pipe(gulp.dest('./dist'));
})
//启动开发 gulp.series是顺序执行 gulp.parallel是同步执行
gulp.task('start', gulp.series(gulp.parallel('myWatch', 'connect')));
// 构建项目
gulp.task('dist',gulp.series('clean',gulp.parallel('html','scss', 'css', 'js', 'img')));
页面结构
html
var fileinclude = require('gulp-file-include'); gulp.task('file', function () { gulp.src('./*.html') .pipe(fileinclude({ prefix: '@@@', basepath: '@file' })) .pipe(gulp.dest('dist')); });
页面中
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
@@@include('./dd/header.html')
</header>
</body>
</html>