自用gulp打包脚本,压缩html,压缩js,压缩css,压缩图片,功能齐全
const gulp = require('gulp');
const fs = require('fs');
const htmlmin = require('gulp-htmlmin');
const uglify = require('gulp-uglify');
const uglifyEs = require('uglify-es');
const minifyCSS = require('gulp-minify-css');
const imagemin = require('gulp-imagemin');
const babel = require('gulp-babel');
const replace = require('gulp-replace');
const version = new Date().getTime();
/**
* 清空
*/
function clear(dist = 'dist') {
if (fs.existsSync(dist)) {
console.log("清空");
fs.rmSync(dist, { recursive: true });
}
}
function compressHtml(src, base = 'src', dist = 'dist') {
gulp.src(src, { base: base, allowEmpty: true })
.pipe(replace('199210103019', version + ''))
.pipe(replace(/(<link\s+.+\.css\?[^\"]+)/gi, '$1&zqd=' + version))
.pipe(replace(/(<link\s+.+\.css)\"/gi, '$1?zqd=' + version + '"'))
.pipe(replace(/(<script\s+.+\.js\?[^\"]+)/gi, '$1&zqd=' + version))
.pipe(replace(/(<script\s+.+\.js)\"/gi, '$1?zqd=' + version + '"'))
.pipe(htmlmin({
removeComments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: file => uglifyEs.minify(file, { mangle: true }).code
}))
.pipe(gulp.dest(dist));
}
function compressJs(src, base = 'src', dist = 'dist') {
gulp.src(src, { base: base, allowEmpty: true })
.pipe(replace('199210103019', version + ''))
.pipe(babel())
.pipe(uglify({ mangle: { toplevel: true }, output: { ascii_only: true } }))
.pipe(gulp.dest(dist));
}
function compressCss(src, base = 'src', dist = 'dist') {
gulp.src(src, { base: base, allowEmpty: true })
.pipe(minifyCSS())
.pipe(gulp.dest(dist));
}
function compressImage(src, base = 'src', dist = 'dist') {
gulp.src(src, { base: base })
.pipe(imagemin({
optimizationLevel: 5,
progressive: true,
webp: { quality: 75 },
pngquant: { quality: '60-80' },
svgoPlugins: [{ removeViewBox: false }]
}))
.pipe(gulp.dest(dist));
}
/**
* 复制源目录到发布目录
* @param {string} src 源目录
* @param {string} dist 发布目录
*/
function cp2Dist(src, dist = 'dist') {
if (typeof (src) === 'string') {
fs.cpSync(src, dist + '/' + src, { recursive: true });
}
else {
for (var s of src) {
fs.cpSync(s, dist + '/' + s, { recursive: true });
}
}
}
/**
* 打包发布
*/
async function release(cb) {
await clear();
await cp2Dist(['favicon.ico', 'layuiadmin', 'views']);
compressHtml([
'*.html',
'views/*.html',
'views/**/*.html'], '.');
compressJs(['layuiadmin/*.js',
'layuiadmin/modules/*.js',
'layuiadmin/lib/*.js',
'!layuiadmin/layui/*.js',
'layuiadmin/lib/**/echartsTheme.js'], '.');
compressCss([
'layuiadmin/style/*.css',
'layuiadmin/style/system/*.css',
'layuiadmin/style/system/ztree/awesomeStyle/layuiAwesome.css'], '.');
compressImage([
'layuiadmin/images/*',
'layuiadmin/style/res/*'], '.');
console.log("完成打包");
return cb();
};
//清空
gulp.task('clear', () => clear());
//打包发布
gulp.task('release', release);
gulp.task('default', release);
自用gulp打包脚本,压缩html,压缩js,压缩css,压缩图片,功能齐全的更多相关文章
- MVC中的JS和CSS压缩
小说一下Js和CSS压缩的好处: 1.减小了文件的体积 2.减小了网络传输量和带宽占用 3.减小了服务器的处理的压力 4.提高了页面的渲染显示的速度 很多建议将站点的静态文件(如图片.js.css ...
- 【MVC】 js,css 压缩
[MVC] js,css 压缩 一. 引用 System.Web.Optimization.dll : 使用 Nuget ,在控制台输入 Install-Package Microsoft.AspNe ...
- 简短的几句js实现css压缩和反压缩功能
写在前面 最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...
- 使用Ant和YUICompressor链接合并压缩你的JS和CSS代码
JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳 ...
- JS和CSS压缩部署,提高访问效率
一直想把项目中的js和css压缩下,今天终于搞定了. 先说说几个注意的问题,目标影响着你对应的解决办法:1.压缩后的文件,是否要直接覆盖旧的文件2. 单个压缩文件重命名,还是整个目录换个名字,同时文件 ...
- 一、FreeMarker实现对js和css压缩
1.代码压缩理解:实际上就是将原有的文本中无用的注释.空行.空格去掉来压缩文件的大小.进行js和css压缩会带来如下好处:1)减小了文件的体积,减少文件占用的内存;2)减小了网络传输量和带宽占用; 3 ...
- vue打包后js和css、图片不显示,引用的字体找不到问题
vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...
- Ajax清除浏览器js、css、图片缓存的方法
做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...
- nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常
nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...
- Django加入JS,CSS,图片等外部文件的方法
Django加入JS,CSS.图片等外部文件的方法 By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明出处,谢谢. 在使用Django搭建站点时,往往须要使用 ...
随机推荐
- Python变量的数据类型
主要内容 jupyter notebook的用法 变量 跟vi/vim的编辑模式很像 # 声明的三种格式 # 格式1 s1 = "我爱王晓静" # 格式2 s2 = s1 = &q ...
- 2022-11-24:小团在地图上放了3个定位装置,想依赖他们进行定位! 地图是一个n*n的棋盘, 有3个定位装置(x1,y1),(x2,y2),(x3,y3),每个值均在[1,n]内。 小团在(a,
2022-11-24:小团在地图上放了3个定位装置,想依赖他们进行定位! 地图是一个n*n的棋盘, 有3个定位装置(x1,y1),(x2,y2),(x3,y3),每个值均在[1,n]内. 小团在(a, ...
- 2022-05-27:现在有N条鱼,每条鱼的体积为Ai,从左到右排列,数组arr给出。 每一轮,左边的大鱼一定会吃掉右边比自己小的第一条鱼, 并且每条鱼吃比自己小的鱼的事件是同时发生的。 返回多少轮之
2022-05-27:现在有N条鱼,每条鱼的体积为Ai,从左到右排列,数组arr给出. 每一轮,左边的大鱼一定会吃掉右边比自己小的第一条鱼, 并且每条鱼吃比自己小的鱼的事件是同时发生的. 返回多少轮之 ...
- Apache Arrow DataFusion原理与架构
本篇主要介绍了一种使用Rust语言编写的查询引擎--DataFusion,其使用了基于Arrow格式的内存模型,结合Rust语言本身的优势,达成了非常优秀的性能指标 DataFusion是一个查询引擎 ...
- npm install报错node-sass@7.0.1 postinstall: `node scripts/build.js`
在控制台执行 即可 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
- 对promise的简单理解
随着ES6的推行它的许多新特性受到了广大开发者的好评,比如promise,为什么使用这个promise呢,他具体能帮我们做些啥? 其实从字面意思上来理解promise就是承诺,比如:你命令你的手下本月 ...
- JS逆向实战14——猿人学第二题动态cookie
声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标网站 https:// ...
- FreeSWITCH添加自定义endpoint
操作系统 :CentOS 7.6_x64 FreeSWITCH版本 :1.10.9 日常开发过程中会遇到需要扩展FreeSWITCH对接其它系统的情况,这里记录下编写FreeSWITCH ...
- 如何卸载 python setup.py install 安装的包?
当我们半自动安装某些 python 包时,总是存在很多依赖关系的问题,而这些问题还是很难避免的,所以,当我们安装一个不确定的包的时候,最好提前收集一些相关资料,或者请教他人,同时最好把安装过程都记录下 ...
- 【python基础】if语句-语法格式
if语句-语法格式 简单理解if语句之后,我们的if语句语法格式有多种,选择使用哪种取决于要测试的条件数 1.if结构 最简单的if语句只有一个条件测试和一个代码块 其语法格式: 假设想要指导一个学员 ...