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看下里面的内容，方便理解）
         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文件了！