gulp教程之gulp-uglify

简介:

使用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、基本使用

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、结束语

来源:http://www.ydcss.com/archives/54

转载于:https://www.cnblogs.com/sxz2008/p/6370572.html

gulp-uglify的使用相关推荐

  1. gulp常用插件总结

    近期在学习使用gulp,通过写这篇总结文章,让自己加深对gulp常用插件的印象. 1. gulp-refresh 插件地址:gulp-refresh 注:1.该插件需要配合Chrome浏览器的扩展程序 ...

  2. 前端构建工具Gulp的学习和使用

    前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! ...

  3. gulp plugins 插件介绍

    原文:http://ju.outofmemory.cn/entry/103253 鸟窝 2014-11-28 3020 阅读 gulp Gulp是一个构建工具, 功能类似grunt, 以及Java生态 ...

  4. Building with Gulp

    Building With Gulp =================== 翻译出处 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使 ...

  5. [重拾]深入理解gulp自动化

    写在前面 gulp使用了有一段时间,公司好几个项目自动化就是用它构建的.不过对这个简单粗暴的工具我常常是又爱又怕.啥意思呢?大牛们写的gulp任务我看得懂,也能依样画葫芦运用到自己的项目,但是如果撇开 ...

  6. gulp 4.0--前端构建工具基本环境搭建及使用

    Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass,Less 优化资源,比如压缩CSS,JavaScript,压缩图片 ...

  7. gulp解决前端缓存gulp-rev-collector

    本文主要介绍gulp解决前端缓存的问题.使用的gulp插件有gulp-rev和gulp-rev-collector. 一.安装依赖 npm install --save gulp-rev npm in ...

  8. gulp教程之gulp-uglify

    本文链接:http://www.ydcss.com/archives/54 简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目 ...

  9. gulp 插件之 gulp-uglify

    gulp-uglify 的简介: 使用 uglify 引擎,用来压缩 js 文件,加快网站响应速度. 一.gulp-uglify 插件的使用 1.安装 "gulp-uglify " ...

  10. gulp 压缩html内的js,gulp实战技巧之gulp-uglify压缩js

    摘要: 前面讲了压缩css的几款插件,这篇就介绍下压缩js的一款插件--gulp-uglify.使用gulp-uglify可以压缩我们的js代码,也可以使用其提供的混淆功能对代码进行简单的混淆,注意是 ...

最新文章

  1. Flutter开发之数据存储-1-SharedPreferences(32)
  2. build 之前执行task_一次NPM前端项目的CI-Build速度优化
  3. 必须进行支持的游戏方可使用此功能_C#8.0 新增功能
  4. 我们公司也实行了OKR
  5. quartz 时间配置规则
  6. Python binascii
  7. 形容女人的词语大全(坏与好)
  8. 获取任务管理器中进程的Memory(Private Working Set)
  9. 压缩与解压2---文件的压缩
  10. python实现sm3加密算法
  11. marlin2.0.x 固件相关配置文档说明
  12. 啃完999页Java面试高频宝典,最新整理
  13. python不是有效的win32应用程序_python.exe不是有效的win32应用程序
  14. 2022/3/27 Java开发之Java web编程 第十一章 Ajax交互扩展
  15. 软件验收测试合格的标准
  16. 差异性分析该如何选择?
  17. 如何确定产品生命周期
  18. pan图像全色图像_HTML5图像效果–棕褐色
  19. 最新最全的 Android 开源项目合集
  20. IBM3650M4实体机安装ESXI7.0

热门文章

  1. RestTempalte 的使用
  2. 新年第二天,计划不能少
  3. 20190716 DP 练习赛
  4. java萌新的进化旅程03
  5. 放任通胀就是与虎相伴
  6. 在如何提高产品的页面和宝贝转化率上
  7. word2010快捷键
  8. 设置WPS文档笔记模版
  9. Link-Validator 检测网站友情链接的JavaScript脚本
  10. maptask 的环形缓冲区 重点理解介绍