gulp-uglify《JS压缩》----gulp系列(四)
JS 系列 ---- 压缩 Gulp
2023-09-14 08:57:09 时间
本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录。
在系列(三)代码的基础上,再进行扩展。
1.找到gulp->config.js,对JS进行源目录(src->img)和输出目录(build->img)的配置:
2.gulp->tasks里新建JS任务,如下图:
3.同时在default任务序列里添加js任务:
gulp.task('default', ['less', 'images', 'js', 'watch']);
4.最后在watch里添加对src->js文件夹的监听:
watch(config.js.src, function(){ //监听所有js gulp.start('js'); });
此时运行gulp,src->js文件下的图片就会被输出到build->js下,src->js的改动也会被监听。
(注意,删除一个JS,虽然会被监听,但是build->js里却不会删除,之后系列会添加另一个任务来解决这个问题,这里也暂时不做)
以上做完后,我们只是做了一个从 src->js 把图片输出到 build->js里的任务。现在再添加js压缩任务:
1.安装模块:
npm install --save-dev gulp-uglify
2.压缩任务:
可以直接插入在JS任务里,但是我们不这样做,只需要在项目部署时进行压缩,
我们在deploy任务,用来设置发布项目时需要执行的JS任务
tasks里修改deploy.js,代码如下:
var gulp = require('gulp'); gulp.task('deploy', ['less', 'uglify', 'imagemin']);
3.最后在tasks文件夹里新建uglify.js:
var uglify = require('gulp-uglify'); var gulp = require('gulp'); var config = require('../config').js; gulp.task('uglify', function(){ return gulp.src(config.src) .pipe(uglify()) .pipe(gulp.dest(config.dest)); });
相比js任务,只是多了一个 压缩方法 —— pipe(uglify());
保存后,在命名行中运行 gulp deploy
压缩就执行成功了。
还是那句话多看官方文档。
>>> github 地址,请选择 uglify 分支<<<
相关文章
- 支持移动端和PC端的轻量级轮播图插件&&hammer.js教程
- JS框架_(Popup.js)3D对话框窗口插件
- JS框架_(Qrcode.js)将你的内容转换成二维码格式
- JS框架_(Laydate.js)简单实现日期日历
- js SetTimeout传参问题
- Knockout.Js官网学习(系列)
- rx.js 的冷和热观察
- 2015.10.11(js判断鼠标进入容器的方向)
- [CSS 3 + JS] Create a Function to Convert JS Numbers into CSS Hex Colors
- [Custom CLI] Develop and Publish a Node.js CLI from Scratch
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- js es6 标签模板还原字符串
- js实现页面跳转的几种方式
- SAP 电商云 Spartacus UI 实现的 ngrx-router-store.js 的 serializer
- 华为OD机试 - 查找树中元素(Java & JS & Python)
- 华为OD机试 - 最大括号深度(Java & JS & Python)
- three.js(JS 三维模型库)介绍和入门
- javascript案例18——js加减乘除
- 从零开始学_JavaScript_系列(20)——js系列<7>(函数原型的两种声明方式、函数的作用域)
- 从零开始学_JavaScript_系列(八)——js系列<2>(事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单)
- 中秋不加班:js枚举值enums在业务中的应用案例
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- JS中函数声明与函数表达式的异同
- Js中的多条件排序,多列排序
- JS window.open()属性
- JS--条件语句
- 003-and design-dva.js 知识导图-02-Reducer,Effect,Subscription,Router,dva配置,工具
- thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
- 070:vue+openlayers 引用封装js测量距离和面积(示例代码)
- JS专题系列之Promise的原理及实现
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 华为校招机试 - 指令排序(Java & JS & Python)
- Node.js fs模块(二)读写文件
- 原生js实现随机验证码HTMl-JS
- 【项目实战】Vue.js入门介绍
- JS从0到1——775. 倒排单词
- JS中箭头函数写法及5种简写规则