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，应该是混淆不了。

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

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