如何gulp压缩,丑化代码

linkin 发布于2019-08-23 14:10 / 2022人阅读

摘要：其中使用代码如下部分丑化代码注意路径的写法合并所有到压缩后的文件名丑化代码，相当加密排除关键字注意路径的写法

为什么使用

最近在迭代公司的项目,发现项目有如下缺点:

代码没有压缩,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"));  //注意路径的写法
});
//

服务器托管专线服务压缩代码 js代码还原压缩代码的压缩功能代码 asp 代码压缩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100193.html

gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash）

摘要：在资源很多时，例如图片的复制，这个会加快任务的执行速度，特别是需要实时预览时，减少延迟。但是作为个入门短时间内还是不能够被取代得了的。 gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash） tags: gulp 前端自动化开发 npm仓库下载地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基础上的...

silvertheo 2019-08-20 14:39 评论0 收藏0
[译]教程：如何使用Rollup打包JavaScript

摘要：教程如何使用打包通过这个系列教程一步一步学习如何使用更小更快的取代和打包文件。安装并且创建配置文件。提示是告诉我们实际需要哪些插件的集合。通过下面的命令安装两个插件更新然后，引入插件并添加进配置注意属性是为了帮助模块迁移到的一部分。教程：如何使用Rollup打包JavaScript 通过这个系列教程一步一步学习如何使用更小更快的Rollup取代webpack和Browserify打包...

luoyibu 2019-08-20 12:25 评论0 收藏0
前端构建的初步尝试

摘要：前言这篇文章的主要目的是告诉大家构建工具可以做那些事情大家不必去深入研究这个东西最基本的是有个概念什么是前端构建在平时我们浏览一些大型的站点会发现其中的一些经过压缩去掉了空白符注释经过了混淆和压缩一些引用的文件的链接会加上奇怪的字串文件例如前言这篇文章的主要目的是告诉大家,构建工具可以做那些事情.大家不必去深入研究这个东西.最基本的是有个概念. 什么是前端构建? 在平时我们浏览一些...

Keven 2019-08-01 15:38 评论0 收藏0
gulp排除已压缩文件思路

摘要：默认排除语法的弊端有个时候我们需要时用排除已经压缩过的，等。主要用两个属性来描述文件，它们分别是路径及内容。判断函数接受一个文件对象，返回一个值。官方例子仅压缩符合条件的文件，丹斯所有文件包括不符合条件的都会被发送到目录。 gulp默认排除语法的弊端有个时候我们需要时用gulp排除已经压缩过的js，css等。如果以压缩文件是以.min.js之类命名规范的还好，如果不是呢？而且还有其他...

Aklman 2019-08-22 10:49 评论0 收藏0
gulp详细基础教程

摘要：核心概念流流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。类型，设置输出路径以某个路径的某个组成部分为基础向后拼接。一、gulp简介 1.gulp是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工...

xuhong 2019-08-28 18:16 评论0 收藏0