gulp 项目构建代码压缩与混淆

1、gulp安装

需要全局安装：npm install gulp -g

还需要本地安装,在项目目录中：npm install gulp --save

2、gulp使用

在项目目录中新建1个gulpfile.js文件.
在这个文件中写上构建代码.

gulp-uglify 压缩js

压缩混淆js代码,需要gulp-uglify插件支持.使用npm安装该插件 npm install gulp-uglify

// 获取 gulp
var gulp = require('gulp');
// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify');
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('jscompress', function() {// 1. 找到文件return gulp.src('js/cart.js')// 2. 压缩文件.pipe(uglify({mangle:true}))// 3. 另存压缩后的文件.pipe(gulp.dest('dist/js'));
});

压缩CSS

需要gulp-cssmin插件支持.使用npm安装该插件 npm install gulp-cssmin

var cssmin = require("gulp-cssmin");gulp.task("csscompress",function () {//1.这个任务是用来压缩css的.//  那么首先你需要指定需要压缩的css文件//  调用gulp对象的src方法,指定要处理的文件的路径.gulp.src("css/ershou.css").pipe(cssmin()).pipe(gulp.dest("dist/css"));//2.pipe()管道理解 阀门形象理解.//3.管道中每一个阀门做不同的事情.不同的事情需要插件来完成.//  压缩css的插件. gulp-cssmin//  安装插件,引入gulp-cssmin//  引入后,其实1个函数.//  将其在管道中调用,相当于在管道中设置了1个阀门.//4.管道最后1关,要调用gulp对象的dest方法,设置存放处理后的路径.});

执行命令：

gulp csscompressgulp jscompress

转载于:https://www.cnblogs.com/winstonsias/p/11572285.html

gulp 项目构建代码压缩与混淆相关推荐

前端多页面的代码压缩和混淆
最近碰到一个老项目,用jq写的需要将代码进行压缩和混淆,后面选择了用 gulp 自动化构建工具,使用起来还是挺简单方便的! 安装依赖 npm install gulp-cli -g npm insta ...
gulp自动化构建工具--压缩css--学习笔记
gulp是基于node实现的,那么我们就需要先安装node 打开 https://nodejs.org/ 点击绿色的 INSTALL 按钮下载安装 node. 以下操作是在Windows环境下运行. ...
Android使用R8压缩，混淆，优化App
在Android开发中,为了使App尽可能小,可以使用R8来压缩,混淆,优化App,当使用Android Gradle插件3.4.0或更高版本时,插件不再使用ProGuard执行优化而是R8. R8的 ...
Grunt插件之uglify--js代码压缩与合并
平时在开发项目的时候,都是在本地测试,加载代码都是走localhost,页面刷新基本是秒出,所以没有考虑js文件的大小.最近项目上线,部署到了服务器上之后,测试的时候发现加载速度特别慢,一查看网络,发 ...
服务器项目混淆,压缩和混淆node.js服务端代码
压缩和混淆node.js服务端代码在前端我们有webpack,gulp等构建工具提供了从项目结构搭建到部署打包,基本所有工作流程所需要的都被覆盖到了. 在后台node.js写的服务端却是透明,很多时 ...
用gulp实现代码压缩、图片压缩和项目打包
在装好node.js的前提下第一步在cmd命令行窗口运行 cd 到项目文件夹运行 npm init 运行完成后第二步运行 npm install gulp --save-dev 第三部 ...
压缩和混淆node.js服务端代码
压缩和混淆node.js服务端代码在前端我们有webpack,gulp等构建工具提供了从项目结构搭建到部署打包,基本所有工作流程所需要的都被覆盖到了. 在后台node.js写的服务端却是透明,很多时 ...
【Vue】Vue1.0+Webpack1+Gulp项目升级构建方案的踩坑路
最近半年在维护公司的一个管理后台项目,搭建之初的技术栈比较混乱,构建方案采用了Gulp中调用Webpack的方式,Gulp负责处理.html文件,Webpack负责加载.vue..js等.而在这一套构 ...
gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

gulp 项目构建代码压缩与混淆

1、gulp安装

2、gulp使用

gulp-uglify 压缩js

压缩CSS

执行命令：

gulp 项目构建代码压缩与混淆相关推荐

最新文章

热门文章

gulp 项目构建 代码压缩与混淆

1、gulp安装

2、gulp使用

gulp-uglify 压缩js

压缩CSS

执行命令：

gulp 项目构建 代码压缩与混淆相关推荐

最新文章

热门文章

gulp 项目构建代码压缩与混淆

gulp 项目构建代码压缩与混淆相关推荐