3、配置gulpfile.js

3.1、基本使用

JavaScript
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文件

JavaScript
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、匹配符“!”,“*”,“**”,“{}”

JavaScript
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、指定变量名不混淆改变

JavaScript
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其他参数 具体参看

JavaScript
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 转的更多相关文章

  1. grunt 上手

    grunt 上手 开始上手 Grunt 和 grunt 插件都是通过 npm 安装, Node.js 包管理器管理的. Grunt 0.4.x 版本需要Node.js 版本号不低于0.8.0. 一.安 ...

  2. 使用grunt搭建自动化的web前端开发环境

    使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...

  3. web前端开发-博客目录

    web前端开发是一个新的领域,知识连接范围广,处于设计与后端数据交互的桥梁,并且现在很多web前端相关语言标准,框架库都在高速发展.在学习过程中也常常处于烦躁与迷茫,有时候一直在想如何能够使自己更加系 ...

  4. gulp 常用方法 任务 插件

    执行gulp 任务 gulp taskname (default任务不输入名称亦可:gulp) var gulp = require("gulp"); gulp.task(&quo ...

随机推荐

  1. 如何修改Docker已运行实例的端口映射

    如何修改Docker已运行实例的端口映射 Docker的端口映射,往往出现在两个阶段需要处理: 1.是在docker启动前就已经确定好,哪个docker实例映射哪个端口(往往这个情况比较,需要提前做规 ...

  2. Redis入门--1.安装Redis

    redis是什么? 是完全开源免费的,用c语言编写的,是一个单线程,高性能的(key/value)内存数据库,基于内存运行并支持持久化的nosql数据库 redis能干嘛? 主要是用来做缓存,但不仅仅 ...

  3. mock造数据

    前端开发,需要和后台联调:很多时候,前端开发并不需要等后台完全写好接口在去联调,自己可以写死数据,渲染数据,加样式.后台人员有时会很忙,他没有时间写好返回所有的数据等等,特别是新开一个项目,从零开始的 ...

  4. 如何在ArcGIS中恢复MapGIS制图表达信息

    1.输出符号信息 Map2Shp软件中提供了图示表达转换功能,提供对MapGIS图形特征可视表达信息的跨平台支持.若要使用该功能,必须在转换时,"图元参数输出方式"选定为[图元参数 ...

  5. 公司没有 DBA,Mysql 运维自己来

    如果你的公司有 DBA,那么我恭喜你,你可以无视 Mysql 运维.如果你的公司没有 DBA,那你就好好学两手 Mysql 基本运维操作,行走江湖,防身必备. 环境:CentOS7 版本: 一.虚拟机 ...

  6. acmPush模块示例demo

    感谢论坛版主 马浩川 的分享. 模块介绍:  阿里移动推送(Alibaba Cloud Mobile Push)是基于大数据的移动智能推送服务,帮助App快速集成移动推送的功能,在实现高效.精确.实时 ...

  7. 秦皇岛 I 题

    有 n 个数字,你可以挑选其中任意个数字代表一个背包的体积,其余的数字表示的物品的体积,所挑选的背包必选完全装满,询问最终的方案数 思路分析 : 定义dp[i] 表示挑选 i 状态下的物品的方案数,f ...

  8. 使用 OAS(OpenAPI标准)来描述 Web API

    无论哪种类型的Web API, 都可能需要给其他开发者使用. 所以API的开发者体验是很重要的. API的开发者体验, 简写为 API DX (Developer Experience). 它包含很多 ...

  9. Mysql的binlog日志与mysqlbinlog命令

    binlog相关 MySQL 的二进制日志 binlog 可以说是 MySQL 最重要的日志,它记录了所有的 DDL 和 DML 语句(除了数据查询语句select.show等),以事件形式记录,还包 ...

  10. CocoaPods中的头文件import导入时不能自动补齐的解决方法

    1.选择target(就是左边你的工程target)-->BuildSettings-->search Paths下的User Header Search Paths 2.添加“$(POD ...