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

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

安裝：

　　cnpm: cnpm i gulp-uglify -D

　　yarn: yarn add gulp-uglify -D

 

使用：

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

var gulp = require('gulp');
var uglify = require('gulp-uglify');
 
gulp.task("uglify",function(){
    gulp
        .src('js/index.js')       // 源文件
        .pipe(uglify())           // 使用插件
        .pipe(gulp.dest('dist')) // 設定輸出目錄
})

 

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

 

gulp-rename:重命名插件

安裝：

　　cnpm: cnpm i gulp-rename -D

　　yarn: yarn add gulp-rename -D

基本使用：

var gulp = require('gulp');
var rename = require('gulp-rename')

gulp.task('rename',function(){
  console.log('開始重命名JS.....');
  gulp
    .src('js/index.js')  // 源
    // 1、字符串：適用於單文件重命名
     .pipe(rename('index.min.js'))
    // 2、函數：適用於需要進行判斷的多文件重命名
     .pipe(rename(function(path){ //（可以打印一下path看下里面的內容，方便理解） 12          path.dirname ='./js'    // 輸出目錄的dist下目錄名稱
         path.basename  +='.min'  // 文件名
         path.extname='.min.js'     // 后綴名（文件名和后綴名選擇一個進行配置）
        
     })) 

    // 3、對象：適用於多文件（推薦使用）
   .pipe(rename({
        dirname: "./js",  // 輸出目錄的dist下目錄名稱
        basename: "",          // 文件名
        prefix: "前綴-",         // 文件名前綴
        suffix: "-后綴",            // 文件名后綴
        extname: ".md"              // 擴展名
    }))
    .pipe(gulp.dest('dist')) // 輸出目錄
})

 

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

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");

 
gulp.task("uglify",function(){
    gulp
        .src('js/index.js')       // 源
        .pipe(uglify())           // 使用壓縮插件
        .pipe(rename({
            dirname: "./js",       //輸出到輸出目錄下的js目錄下
            suffix: ".min",            // 給文件名加后綴
        }))
        .pipe(gulp.dest('dist')) // 設定輸出目錄
})

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

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

 

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

 gulp.src('js/*.js')  //將會匹配js下所有的js文件  

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

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

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
 
gulp.task("uglify",function(){
    gulp
        .src("js/**/*.js")  //匹配js文件夾下的所有js文件
        .pipe(uglify())//壓縮文件
        .pipe(rename({
            suffix:".min"   //給所有的文件名加上后綴.min
        }))
        .pipe(gulp.dest("dist"))   //輸出到dist文件夾下面
})

事情進行到這里，已經完成了很大一部分我們的需求了，那么接下來我們再來搞定可以支持壓縮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壓縮

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
const babel = require('gulp-babel');

 
gulp.task("uglify",function(){
    gulp
        .src("js/**/*.js")
        .pipe(babel({
            presets: ['@babel/env']
        }))//es6轉es5
        .pipe(uglify())
        .pipe(rename({
            suffix:".min"
        }))
        .pipe(gulp.dest("dist"))
})

好了，現在我們的目標已經實現了，你完全可以自己發揮自己的想象力去任意壓縮js文件了！