首页 > 其他分享 >自用gulp打包脚本,压缩html,压缩js,压缩css,压缩图片,功能齐全

自用gulp打包脚本,压缩html,压缩js,压缩css,压缩图片,功能齐全

时间:2023-06-29 09:12:54浏览次数:32  
标签:src layuiadmin dist pipe 压缩 js gulp base

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);

  

标签:src,layuiadmin,dist,pipe,压缩,js,gulp,base
From: https://www.cnblogs.com/HelloCreator/p/17513106.html

相关文章

  • ExtJs学习
    ExtExt.onReady:准备函数,执行时机是DOM对象加载完毕后JS三种函数构造形式arguments对象接受函数的实际参数用于做递归操作使用call指定函数执行的作用域函数.call(window,10,20,30),(作用域对象,参数1,参数2,参数3)apply作用一样,但是是传数组函数.apply(window,[2,3,4])......
  • linux把文件压缩成.tar.gz的命令&各个压缩解压命令大全--九五小庞
    针对LINUX中解压和压缩的命令,一直以来使用都模糊不清,今天在此进行整理01-.tar格式解包:[*******]$tarxvfFileName.tar打包:[*******]$tarcvfFileName.tarDirName(注:tar是打包,不是压缩!)02-.gz格式解压1:[*******]$gunzipFileName.gz解压2:[*******]$gzip-dFileName.gz压缩:[*******]$gzipFileName03-......
  • NodeJS系列(5)- ECMAScript 6 (ES6) 语法(三)
    在“NodeJS系列(3)-ECMAScript6(ES6)语法(一)”和“NodeJS系列(4)-ECMAScript6(ES6)语法(二)”里,我们介绍并演示let、const、Symbol、函数扩展、类等ES6语法和概念。本文在“NodeJS系列(2)-NPM项目Import/ExportES6模块”的npmdemo项目的基础上,继续介绍并演示Ref......
  • delphi如何把json传递过来的base64值转成图片
    资料来原:https://blog.csdn.net/red_eye/article/details/129634709   在Delphi中,您可以使用TNetEncoding.Base64.DecodeString方法将JSON传递过来的Base64编码字符串转换为原始二进制数据。然后,您可以将该二进制数据保存为图像文件或将其加载到TImage组件中以显示图像。以......
  • 10redis列表操作,其他操作,redis管道,django中使用redis,django缓存,序列化json和pickle,cel
    字符串和字节转换的两种方式#字符串和字节转换的两种方式 -decode,encode-直接类型转换-bytes格式的16进制,2进制,10进制的显示#字符串需要用encode,bytes格式需要用decode,但是有时候忘了#可以直接进行强转b1=bytes(s,encoding='utf-8') print(......
  • 使用exceljs和file-saver导出带图片的excel表格
    参考https://www.swvq.com/article/detail/487https://github.com/exceljs/exceljs/blob/master/README_zh.md#图片importExcelJSfrom'exceljs'importfileSaverfrom'file-saver'letworkbook=nullletworksheet=null//图片转base64constco......
  • JVM之指针压缩
    做java开发的同学一般都比较熟悉JVM,那么关于指针压缩这块内容是不是也了解呢,不熟悉的小伙伴往下看吧。首先说明,本文涉及的JDK版本是1.8,JVM虚拟机是64位的HotSpot实现为准。java对象结构了解指针压缩前,需要先搞懂java的实例对象在JVM虚拟机中内存结构是什么样的。java对象由......
  • js promise对象数组,使用reduce序列化执行
    自己使用mdn官方例子测试了一下,发现还有一些小问题,调试了一下OK了。consttimeOut=function(ms){ returnnewPromise(function(resolve){ returnsetTimeout(resolve,ms); })}varp1=function(){ returnnewPromise(function(resolve){ console.log(newDate()+'......
  • fastjson将date转换成了long
     记录一个bug,这个问题是使用fastjson的时候遇到了将date的数据转换成long类型而不是转换成string环境fastjson使用的是1.2.76造成的原因更具环境大家可能已经猜测到了真实的原因-版本太低造成的。这个项目的存在时间比较久所以在使用的依赖上版本比较低,除了源码之外......
  • Vue.js 渲染函数和 JSX
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......