构建工具--glup如何压缩,丑化代码
为什么使用
最近在迭代公司的项目,发现项目有如下缺点:
- 代码没有压缩,js文件,内存大,放在服务器上占空间;
- 源代码没有混淆或者丑化处理,本公司的程序员写出来的代码和高质量逻辑容易被其他公司的程序员盗用;
- js,css 文件数量多,浏览器加载起来会“手忙脚乱”和“生气”。
这个小项目使用gulp构建工具写的,所以很自然用gulp下的一系列插件来完成。其中用到的插件有:gulp-concat整合数量大的文件为一个文件,gulp-uglify丑化代码,不让别人轻易得到你的源码,gulp-uglify重新命名文件名称等等
实现
运行cnpm i gulp-concat gulp-uglify gulp-rename --save-dev 安装这三个包 --save-dev的意思就是在开发环境;
这几个插件使用起来还好,容易,比较曲折一点的就是gulp-uglify: 我一开始是上npm官网安装了一个最新版的uglify可是没有用,我百度,谷歌折腾了一会,同事和我说vue-cli项目就有这个gulp功能,让我去参考如何使用。原来是uglify的版本不一样,我把版本从最新版降级到2.0.0就可以了。
"gulp-uglify": "^2.0.0",
其中使用代码如下:(js部分)
//丑化js代码
gulp.task('compress', function () {
gulp.src('./src/oldJs/*.js') //注意路径的写法
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify({ //丑化js代码,相当加密
sourceMap: false,
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
},
mangle: {except: ['$super', '$', 'exports', 'require','avalon']} //排除关键字
}))
.pipe(gulp.dest('./src/js')); //注意路径的写法
});
//
构建工具--glup如何压缩,丑化代码的更多相关文章
- 深入浅出的webpack构建工具---ParallelUglifyPlugin优化压缩(十)
webpack默认提供了UglifyJS插件来压缩JS代码,但是它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩.所以说在正式环境打包压缩代码速度非常慢(因为压缩JS ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- Visual Studio Code初识与自动化构建工具安装
1.Visual Studio Code如何新建文件夹 要自己手动在本地新建,然后再点击文件->打开文件夹即可. 之后你就可以任意添加文件了 2.如何使用自动化构建工具 通过自动化构建工具,用户 ...
- 前端构建工具之gulp(一)「图片压缩」
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...
- Vue项目模板--和--webpack自动化构建工具的---项目打包压缩使用
[首先安装node.js]: 1. 从node.js官网下载并安装node,安装过程很简单. 2. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 npm -v2.3.0 #升 ...
- 构建工具:grunt、Glup、webpack
相关代码已上传至github 怎么是项目构建? 编译项目中的js, sass, less: 合并js/css等资源文件: 压缩js/css/html等资源文件: JS语法的检查. 构建工具的作用? 简 ...
- 自动化前端构建工具--gulp
Gulp是一个基于任务的javascript工程命令行流式构建工具.为什么要用Gulp呢?前端开发进入到工程化阶段,我们需要压缩合并文件,加MD5戳:如果使用 CoffeeScript/ES6 去代替 ...
- 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用
关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用 工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...
随机推荐
- C#破解access数据库密码方法
原文:C#破解access数据库密码方法 using System; using System.Collections.Generic; using System.IO; using System.L ...
- Android零基础入门第51节:进度条ProgressBar
原文:Android零基础入门第51节:进度条ProgressBar 不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有AP ...
- C#高性能大容量SOCKET并发(四):缓存设计
原文:C#高性能大容量SOCKET并发(四):缓存设计 在编写服务端大并发的应用程序,需要非常注意缓存设计,缓存的设计是一个折衷的结果,需要通过并发测试反复验证.有很多服务程序是在启动时申请足够的内存 ...
- ORA-09925: Unable to create audit trail file
当我修改ORACLE_SID为新的SID,想进行数据库还原时,用sqlplus报如下错误 [oracle@dbtest ~]$ sqlplus / as sysdba SQL Production : ...
- LINQ学习笔记(一)
LINQ,语言集成查询(Language Integrated Query)是一组用于C#和Visual Basic语言的扩展. 它允许编写C#或Visual Basic代码以查询数据库相同的方法操作 ...
- QML被系统缓存的原理是比较时间戳
Gunnar Roth January 25, 2017 at 17:07 Afaik the cached qml file contains a checksum of the original ...
- 关于Eurekalog解决不能发邮件的问题
最近无意中发现在盒子论坛中有人回答了本文的问题,最后在Eurekalog的安装目录中的ExceptionLog.pas找到了多发送的Rest命令的地方,现传上来,有需要的朋友下载下面的文件. 因为16 ...
- 配置QSslConfiguration让客户端程序跳过本地SSL验证
大家下午好哦.今天我们在重新制作我们萌梦聊天室的时候,出现了这样的问题.那就是我们的客户端能够对qtdream.com服务器进行登录,但是不能对localhost服务器(也就是本机啦)进行登录.这究竟 ...
- 【操作系统】elementary OS 和 deepin OS
文章摘自:http://blog.sina.com.cn/s/blog_64fb59d90102x3xa.html 部分参考:https://bbs.deepin.org/forum.php?mod= ...
- Android WebView设置背景透明
Adndroid 2.x的设置 在Android 2.x下,设置webview背景为透明的方法: wvContent.setBackgroundColor(0); Adndroid 4.0 由于硬件加 ...