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 项目构建 代码压缩与混淆的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。