ugligy 转
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、结束语
ugligy 转的更多相关文章
- grunt 上手
grunt 上手 开始上手 Grunt 和 grunt 插件都是通过 npm 安装, Node.js 包管理器管理的. Grunt 0.4.x 版本需要Node.js 版本号不低于0.8.0. 一.安 ...
- 使用grunt搭建自动化的web前端开发环境
使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...
- web前端开发-博客目录
web前端开发是一个新的领域,知识连接范围广,处于设计与后端数据交互的桥梁,并且现在很多web前端相关语言标准,框架库都在高速发展.在学习过程中也常常处于烦躁与迷茫,有时候一直在想如何能够使自己更加系 ...
- gulp 常用方法 任务 插件
执行gulp 任务 gulp taskname (default任务不输入名称亦可:gulp) var gulp = require("gulp"); gulp.task(&quo ...
随机推荐
- Android系统启动过程分析
Android系统启动过程分析 一.Android平台架构 首先贴一张Android系统架构图方便理解整个Android架构,这可以让我们从整体上对整个启动流程有个大概认知. 可以看出整个架构由5部分 ...
- FullPage.js-基于 jQuery 的插件全屏滚动插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
- Centos7下创建和管理用户
centos服务管理主要命令是systemctl,centos7的服务不再放在/etc/init.d/下;而放在/usr/lib/systemd/system下,centos7系统中systemctl ...
- 案例分析丨谷歌设计冲刺 4 天决定 Clips 的功能特性
这次为大家带来Google冲刺日程案例,之前案例分析可以戳对应文字直达:ING集团.音乐流媒体Spotify.美国知名超市Target 作为一款工具类产品,谷歌十分注重产品候选人的技术背景,同时也看重 ...
- wepy怎么在生命周期中调用methods方法
很简单: 比如在 onLoad () { imgRemove(e) { this.methods.onRemove(e) } } 在methods中就可以直接调用属于它的方法, ...
- 揭秘webpack plugin
前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...
- Scala 学习(3)之「类——基本概念1」
类 小提示:可以通过:paste进入 Scala 的多行模式,输入对应的代码块之后,按ctrl + D退出多行模式,然后再调用刚才输入的函数或者方法进行测试 //定义类,包含 field 以及方法 c ...
- 容器环境的JVM内存设置最佳实践
Docker和K8S的兴起,很多服务已经运行在容器环境,对于java程序,JVM设置是一个重要的环节.这里总结下我们项目里的最佳实践. Java Heap基础知识 默认情况下,jvm自动分配的heap ...
- NPOI读取Excel的数据
首先是给项目安装NPOI.DLL :Install-Package NPOI -Version 2.4.1 HttpPostedFile upLoadPostFile = FileUpload1.Po ...
- SpringCloud之Feign(五)
Feign简介 Feign 是一个声明web服务客户端,这便得编写web服务客户端更容易,使用Feign 创建一个接口并对它进行注解,它具有可插拔的注解支持包括Feign注解与JAX-RS注解,Fei ...