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文件了!