Front-end program code encryption tutorial

sequence

　　We all know that you can see the front of html and js code on the browser, so if you encounter privacy Heart relatively strong boss, you'll receive a code that will rather abruptly encrypted demand, when demand received this time how you finish? I hope I can help to you in this blog.

　　In order to ensure real this tutorial is available, I'll use a new Windows system, a presentation from scratch, while the operational processes documented here for your reference, also want to be able to help you skip some pit, if you encounter any questions, please leave a message discussion.

Installation NodeJs

　　If you have not installed node, please follow the tutorial to go, if you have installed, skip to the next section directly.

　　Download: http: //nodejs.cn/download/

　　Direct download and install, the installation process is a fool's next, the only change is the installation location.

　　After the installation is complete, open cmd command line, check the version number in order to confirm whether the installation was successful.

Install plug

　　Switch to the root directory of the project:

　　Installation gulp plugin package: NPM-dev gulp the install --save

　　The effect is as:

　　Do not worry, there are a lot of packages, a brush up a command:

　　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：欢迎关注，有粉必回。