gulp打包js多个文件夹并压缩混淆，编译ES6语法，及多个import依赖由一个入口打包成一个cdn

感受和webpack的步骤差很少

首先安装gulp：参考上一篇

安装完以后

新建一个文件目录起名

在当前目录下打开cmd

执行：npm init

建立package.json文件

而后安装第一个插件gulp-uglify

执行：

cnpm install gulp-uglify --save-dev   （这里暂时都用淘宝镜像cnpm）

这时候已经能够开始压缩es5的js文件了，可是咱们要编译es6语法，那就须要babel

执行：

cnpm install gulp-babel --save-dev

编译ES6还须要@babel/core    @babel/preset-env

执行：

cnpm install @babel/core --save-dev
cnpm install @babel/preset-env --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("src/**/*.js")
		.pipe(babel({
             presets: ['@babel/env']
        }))//es6转es5
		.pipe(uglify())
        .pipe(gulp.dest('dist'))
});　

这时候咱们就能够开始打包压缩并编译es6语法的js了

执行：gulp  babejs

ok!编译完成，对比一下编译先后的代码，例子↓

前：

 

 后：

 

 咱们能够看到代码已经压缩，同时也混淆编译成es5了

 good

 -------------------------------------下面进行依赖打包成cdn----------------------------------

咱们能够看到上面有依赖代码并无转化成咱们平时看到的那种单一的js，仍是有模块化

这时候咱们须要一个插件webpack-stream

执行：

cnpm install webpack-stream --save-dev

装好之后在gulpfile.js文件里

这时候咱们都不须要babel和uglify插件了，webpack会自动帮咱们编译而后压缩，想一想仍是webpack简单粗暴

而后执行： gulp onejs

ok！！看看打包后的代码，是否是感受像jquery的源码的那种感受😁