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的源碼的那種感受😁