正文
gulp 配置前端项目打包
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
项目发布时，需要对项目js文件进行压缩，混淆，连接等操作以减小项目http请求，加快访问。
gulpjs.com中有很多插件可以用来配置打包部署。
需要用的常用插件有：
gulp-jsmin 压缩js
gulp-minify-css 压缩css
gulp-imagemin 压缩图片
gulp-rename 重命名
gulp-clean 清空文件夹
gulp-copy 拷贝引用库，字体等文件
gulp-replace 替换html内容（将原来.js引用改为.min.js引用）
前置过程不再赘述，安装插件：
npm install --save-dev gulp gulp-jsmin gulp-minify-css gulp-imagemin gulp-rename gulp-clean gulp-copy gulp-replace
const gulp = require('gulp'),
jsmin = require('gulp-jsmin'),
cssmin = require('gulp-minify-css'),
rename = require('gulp-rename'),
copy = require('gulp-copy'),
clean = require('gulp-clean'),
imagemin = require('gulp-imagemin'),
replace = require('gulp-replace'); // 清空文件夹
gulp.task('clean', () => {
gulp.src('dist')
.pipe(clean())
}) // js压缩
gulp.task('jsmin', () => {
gulp.src('js/*.js')
.pipe(jsmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/js'));
}); // css压缩
gulp.task('cssmin', () => {
gulp.src('css/*.css')
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/css'))
}); // 压缩图片
gulp.task('imagemin', () => {
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images/'))
}); // 复制文件
gulp.task('copy', () => {
gulp.src('lib/**/*')
.pipe(copy('dist'))
}); // 替换HTML中的js及css引用为.min引用
gulp.task('replace', () => {
gulp.src('index.html')
.pipe(replace(/js\/.*\./g, '$&min.'))
.pipe(replace(/css\/.*\./g, '$&min.'))
.pipe(gulp.dest('dist'))
}); // 部署任务
gulp.task('deploy', [
'clean',
'jsmin',
'cssmin',
'imagemin',
'copy',
'replace'
]);
以上，即可完成一套前端项目的打包。
