gulp压缩静态项目
现在不知道还有多少项目没用框架开发，虽然觉得应该是没有，但是保不齐还有很多，毕竟一些项目迭代的太多了，想要重构太花成本，就一直留存至今。
想想最开始入行的时候，项目目录结构是这样的：
那时候也没有什么压缩之说，就直接用运维给的可视化工具直接拖拉拽放到服务器，其实问题也不大。
今天本来想试试webpack压缩一下这种老项目，后来查了一下，发现gulp更快，于是就用gulp实现了。gulp以前没用过，所以出现了一些我自己都觉得可笑的问题，但其实，这种工具用多了就会熟练一些。
初始化：
npm init -y安装依赖：
npm i @babel/preset-env @babel/core gulp gulp-uglify gulp-htmlmin gulp-minify-css gulp-autoprefixer gulp-babel -D新建gulpfile.js:
let gulp = require("gulp");
let uglify = require("gulp-uglify");
let htmlmin = require("gulp-htmlmin");
let minifycss = require("gulp-minify-css");
let autoprefixer = require("gulp-autoprefixer");
let babel = require("gulp-babel");
//html压缩
function htmlHandler(entry, output) {
gulp
.src(entry)
.pipe(
htmlmin({
collapseWhitespace: true, //压缩HTML
removeComments: true, //清除HTML注释
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
minifyCSS: true,
minifyURLs: true,
minifyJS: true,
})
)
.pipe(gulp.dest(output))
}
// css压缩
function cssHandler(entry, output) {
gulp.src(entry).pipe(autoprefixer()).pipe(minifycss()).pipe(gulp.dest(output))
}
// js压缩混淆
function jsHandler(entry, output) {
gulp
.src(entry)
.pipe(
babel({
presets: ["@babel/env"],
})
)
.pipe(uglify())
.pipe(gulp.dest(output))
}
// build
gulp.task("build", (done) => {
htmlHandler('./html/*.html', 'dist/html/');
jsHandler('./js/*.js', 'dist/js/');
cssHandler('./css/*.css', 'dist/css/');
done();
})执行gulp build就可以了。
这边只是把压缩的写了出来，不做其他操作的，新建个函数直接输出：
gulp
.src(entry)
.pipe(gulp.dest(output))当然，gulp也有那些清除、拷贝之类的插件，只是没去找。
刚开始js压缩一直输出不了文件，也没有报错，如果出现这个问题，可以看看bable，这边是@babel/env，之前是@babel/preset-env。
本来还想能不能混淆js，是发现了个插件，但是都说用不了，感兴趣的大佬可以考虑写个gulp的js混淆插件。至于css和html，应该是混淆不了。
如果还是老项目的，可以考虑考虑自己压缩一下，当然，如果服务器有进行压缩，那就不用考虑了。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-10-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读