gulp-uglify：壓縮js大小，只支持es5

安裝：

　　cnpm: cnpm i gulp-uglify -D

　　yarn: yarn add gulp-uglify -D

使用：

代碼實現1：壓縮js文件夾下的index.js文件輸出到dist文件夾下面（註意要壓縮的js文件中此處只能使用es5）

1 var gulp = require(‘gulp‘);
2 var uglify = require(‘gulp-uglify‘);
3  
4 gulp.task("uglify",function(){
5     gulp
6         .src(‘js/index.js‘)       //
 
 源文件
7         .pipe(uglify())           // 使用插件
8         .pipe(gulp.dest(‘dist‘)) // 設定輸出目錄
9 })

這只是一個簡單的js文件壓縮，如果我們需要輸出到另一個文件夾中並重命名該怎麽辦？接下來我們的gulp-rename插件粉墨登場！！

gulp-rename:重命名插件

安裝：

　　cnpm: cnpm i gulp-rename -D

　　yarn: yarn add gulp-rename -D

基本使用：

 1 var gulp = require(‘gulp‘);
 
 2 var rename = require(‘gulp-rename‘)
 3 
 4 gulp.task(‘rename‘,function(){
 5   console.log(‘開始重命名JS.....‘);
 6   gulp
 7     .src(‘js/index.js‘)  // 源
 8     // 1、字符串：適用於單文件重命名
 9      .pipe(rename(‘index.min.js‘))
10     // 2、函數：適用於需要進行判斷的多文件重命名
11      .pipe(rename(function(path){ //（可以打印一下path看下裏面的內容，方便理解）
 
12          path.dirname =‘./js‘    // 輸出目錄的dist下目錄名稱
13          path.basename  +=‘.min‘  // 文件名
14          path.extname=‘.min.js‘     // 後綴名（文件名和後綴名選擇一個進行配置）
15         
16      })) 
17 
18     // 3、對象：適用於多文件（推薦使用）
19    .pipe(rename({
20         dirname: "./js",  // 輸出目錄的dist下目錄名稱
21         basename: "",          // 文件名
22         prefix: "前綴-",         // 文件名前綴
23         suffix: "-後綴",            // 文件名後綴
24         extname: ".md"              // 擴展名
25     }))
26     .pipe(gulp.dest(‘dist‘)) // 輸出目錄
27 })

代碼實現2：壓縮js文件夾下的index.js文件輸出到dist文件夾下面，並重命名為index.min.js

 1 var gulp = require(‘gulp‘);
 2 var uglify = require(‘gulp-uglify‘);
 3 var rename = require("gulp-rename");
 4 
 5  
 6 gulp.task("uglify",function(){
 7     gulp
 8         .src(‘js/index.js‘)       // 源
 9         .pipe(uglify())           // 使用壓縮插件
10         .pipe(rename({
11             dirname: "./js",       //輸出到輸出目錄下的js目錄下
12             suffix: ".min",            // 給文件名加後綴
13         }))
14         .pipe(gulp.dest(‘dist‘)) // 設定輸出目錄
15 })

　　那麽，現在又會出現一個問題，我如果想壓縮不同目錄下的js文件又該怎麽辦，或者說我想壓縮的js文件中有es6，那又怎麽辦，別著急，我們先來解決壓縮不同目錄下的js文件，那麽我們又將遇到一個老朋友‘*’，是不是很熟悉，通配符，css中是不是經常會使用到，這裏我們也可以使用*和**來進行通配。

　　*匹配字符，**匹配字符包括“/”也就是目錄，你是不是有想法了？

我們此處將在 gulp.src(‘js/index.js‘) 處做文章

1  gulp.src(‘js/*.js‘)  //將會匹配js下所有的js文件  
2 
3  gulp.src(‘js/**/*.js‘)  //將會匹配js下所有目錄下的js文件 ，不管你的目錄有多深，只有你在js文件夾下面，只有你裏面包含js文件，使用這種辦法都會被匹配到 

代碼實現3：壓縮js文件夾下的所有的js文件輸出到dist文件夾下面，並每個js文件名後都加上.min

 1 var gulp = require(‘gulp‘);
 2 var uglify = require(‘gulp-uglify‘);
 3 var rename = require("gulp-rename");
 4  
 5 gulp.task("uglify",function(){
 6     gulp
 7         .src("js/**/*.js")  //匹配js文件夾下的所有js文件
 8         .pipe(uglify())//壓縮文件
 9         .pipe(rename({
10             suffix:".min"   //給所有的文件名加上後綴.min
11         }))
12         .pipe(gulp.dest("dist"))   //輸出到dist文件夾下面
13 })

事情進行到這裏，已經完成了很大一部分我們的需求了，那麽接下來我們再來搞定可以支持壓縮es6的問題，這裏我們又使用到了一個插件gulp-babel插件

gulp-babel:可以將ES6代碼轉為ES5代碼

安裝：

　　cnpm: cnpm i gulp-babel -D

　　yarn: yarn add gulp-babel -D

代碼實現4：壓縮js文件夾下的所有的js文件輸出到dist文件夾下面，並每個js文件名後都加上.min，並且支持es6壓縮

 1 var gulp = require(‘gulp‘);
 2 var uglify = require(‘gulp-uglify‘);
 3 var rename = require("gulp-rename");
 4 const babel = require(‘gulp-babel‘);
 5 
 6  
 7 gulp.task("uglify",function(){
 8     gulp
 9         .src("js/**/*.js")
10         .pipe(babel({
11             presets: [‘@babel/env‘]
12         }))//es6轉es5
13         .pipe(uglify())
14         .pipe(rename({
15             suffix:".min"
16         }))
17         .pipe(gulp.dest("dist"))
18 })

好了，現在我們的目標已經實現了，你完全可以自己發揮自己的想象力去任意壓縮js文件了，下一節我們將來看看怎麽壓縮less和css

gulp插件實現壓縮一個文件夾下不同目錄下的js文件（支持es6）