网页抓取 加密html(一台教程全篇代码加密的操作流程及流程记录教程)

　　网页抓取 加密html(一台教程全篇代码加密的操作流程及流程记录教程)

　　顺序

　　我们都知道前端的html和js代码在浏览器上是可以看到的，所以如果遇到隐私意识很强的老板，就会突然接受一个代码加密要求。当你接受这个要求时，你是怎么做的？那么我希望我的这个博客可以帮助到你。

　　首先告诉你的老板，严格意义上的加密是不存在的，唯一能做到的就是对前端代码进行压缩和混淆，增加阅读难度。

　　本教程自始至终描述的是混淆代码以满足老板提出的加密要求的方法。

　　为了保证本教程真正有用，我将使用一个新的Windows系统从头开始演示，在此记录下操作过程供大家参考。也希望能帮助大家跳过一些坑。如果您遇到任何问题，请留言讨论。

　　安装 NodeJs

　　如果你还没有安装node，请按照教程进行，如果你已经安装了，请跳到下一节。

　　下载链接：

　　

　　直接下载安装。安装过程是傻瓜式 的下一步。唯一可以改变的是安装位置。

　　安装完成后打开cmd命令行查看版本号确认是否安装成功。

　　

　　安装插件

　　切换到项目根目录：

　　

　　安装 gulp 插件包： npm install --save-dev gulp

　　效果如图：

　　

　　别着急，还有很多包，按顺序一一刷：

　　npm install --save-dev del

　　npm install --save-dev gulp-concat

　　npm install --save-dev gulp-header

　　npm install --save-dev gulp-if

　　npm install --save-dev gulp-minify-css

　　npm install --save-dev gulp-htmlmin

　　npm install --save-dev gulp-rename

　　npm install --save-dev gulp-replace

　　npm install --save-dev gulp-uglify

　　npm install --save-dev gulp-babel

　　npm install --save-dev babel-preset-es2015

　　npm install --save-dev @babel/core

　　npm install --save-dev @babel/preset-env

　　防范措施

　　插件安装完成后，我们的前期工作就完成了。

　　我们会在项目目录中找到不止一个node_modules目录和package-lock.json文件，json文件就是我们的插件列表，node_modules目录就是我们安装的插件包。

　　

　　index.html是我的主入口文件，src目录是我的项目中存放代码的目录，也就是我要压缩和加密构建的目录。

　　

　　src中有3个子目录，controller存放独立的js处理前端业务逻辑，style存放css样式文件，view存放html页面。

　　在写脚本之前，我需要直截了当地告诉你，如果你的 JS 中有 ES6 语法，正常打包是行不通的，但我们前期工作也已经安装了工具包来处理这个问题，但仅限于处理单个 JS 文件.

　　如果在HTML代码中嵌入了JS，而JS中有ES6语法，则需要将JS代码提取出来单独制作一个JS，或者手动将ES6写法改为ES5。

　　总之，如果打包出错，很有可能是ES6语法引起的，其次是文件路径错误。

　　压缩JS

　　回到我们的项目根目录并创建一个具有固定文件名的 gulpfile.js 文件：

　　

　　导入包：

　　var gulp = require('gulp');

var uglify = require('gulp-uglify');

var babel = require('gulp-babel');

var minifyCss = require("gulp-minify-css");

var htmlmin = require('gulp-htmlmin');

var header = require('gulp-header');

var del = require('del');

　　定义一个目标目录：

　　var destDir = './dist';

　　定义一个注释，因为我想对缩小代码的第一行做一点注释：

　　var note = ['/** 小样，看源码？想得美！ */\n ', {js: ';'}];

　　监控任务：

　　gulp.task('minjs', function () {

//定义路径

var src = [

'./src/**/*.js'

];

gulp.src(src)

.pipe(babel({presets: ["@babel/env"], plugins: []}))//es6转es5

.pipe(uglify())//压缩

.pipe(header.apply(null, note))//添加头部注释

.pipe(gulp.dest(destDir));//将压缩后的内容输出到目标目录

});

　　minjs 是我们自定义的任务名称，也就是说我们在命令行输入 gulp minjs 命令，就会执行这段代码。

