用gulp实现传统的多页面自动化构建,一句命令行完成混淆压缩

工作的项目,摄像头的设置页面,要求整站大小只能在100k作用,也就是说vue之类的框架,jquery库这些最好不要用,我们就用js原生语言写,并且每次写完要整站都要压缩混淆再上传,考虑到浏览器文件缓存,最好文件名都带上hash版本号。

打包这一块用哪个好呢?使用在线网站压缩?每一次,这么多个文件的代码,要一个个文件粘贴过去,再把结果复制回来,需求一改又要重来一次,太麻烦了吧。使用webpack?webpack确实是当下最火的打包工具,但在传统的多页面中用webpack配置并不是很合适,它擅长于模块化,配置文件又得写一大堆,而我们只是想用最简单的方式实现,gulp在这里成为最佳选择

gulp是基于 Node.js 构建的,利用 Node.js 流的威力,首先打开命令行工具node -v 看看有没有返回一个版本号,没有请先安装node

再安装gulp命令行工具

npm install -g gulp-cli

切换到项目目录下

cd myproject 

生成package.json文件在项目目录下创建 package.json 文件

npm init

命令将指引你设置项目名、版本、描述信息等

安装gulp,作为开发时依赖项

npm install --save-dev gulp

检查 gulp 是否安装成功,成功会返回一个版本号

gulp --version

好的,接下来在根目录下创建 gulpfile.js的文件,也就是gulp的配置文件
gulp有个很重要的概念叫任务,你可以把每个任务根据功能的不同分开写在一个函数里,可以指定任务的先后顺序,最后再组装到一块,
详细参考官网文档
https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/


另外比较重要的一个点是要安装插件,不同的插件实现不同的功能,比如说gulp-htmlmin是用来压缩html的,gulp-uglify压缩混淆js的,类似于webpack里loader

npm install -D gulp-uglify gulp-htmlmin gulp-minify-css gulp-rev gulp-rev-collector gulp-clean

gulpfile.js的配置内容

const { src, dest, series, watch } = require('gulp');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin')
const minifyCSS = require('gulp-minify-css');
const rev = require('gulp-rev'); //对文件名加MD5后缀
const revCollector = require('gulp-rev-collector'); //路径替换
const clean = require('gulp-clean');
const entry = "src/" //要处理的源码文件夹
const dist = 'dist/'; //被处理后的文件保存的目录

//清除文件夹里之前的内容
function cleanBefore() {
    return src(dist, { read: false })
        .pipe(clean());
}

//html压缩
function minifyHtml() {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input/>
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id=""/> 
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    return src(entry + '*.html')
        .pipe(htmlmin(options))
        .pipe(dest(dist));
}
function minifyCss() {
    return src(entry + 'img/*.css')
        .pipe(minifyCSS()) //压缩css到一样
        .pipe(dest(dist+'img/')); //输出到css目录
}

function minifyJs() {
    return src(entry + '*.js')
        .pipe(uglify()) //压缩js到一行
        .pipe(rev()) //文件名加MD5后缀
        .pipe(dest(dist+'js/')) //输出到js目录
        .pipe(rev.manifest('rev-js-manifest.json')) ////生成一个rev-manifest.json
        .pipe(dest('rev')); //将 rev-js-manifest.json 保存到 rev 目录内
}
function movePic() {
    return src(entry + 'img/*').pipe(rev()).pipe(dest(dist + 'img/')).pipe(rev.manifest('rev-img-manifest.json')) ////生成一个rev-manifest.json
        .pipe(dest('rev')); //将 rev-img-manifest.json 保存到 rev 目录内;
}


//使用rev-collect将在html引入的资源路径也替换成md5文件名
function srcReplace() {
    //html,针对js,css,img
    return src(['rev/*.json', dist+'*.html'])
        .pipe(revCollector({replaceReved:true }))
        .pipe(dest(dist));
};

exports.default = series(cleanBefore, minifyHtml, minifyCss, minifyJs, movePic,srcReplace); //组合任务

最后在命令行里执行gulp xxxx(exports的任务名字,比如导出时使用exports.mybuild,xxxx就是mybuild),如果是用exports.default导出任务直接gulp,执行完成后直接在dist目录里看到压缩好的文件啦

原文链接:segmentfault.com

上一篇:vuepress 文档部署到 github-pages
下一篇:前端小杂记 - 基于 NextJS 的网站构建、优化与发布

相关推荐

  • (详解)从浏览器输入 URL 到页面展示过程

    引言 对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

    3 个月前
  • 高德地图+vue实现页面点击绘制多边形及多边形切割拆分

    最终效果 (/public/upload/7732e1e729bfcd99f99f56cd04ac17b1) 技术栈 项目中使用到的技术 高德基于vue的vueamap,组件使用的elemen...

    2 个月前
  • 项目中的导航栏搜索及搜索页面的思路

    项目背景 今天项目里的实习生在做搜索功能时,导航栏的搜索框与搜索页面的搜索框,在内容上竟然是各自独立的。。。。。 无论他怎么鼓捣,在搜索栏上进行搜索,搜索页面都没有任何反应。

    2 个月前
  • 页面间通信--使用storage事件保持多tab页共享轮询请求的数据

    业务场景 最近接到一个优化需求,某页面会轮询请求两个接口获取未读消息的数量,但是当用户同时在多个tab打开了页面的话,这些页面都会进行轮询请求,有用户打开tab页太多,1分钟请求了几千次,触发了风控,...

    2 个月前
  • 页面进入后台如何关闭背景音乐

    之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然...

    1 年前
  • 页面跳转的归纳

    前端工作有很多地方需要页面跳转,有很多种实现方法,这里做一下归纳。 HTML标签 一般形式上可以用target="blank": 历史跳转 ...

    2 年前
  • 页面跳转时,点击上报丢失问题解析

    背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问题的发生。

    2 年前
  • 页面跳转中的安全问题

    最近参与了一小部分安全排查,涉及到一些前端编码安全问题,记个小tip。 1.Http请求头中的Referer 0a2b525c5fc64af362821115x362.png@900090f.p...

    7 个月前
  • 页面负载启动自举模型

    zanzuBrandon(https://stackoverflow.com/users/4398000/zanzu)提出了一个问题:Launch Bootstrap Modal on page lo...

    2 年前
  • 页面简单布局

    下面是一个简单的页面布局。注意发现页面的布局特点,注意使用居中,浮动等。 结果: image.png(/public/upload/2eebdd74298e13c7103ee3094697...

    3 个月前

官方社区

扫码加入 JavaScript 社区