gulp js 代码混淆
安装命令行工具
npm install --global gulp-cli
需要init项目结构
安装gulp
npm install --save-dev gulp
创建gulpfile.js文件
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
这里的代码为官网默认代码
压缩html
需要导入
- var revCollector = require('gulp-rev-collector');//- 路径替换,js文件生成签名后对html中的引用进行调整
- var htmlmin = require("gulp-htmlmin");
function htmlTask(){
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
src(['./rev/**/*.json','./**/*.html',"!./node_modules/**/*.html","!./temp/**","!/dist/**"]) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
//- 执行文件内css、js名的替换
.pipe(revCollector({
replaceReved: true,//允许替换, 已经被替换过的文件
}))
.pipe(htmlmin(options))
.pipe(dest('dist/'));//- 替换后的文件输出的目录
}
css压缩
需要导入
- var rev = require('gulp-rev');//- 对文件名加MD5后缀
- var cssmin = require("gulp-cssmin");
function cssTask(){
src(['./**/*.css','!./node_modules/**'])
.pipe(cssmin())
.pipe(rev())
.pipe(dest('dist/'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(dest('./rev/css'));//- 将 rev-manifest.json 保存到 rev 目录内
}
js压缩
导入
- var uglify = require('gulp-uglify');
function jsTask(){
src(['./**/*.js',"!gulpfile.js","!node_modules/**/*.js"])
.pipe(removeLogging())//移除console语句
//代码混淆
//1. 直接混淆方法内的代码
.pipe(uglify())
//2. 混淆全部代码,包括函数名
// .pipe(uglify({ mangle: {
// toplevel: true //混淆变量名
// }
// ,compress:true//是否完全压缩
// }))
//添加文件后缀md5
.pipe(rev())
//保存文件
.pipe(dest('dist/'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(dest('./rev/js'));//- 将 rev-manifest.json 保存到 rev 目录内
}
最后在defaultTask中以此调用
function defaultTask(cb) {
clear();
jsTask();
cssTask();
htmlTask();
// testHtml();
// return series(clear,jsTask,cssTask,htmlTask);
cb();
}
控制台中运行
gulp
$\color{red}{点击展开完整代码}$
``` const { src, dest, series, task } = require('gulp'); const gulp = require('gulp'); var uglify = require('gulp-uglify'); var cssmin = require("gulp-cssmin"); var htmlmin = require("gulp-htmlmin"); var removeLogging = require("gulp-remove-logging"); var rev = require('gulp-rev');//- 对文件名加MD5后缀 var revCollector = require('gulp-rev-collector');//- 路径替换 var clean=require('gulp-clean');function clear(){
console.log("clean project....");
src(["dist","rev","temp","test"],{allowEmpty:true})
.pipe(clean());
console.log("clean project success");
}
function testHtml(){
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 ==>
removeEmptyAttributes: true, //删除所有空格作属性值 ==>
removeScriptTypeAttributes: true, //删除
留待后查,同时方便他人
联系我:renhanlinbsl@163.com
联系我:renhanlinbsl@163.com