uniapp vue js代码压缩混淆，es6自动编译

1.首先安装gulp

npm install gulp -g  全局安装gulp

2.在当前目录下打开cmd    执行：npm init   创建package.json文件   然后安装第一个插件gulp-uglify

cnpm install gulp-uglify --save-dev 

3.这时候已经可以开始压缩es5的js文件了，但是我们要编译es6语法，那就需要babel

cnpm install gulp-babel --save-dev
cnpm install @babel/core --save-dev
cnpm install @babel/preset-env --save-dev

4.　这时候我们需要的插件都安装好了，下面就差个入口的配置文件了

　　在当前目录下新建gulpfile.js的文件，文件内容如下↓

//1.这个gulp对象就可以配合插件来进行构建工作.
const gulp = require('gulp');
 
//2.引入gulp-uglify模块.返回的是1个函数.
const uglify = require('gulp-uglify');
 
//3.引入babel
const babel = require('gulp-babel');
 
gulp.task('babeljs', async function() {
    gulp.src("src/**/*.js")
        .pipe(babel({
             presets: ['@babel/env']
        }))//es6转es5
        .pipe(uglify())
        .pipe(gulp.dest('dist'))
});　

5. 执行：gulp  babeljs进行压缩混淆

我们可以看到代码已经压缩，同时也混淆编译成es5了

---------------------------如果你想压缩成一个入口文件看下方-----------------------------------------------

 

6.如果想要压缩成一个入口文件  这时候我们需要一个插件webpack-stream

cnpm install webpack-stream --save-dev

装好以后在gulpfile.js文件里

//1.这个gulp对象就可以配合插件来进行构建工作.
const gulp = require('gulp');
 
//2.引入gulp-uglify模块.返回的是1个函数.
const uglify = require('gulp-uglify');
 
//3.引入babel
const babel = require('gulp-babel');

gulp.task('babeljs', async function() {
    gulp.src("uni_modules/lz-unicloud/**/*.js")
        .pipe(babel({
             presets: ['@babel/env']
        }))//es6转es5
        .pipe(uglify())
        .pipe(gulp.dest('aaa'))
});

//这个是打包成一个文件的
const webpack= require('webpack-stream');
gulp.task('onejs', async function() {
    gulp.src("uni_modules/lz-unicloud/**/*.js")
        .pipe(babel({
             presets: ['@babel/env']
        }))//es6转es5
        .pipe(webpack())
        .pipe(gulp.dest('aaa'))
});　

 

这时候我们都不需要babel和uglify插件了，webpack会自动帮我们编译然后压缩，想想还是webpack简单粗暴

然后执行： gulp onejs