　　如果只是输入 gulp 命令，它会自动找到名为 default 的任务。

　　var src = ['./src/**/*.js']; 是我们要抓取的文件，使用通配符，你几乎肯定需要这样写：

　　var src = [

'./src/**/*.js'

, '!./src/config.js'

, '!./src/lib/extend/*.js'

];

　　感叹号表示排除。

　　这里说明destDir只会替换通配符前的目录路径。比如我这里的destDir定义为./dist，那么./src/controller/admin.js的压缩路径就是./dist/controller/admin.js。

　　好的，打开命令行输入命令：gulp minjs

　　

　　检查项目，js文件已经压缩成功。

　　

　　压缩 CSS

　　任务监控和压缩JS没有区别，只是使用gulp-minify-css插件来完成压缩任务。

　　gulp.task('mincss', function () {

var src = [

'./src/style/*.css'

];

gulp.src(src).pipe(minifyCss()).pipe(gulp.dest(destDir + '/style'));

});

　　输入命令：gulp mincss

　　

　　查看项目也没有问题：

　　

　　非常聪明，它会为您删除 css 中的评论。

　　压缩 HTML

　　压缩后的 HTML 可以传递多个参数来指定相应的行为：

　　gulp.task('minhtml', function () {

var options = {

removeComments: true,//清除HTML注释

collapseWhitespace: true,//折叠空白

minifyJS: true,//压缩页面JS

minifyCSS: true//压缩页面CSS

};

var src = [

'./src/views/**/*',

];

gulp.src(src)

.pipe(htmlmin(options))

.pipe(gulp.dest(destDir + '/views'));

});

　　更多参数请看这里：

　　输入命令：gulp minhtml

　　

　　压缩的 HTML：

　　

　　全部压缩成一行，文件中的css和js也被压缩了。

　　一站式处理

　　但是我们不能总是在一个包中运行多个命令。太麻烦了 现在我们将把这些任务整合并组合成一个任务。

　　我们创建一个任务对象，将每个任务的内容放入其中，并添加一个清理 dist 目录的方法，以及一个复制未压缩文件的 move 方法。

　　//任务列表

var task = {

//清理dist目录

clear:function () {

del(['./dist/*']);

},

minjs:function () {

//定义路径

var src = [

'./src/**/*.js'

];

gulp.src(src)

.pipe(babel({presets: ["@babel/env"], plugins: []}))//es6转es5

.pipe(uglify())//压缩

.pipe(header.apply(null, note))//添加头部注释

.pipe(gulp.dest(destDir));

},

mincss:function () {

var src = [

'./src/style/*.css'

];

gulp.src(src).pipe(minifyCss()).pipe(gulp.dest(destDir + '/style'));

},

minhtml:function () {

var options = {

removeComments: true,//清除HTML注释

collapseWhitespace: true,//折叠空白

minifyJS: true,//压缩页面JS 如果你确信你的HTML页面中的js不包含有es6语法，那么可以压缩js 否则还是得把js抽离成单独的文件进行压缩

minifyCSS: true//压缩页面CSS

};

var src = [

'./src/**/*',

];

gulp.src(src)

.pipe(htmlmin(options))

.pipe(gulp.dest(destDir));

},

move: function () {

//复制文件夹 没有被压缩的文件就在这里复制

gulp.src('./src/**/*.png').pipe(gulp.dest(destDir));

}

};

　　我们在压缩js的时候说过，如果只是一个gulp命令，它会找到一个名为default的task，我们在default task中遍历task对象，依次执行方法。

　　gulp.task('default', function () {

for (var key in task) {

task[key]();

}

});

　　这样，我们只需要一个 gulp 命令，整个构建过程就完成了。

　　同时，我们将单个任务指向任务中对应的方法：

　　gulp.task('clear',task.clear);

gulp.task('minjs',task.minjs);

gulp.task('mincss',task.mincss);

gulp.task('minhtml',task.minhtml);

gulp.task('move',task.move);

　　无论是处理单个环节还是整个构建过程，我们都能轻松完成。

　　最后，感谢阅读。PS：欢迎关注，有粉丝必回。