序
我們都知道挠锥，瀏覽器上是可以看到前端的html和js代碼的，所以如果遇到隱私心比較強的老板始衅，你就冷不丁的會接受到一個代碼加密的需求武福，當接受到這個需求的時候你怎么完成议双？那我希望我的這篇博客可以幫助到你。
首先艘儒，告訴你的老板聋伦，嚴格意義上的加密是不存在的，能夠實現(xiàn)的只有對前端代碼進行壓縮混淆界睁，增加閱讀難度觉增。
本篇教程全篇描述的，就是對代碼進行混淆的手段翻斟，從而滿足老板提出的加密需求逾礁。
為了保證本篇教程真實可用，我將使用一臺新的Windows系統(tǒng)访惜，從無到有進行演示嘹履，同時將操作流程記錄在這里，供你參考债热，也希望能夠幫你跳過一些坑砾嫉，如果你遇到什么問題，請留言討論窒篱。
安裝NodeJs
如果你沒安裝過node焕刮，請跟著教程走，如果你安裝過墙杯，請直接跳到下一節(jié)配并。
下載地址：http://nodejs.cn/download/
直接下載安裝，安裝的過程是傻瓜式的下一步高镐，唯一可以改變的是安裝位置溉旋。
安裝完成后打開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
注意事項
插件安裝完成后算行，我們的前期工作就做完了恕沫。
我們會發(fā)現(xiàn)項目目錄中多個一個node_modules目錄和package-lock.json文件，json文件中是我們的插件列表纱意，node_modules目錄中是我們安裝的插件包婶溯。
index.html是我的主入口文件，src目錄就是我的項目中存放代碼的目錄偷霉，也就是我要壓縮加密構建的目錄迄委。
src里有三個子目錄，controller存放獨立的js處理前端業(yè)務邏輯类少，style存放css樣式文件叙身，view存放html頁面。
在編寫腳本之前硫狞，我需要直白的告訴你信轿，如果你的JS里有ES6語法晃痴，正常打包是打不了的，不過我們的前期工作已經(jīng)把處理這個問題的工具包也一起安裝了财忽，但是也僅限于處理單獨的JS文件倘核。
如果你是HTML代碼里嵌JS，并且JS里有ES6語法即彪，那么需要把JS代碼拎出來做成單獨的JS紧唱，或者手動將ES6寫法改成ES5。
總之隶校，如果你打包報錯漏益，很大可能是ES6語法導致，其次是文件路徑錯誤深胳。
壓縮JS
回到我們的項目根目錄绰疤，創(chuàng)建一個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 %>', {js: ';'}];
監(jiān)聽任務：
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));//將壓縮后的內(nèi)容輸出到目標目錄
});
minjs就是我們自定義的任務名榨了，也就是說 我們在命令行輸入gulp minjs 這行命令，這段代碼就會執(zhí)行攘蔽。
如果只輸入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文件已經(jīng)壓縮成功了渐尿。
壓縮CSS
任務的監(jiān)聽和壓縮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可以傳入很多參數(shù)指定相應的行為：
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也一并壓縮了。
一條龍?zhí)幚?/p>
但是我們總不可能是打個包要跑多條命令吧凉夯，那多麻煩货葬，現(xiàn)在我們就整合整合采幌，讓這些任務合并成一個任務。
我們創(chuàng)建一個task對象震桶，把各個任務的內(nèi)容放進去休傍，并且加一個清理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的任務，我們就在default任務里遍歷task對象顷扩，將其中的方法輪流執(zhí)行一遍拐邪。
gulp.task('default', function () {
? ? for (var key in task) {
? ? ? ? task[key]();
? ? }
});
這樣，我們只需要一個gulp命令隘截，也就走完了整個構建流程扎阶。
同時，我們將單個的任務指向task中對應的方法：
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);
無論是單獨處理一個環(huán)節(jié)婶芭，還是整個構建流程东臀，我們都可以很方便的完成。
想要學習前端的同學可以加我的前端學習交流群562862926犀农，全套前端開發(fā)資料自取
歡迎大家評論留言
