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,压缩图片,功能齐全的更多相关文章

  1. MVC中的JS和CSS压缩

    小说一下Js和CSS压缩的好处: 1.减小了文件的体积 2.减小了网络传输量和带宽占用 3.减小了服务器的处理的压力 4.提高了页面的渲染显示的速度  很多建议将站点的静态文件(如图片.js.css ...

  2. 【MVC】 js,css 压缩

    [MVC] js,css 压缩 一. 引用 System.Web.Optimization.dll : 使用 Nuget ,在控制台输入 Install-Package Microsoft.AspNe ...

  3. 简短的几句js实现css压缩和反压缩功能

    写在前面 最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...

  4. 使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

    JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳 ...

  5. JS和CSS压缩部署,提高访问效率

    一直想把项目中的js和css压缩下,今天终于搞定了. 先说说几个注意的问题,目标影响着你对应的解决办法:1.压缩后的文件,是否要直接覆盖旧的文件2. 单个压缩文件重命名,还是整个目录换个名字,同时文件 ...

  6. 一、FreeMarker实现对js和css压缩

    1.代码压缩理解:实际上就是将原有的文本中无用的注释.空行.空格去掉来压缩文件的大小.进行js和css压缩会带来如下好处:1)减小了文件的体积,减少文件占用的内存;2)减小了网络传输量和带宽占用; 3 ...

  7. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  8. Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...

  9. nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常

    nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...

  10. Django加入JS,CSS,图片等外部文件的方法

    Django加入JS,CSS.图片等外部文件的方法 By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明出处,谢谢. 在使用Django搭建站点时,往往须要使用 ...

随机推荐

  1. awk判断整除(包含小数和负数)

    awk判断整除常用的方法是用内置的int或者求余数的算符% 被整数整除 输出0-100之间能被9整除的整数 使用 num/9==int(num/9) 的判断方法可以很好实现. awk 'BEGIN{ ...

  2. JS 打开本地应用软件

    我们有遇到可以直接打开QQ的跳转链接,也有遇到过直接启动office打开文档. 具体是如何操作的呢? 添加注册表项 首先需要在注册表中添加应用软件的启动地址,操作方式如下 在HKEY_CLASSES_ ...

  3. python轻量级性能工具-Locust

    Locust基于python的协程机制,打破了线程进程的限制,可以能够在一台测试机上跑高并发 性能测试基础 1.快慢:衡量系统的处理效率:响应时间 2.多少:衡量系统的处理能力:单位时间内能处理多少个 ...

  4. 2022-08-05:以下go语言代码输出什么?A:65, string;B:A, string;C:65, int;D:报错。

    2022-08-05:以下go语言代码输出什么?A:65, string:B:A, string:C:65, int:D:报错. package main import ( "fmt&quo ...

  5. 2021-03-05:go中,io密集型的应用,比如有很多文件io,磁盘io,网络io,调大GOMAXPROCS,会不会对性能有帮助?为什么?

    2021-03-05:go中,io密集型的应用,比如有很多文件io,磁盘io,网络io,调大GOMAXPROCS,会不会对性能有帮助?为什么? 福哥答案2021-03-05: 这是面试中被问到的.实力 ...

  6. 2021-02-23:给定一个正数n,求n的裂开方法数。规定:后面的数不能比前面的数小 。比如4的裂开方法有: 1+1+1+1、1+1+2、1+3、2+2、4,5种,所以返回5。

    2021-02-23:给定一个正数n,求n的裂开方法数.规定:后面的数不能比前面的数小 .比如4的裂开方法有: 1+1+1+1.1+1+2.1+3.2+2.4,5种,所以返回5. 福哥答案2021-0 ...

  7. 【Linux】(小白向)详解VirtualBox网络配置-配置Linux网络

    本文时间 2023-05-18 作者:sugerqube漆瓷 本文面向新手,重在理解会舍弃不少精密的理论,还请大佬们见谅. 本文目标:成功使用ssh工具登录linux,同时linux能连接外网. 网络 ...

  8. Python异步编程之web框架异步vs同步 无IO任务压测对比

    前言 在python编程中,通过协程实现的异步编程号称能够提高IO密集型任务的并发量.本系列比较web服务器同步框架和异步框架的性能差异,包括无IO接口和常见IO操作,如文件.mysql.redis等 ...

  9. 《Linux的文件目录类指令 20条》

    文件目录类的指令 1.pwd指令 查看当前目录 2.ls  指令 查看当前目录所有内容信息 ls -a 显示当前目录所有的文件和目录,包括隐藏的 ls -l 以列表的方式显示信息 ls -al或la ...

  10. Cesium中监听MOUSE_MOVE事件获取经纬度和高度

    有时候在这个圆球上获取精确的经度纬度还不容易,特别是高度 还好在cesium提供了接口,看 let selft = this; const scene = this.viewer.scene; var ...