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. java线程相关基本方法

    java线程中常用的基本方法有wait,notify,notifyAll,sleep,join,yield等. 线程的生命周期一共分为五个部分,分别是:新建(New).就绪(Runnable).运行( ...

  2. css label两端对齐

    上面这种效果很常见,实现的代码如下: html部分 <ul> <li class="detail_item"> <span class="d ...

  3. C语言之枚举数据类型

    枚举数据类型概述:1.枚举类型是C语言的一种构造类型.它用于声明一组命名的常数,2.当一个变量有几种可能的取值时,可以将它定义为枚举类型.3.枚举类型是由用户自定义的由多个命名枚举常量构成的类型,其声 ...

  4. JS 通过url地址栏获取html页面名称

    有的时候需要获取页面名称,为此我在这里封装了一个方. 一.分别根据传递不同的参数,获取到html页面的名称. 通过传递参数,获取到html页面的名称:参数params 以下是参数解释说明 (1)par ...

  5. cogs 1316. 数列操作B 区间修改 单点查询

    1316. 数列操作B ★★   输入文件:shulieb.in   输出文件:shulieb.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] 假设有一个大小为 n(n ...

  6. 【Flink】Flink作业调度流程分析

    1. 概述 当向Flink集群提交用户作业时,从用户角度看,只需要作业处理逻辑正确,输出正确的结果即可:而不用关心作业何时被调度的,作业申请的资源又是如何被分配的以及作业何时会结束:但是了解作业在运行 ...

  7. [bzoj4873] [洛谷P3749] [Shoi2017] 寿司餐厅

    Description Kiana最近喜欢到一家非常美味的寿司餐厅用餐.每天晚上,这家餐厅都会按顺序提供n种寿司,第i种寿司有一个 代号ai和美味度di,i,不同种类的寿司有可能使用相同的代号.每种寿 ...

  8. [bzoj4824][洛谷P3757][Cqoi2017]老C的键盘

    Description 老 C 是个程序员. 作为一个优秀的程序员,老 C 拥有一个别具一格的键盘,据说这样可以大幅提升写程序的速度,还能让写出来的程序 在某种神奇力量的驱使之下跑得非常快.小 Q 也 ...

  9. 实验三:在eNSP上进行Hybrid链路类型端口实验

    1.配置图 2.配置命令 LSW1的命令配置如下: <Huawei>system-view 进入特权模式 [Huawei]vlan batch 2 3 99 创建vlan2.vlan3.v ...

  10. 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一)(条件构造器)

    每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询 代码下载:ht ...