前端項目代碼加密教程

序

　　咱們都知道，瀏覽器上是能夠看到前端的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：歡迎關注，有粉必回。