前端項目代碼加密教程_ZenDei技術網路在線

序我們都知道，瀏覽器上是可以看到前端的html和js代碼的，所以如果遇到隱私心比較強的老闆，你就冷不丁的會接受到一個代碼加密的需求，當接受到這個需求的時候你怎麼完成？那我希望我的這篇博客可以幫助到你。為了保證本篇教程真實可用，我將使用一臺新的Windows系統，從無到有進行演示，同時將操作流程記 ...

序

　　我們都知道，瀏覽器上是可以看到前端的html和js代碼的，所以如果遇到隱私心比較強的老闆，你就冷不丁的會接受到一個代碼加密的需求，當接受到這個需求的時候你怎麼完成？那我希望我的這篇博客可以幫助到你。

　　首先，告訴你的老闆，嚴格意義上的加密是不存在的，能夠實現的只有對前端代碼進行壓縮混淆，增加閱讀難度。

　　本篇教程全篇描述的，就是對代碼進行混淆的手段，從而滿足老闆提出的加密需求。

　　為了保證本篇教程真實可用，我將使用一臺新的Windows系統，從無到有進行演示，同時將操作流程記錄在這裡，供你參考，也希望能夠幫你跳過一些坑，如果你遇到什麼問題，請留言討論。

安裝NodeJs

　　如果你沒安裝過node，請跟著教程走，如果你安裝過，請直接跳到下一節。

　　下載地址：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

註意事項

　　插件安裝完成後，我們的前期工作就做完了。

　　我們會發現項目目錄中多個一個node_modules目錄和package-lock.json文件，json文件中是我們的插件列表，node_modules目錄中是我們安裝的插件包。

　　index.html是我的主入口文件，src目錄就是我的項目中存放代碼的目錄，也就是我要壓縮加密構建的目錄。

　　src里有三個子目錄，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 %>', {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'));
});

　　更多參數請移步這裡來看：https://github.com/kangax/html-minifier/blob/gh-pages/README.md

　　輸入命令：gulp minhtml

　　壓縮後的HTML：

　　全部壓成一行，文件中的css和js也一併壓縮了。

一條龍處理

　　但是我們總不可能是打個包要跑多條命令吧，那多麻煩，現在我們就整合整合，讓這些任務合併成一個任務。

　　我們創建一個task對象，把各個任務的內容放進去，並且加一個清理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對象，將其中的方法輪流執行一遍。

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);

　　無論是單獨處理一個環節，還是整個構建流程，我們都可以很方便的完成。

最後，感謝閱讀。　　PS：歡迎關註，有粉必回。