gulp教程之gulp-uglify(压缩javascript文件,减小文件大小)
原文:http://www.ydcss.com/archives/54
简介:
使用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
|
vargulp=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
|
vargulp=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
|
vargulp=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
|
vargulp=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
|
vargulp=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
简介:
使用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
|
vargulp=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
|
vargulp=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
|
vargulp=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
|
vargulp=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
|
vargulp=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
转载于:https://www.cnblogs.com/HendSame-JMZ/articles/6182939.html
gulp教程之gulp-uglify(压缩javascript文件,减小文件大小)相关推荐
- gulp教程之gulp-uglify
本文链接:http://www.ydcss.com/archives/54 简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目 ...
- gulp教程之gulp-imagemin(gulp-imagemin压缩图片文件)
原文:http://www.ydcss.com/archives/26 简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片),很多人安装gulp-imagem ...
- gulp教程之gulp-imagemin压缩图片
简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片),很多人安装gulp-imagemin都会出现错误,我也查了很多资料,也不知道所以然,我的做法是出错再重新 ...
- gulp教程之gulp-minify-css【gulp-clean-css】
原文:http://www.ydcss.com/archives/41 简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-min ...
- gulp教程之gulp-concat
简介: 使用gulp-concat合并javascript文件,减少网络请求. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 本示 ...
- gulp教程之gulp-autoprefixer
现在浏览器的种类很多,不同浏览器的内核不同,同一浏览器也有很多不同的版本,很多css属性为了兼容浏览器需要加上特定的前缀,比如chrome的前缀是-webkit-,firefox前缀是-moz-等. ...
- 手把手教你怎么批量压缩视频文件
下载的视频内存太大不好保存的话怎么办?电脑手机内存不够用怎么办?怎么快速压缩保存的视频内存?今天,小编就给大家带来实操教学,教你如何批量压缩视频的内存大小. 一.首先我们先在"固乔科技&qu ...
- gulp教程之gulp-htmlmin压缩html
我们可以使用gulp-htmlmin压缩html,可以压缩页面javascript.css,去除页面空格.注释,删除多余属性等操作. 本地安装gulp-htmlmin 安装:命令提示符执行 cnpm ...
- 压缩 javascript文件js文件
1.压缩单个js文件 npm install uglify-js -g 安装 1>压缩单个js文件 打开cmd, 目录引到当前文件夹,cd uglifyjs inet.js -o inet-mi ...
- webstorm 设置uglify 压缩js文件
第一步:打开npm,全局安装 npm install uglify-js -g 第二步: 打开webstorm的file->settings ->External Tools,点击左上角的 ...
最新文章
- C++ 判断某个变量是某一种类型
- 【QT】二进制读取图像文件测试
- 使用IDEA创建maven父子工程项目
- linkedhashmap 顺序_LinkedHashMap 源码详细分析(JDK1.8)
- 快速傅里叶变换及python代码实现
- Python abs函数 - Python零基础入门教程
- dedecms--在后台增加会员添加
- html表单基础知识,【学习笔记】html基础知识第四更/与用户交互!(表单标签)...
- 为什么没有看到webcontent_王者荣耀之战坦路玩家心理:队友为什么不支援!我想要和射手换线...
- 将servlet[login]标记为不可用_30分钟上手OUTLOOK - 邮件标记
- 5岁自学python编程-三十岁了还可以学编程吗?只要你想,只要你做,什么时候都不晚...
- hssfwork 导出excel 文件已损坏_C# NPOI 操作EXCEL文件的读取和导出
- 使用spark与ElasticSearch交互
- Android Eclipse 导入 AS Gradle AAR 库手册
- Linux用户和密码
- 射频功率放大器电路设计
- HTML当前标签鼠标停留下划线和变色效果
- 最小的操作系统MenuetOS
- MYSQL 命令行大全 (简洁、明了、全面)
- 右键添加打开方式 windows
热门文章
- mysql connection.h_MySQL connector c++使用笔记
- vue $slot基本用法
- hibernate_09_关联映射_多对一
- CI加载model的问题
- 学好 Python 的 11 个优秀资源【转载】
- 在线js调试工具JSbin、jsFiddle
- zencart 1.5.1 英文原版 安装前和安装后目录文件的变换
- boost::array与std::vector使用与性能
- android UI进阶之android中隐藏的layout 抽屉的运用
- Hexo + Github搭建自己的博客