gulp插件实现压缩一个文件夹下不同目录下的js文件(支持es6)

Posted nanxiaoge

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)

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)的主要内容,如果未能解决你的问题,请参考以下文章

使用 gulp 压缩图片

gulp webpack 区别

gulp提取公用部分

gulp学习笔记2

gulp打包js多个文件夹并压缩混淆,编译ES6语法

gulp 项目构建 代码压缩与混淆