阅读 21

gulp压缩静态项目

现在不知道还有多少项目没用框架开发,虽然觉得应该是没有,但是保不齐还有很多,毕竟一些项目迭代的太多了,想要重构太花成本,就一直留存至今。

想想最开始入行的时候,项目目录结构是这样的:

图片1.png

那时候也没有什么压缩之说,就直接用运维给的可视化工具直接拖拉拽放到服务器,其实问题也不大。

今天本来想试试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个人笔记

文章分类
前端
文章标签