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, //压缩HTMLremoveComments: 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，应该是混淆不了。

如果还是老项目的，可以考虑考虑自己压缩一下，当然，如果服务器有进行压缩，那就不用考虑了。

欢迎订阅订阅号：coding个人笔记

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！