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. Antd将Table导出为Excel

    Antd将Table导出为Excel 在最近的项目中,需要把表格中的数据导出给财务进行统计,网上很多一键导出的按钮都没用.经过东拼西凑,最终搞定了导出,自己封装了组件. import { File } ...

  2. OpenStack Identity API v3

    Table Of Contents OpenStack Identity API v3 What’s New in Version 3.7 What’s New in Version 3.6 What ...

  3. QuartzCore

    QuartzCore 说起QuartzCore不知道有多少小伙伴很容易和Quartz2D.CoreGraphics等混淆在一起傻傻分不清楚?所以在下面我们先把这几个很容易混淆或者是分不清楚的框架稍加整 ...

  4. XSS基础学习

    XSS基础学习 By:Mirror王宇阳 什么是XSS XSS攻击是指在网页中嵌入一段恶意的客户端Js脚本代码片段,JS脚本恶意代码可以获取用户的Cookie.URL跳转.内容篡改.会话劫持--等. ...

  5. 【PCIE-2】---PCIE配置空间及访问方式简介

    对新手来说,第一步了解PCIE的相关基本概念,第二步了解PCIE配置空间,第三步深入研究PCIE设备枚举方式.本章主要总结第二步的PCIE配置空间 按照国际惯例,先提问题: 1. 什么是PCIE的配置 ...

  6. 解决.net core读取appSetting.json文件中文字符乱码

    如上所诉 vs菜单栏中  :工具 =>自定义 => 命令 =>添加命令 =>文件 =>找到高级保存选项点击 然后关闭,这时在visual studio界面就会有高级保存选 ...

  7. 1z0-062 题库解析6

    You want execution of large database operations to suspend, and then resume, in the event of space a ...

  8. numpy 索引和切片

    一.取行 1.单行 数组[index, :] # 取第index+1行 例子 import numpy as np arr1 = np.arange(0, 24).reshape(4, 6) # 取第 ...

  9. redis集合

    存值 r1 = conn.sadd('urls', 'www.bing.com') r2 = conn.sadd('urls', 'www.baidu.com') 若要存入集合的值已存在(redis) ...

  10. 异数OS-织梦师-PBFT(六) 走出区块链,加速破解PBFT

    . 异数OS-织梦师-PBFT(六) 走出区块链,加速破解PBFT 拜占庭 本文来自异数OS社区 github: https://github.com/yds086/HereticOS 异数OS社区Q ...