gulp-uglify的使用
简介:
使用gulp-uglify压缩javascript文件,减小文件大小。
1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件
1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程
1.2、本示例目录结构如下:
2、本地安装gulp-uglify
2.1、github:https://github.com/terinjokes/gulp-uglify
2.2、安装:命令提示符执行 cnpm install gulp-uglify --save-dev
2.3、注意:没有安装cnpm请使用 npm install gulp-uglify --save-dev
。 什么是cnpm,如何安装?
2.4、说明:--save-dev
保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?
3、配置gulpfile.js
3.1、基本使用
1
2
3
4
5
6
7
8
|
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('jsmin', function () {
gulp.src('src/js/index.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
|
3.2、压缩多个js文件
1
2
3
4
5
6
7
8
|
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('jsmin', function () {
gulp.src(['src/js/index.js','src/js/detail.js']) //多个文件以数组形式传入
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
|
3.3、匹配符“!”,“*”,“**”,“{}”
1
2
3
4
5
6
7
8
9
10
|
var gulp = require('gulp'),
uglify= require('gulp-uglify');
gulp.task('jsmin', function () {
//压缩src/js目录下的所有js文件
//除了test1.js和test2.js(**匹配src/js的0个或多个子文件夹)
gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
|
3.4、指定变量名不混淆改变
1
2
3
4
5
6
7
8
9
10
11
|
var gulp = require('gulp'),
uglify= require('gulp-uglify');
gulp.task('jsmin', function () {
gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
.pipe(uglify({
//mangle: true,//类型:Boolean 默认:true 是否修改变量名
mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆关键字
}))
.pipe(gulp.dest('dist/js'));
});
|
3.5、gulp-uglify其他参数 具体参看
1
2
3
4
5
6
7
8
9
10
11
12
|
var gulp = require('gulp'),
uglify= require('gulp-uglify');
gulp.task('jsmin', function () {
gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
.pipe(uglify({
mangle: true,//类型:Boolean 默认:true 是否修改变量名
compress: true,//类型:Boolean 默认:true 是否完全压缩
preserveComments: all //保留所有注释
}))
.pipe(gulp.dest('dist/js'));
});
|
4、执行任务
4.1、命令提示符执行:gulp jsmin
5、结束语
来源:http://www.ydcss.com/archives/54
转载于:https://www.cnblogs.com/sxz2008/p/6370572.html
gulp-uglify的使用相关推荐
- gulp常用插件总结
近期在学习使用gulp,通过写这篇总结文章,让自己加深对gulp常用插件的印象. 1. gulp-refresh 插件地址:gulp-refresh 注:1.该插件需要配合Chrome浏览器的扩展程序 ...
- 前端构建工具Gulp的学习和使用
前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! ...
- gulp plugins 插件介绍
原文:http://ju.outofmemory.cn/entry/103253 鸟窝 2014-11-28 3020 阅读 gulp Gulp是一个构建工具, 功能类似grunt, 以及Java生态 ...
- Building with Gulp
Building With Gulp =================== 翻译出处 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使 ...
- [重拾]深入理解gulp自动化
写在前面 gulp使用了有一段时间,公司好几个项目自动化就是用它构建的.不过对这个简单粗暴的工具我常常是又爱又怕.啥意思呢?大牛们写的gulp任务我看得懂,也能依样画葫芦运用到自己的项目,但是如果撇开 ...
- gulp 4.0--前端构建工具基本环境搭建及使用
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass,Less 优化资源,比如压缩CSS,JavaScript,压缩图片 ...
- gulp解决前端缓存gulp-rev-collector
本文主要介绍gulp解决前端缓存的问题.使用的gulp插件有gulp-rev和gulp-rev-collector. 一.安装依赖 npm install --save gulp-rev npm in ...
- gulp教程之gulp-uglify
本文链接:http://www.ydcss.com/archives/54 简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目 ...
- gulp 插件之 gulp-uglify
gulp-uglify 的简介: 使用 uglify 引擎,用来压缩 js 文件,加快网站响应速度. 一.gulp-uglify 插件的使用 1.安装 "gulp-uglify " ...
- gulp 压缩html内的js,gulp实战技巧之gulp-uglify压缩js
摘要: 前面讲了压缩css的几款插件,这篇就介绍下压缩js的一款插件--gulp-uglify.使用gulp-uglify可以压缩我们的js代码,也可以使用其提供的混淆功能对代码进行简单的混淆,注意是 ...
最新文章
- Flutter开发之数据存储-1-SharedPreferences(32)
- build 之前执行task_一次NPM前端项目的CI-Build速度优化
- 必须进行支持的游戏方可使用此功能_C#8.0 新增功能
- 我们公司也实行了OKR
- quartz 时间配置规则
- Python binascii
- 形容女人的词语大全(坏与好)
- 获取任务管理器中进程的Memory(Private Working Set)
- 压缩与解压2---文件的压缩
- python实现sm3加密算法
- marlin2.0.x 固件相关配置文档说明
- 啃完999页Java面试高频宝典,最新整理
- python不是有效的win32应用程序_python.exe不是有效的win32应用程序
- 2022/3/27 Java开发之Java web编程 第十一章 Ajax交互扩展
- 软件验收测试合格的标准
- 差异性分析该如何选择?
- 如何确定产品生命周期
- pan图像全色图像_HTML5图像效果–棕褐色
- 最新最全的 Android 开源项目合集
- IBM3650M4实体机安装ESXI7.0