gulp-uglify
将js文件进行压缩
下载:npm i -D gulp-uglify
将js打包插件引入到gulpfile.js文件中
const uglify= require(‘gulp-uglify’)
得到的是处理流文件的函数
在管道函数中直接使用就可以了
注意:不可以使用ES6语法,一旦使用就会发生报错
一个创建一个导出相对应
const jsHandler = function () {
return gulp //这里要加return
.src('./src/js/*js')
.pipe(转换为ES5)
.pipe(uglify())
.pipe(gulp.dest('./dest/js/'))
}
//将js文件打包任务导出
module.exports.jsHandler = jsHandler;
上面使用上面的写法,我们在js中使用ES6语法就会发生错误,所以我们需要在之前我们必须将代码进行转换,转换为ES5
gulp-babel
作用:将ES6代码转换为ES5
gulp-babel存在两个版本:
gulp-babel-7:使用在gulp-3里面的
gulp-babel-8:使用在gulp-4里面的
下载:
gulp-babel依赖另外的两个包:在下载是我们需要两个包一起进行下载
@babel/core @babel/preset-emv
$ npm i -D gulp-babel
$ npm i -D @babel/core
$ npm i -D @babel/preset-emv
导入:
我们导入一个就可以了,其他那两个包会自己进行导入
在gulpfile.js进行导入
const babel= require(‘gulp-babel’)
导入以后得到一个处理流文件的函数
直接在管道函数里执行就好 在pipe中执行,但是需要传递参数
const jsHandler = function () {
return gulp //这里要加return
.src('./src/js/*js')
.pipe(baber({
//如果使用的是baber---7的版本 preset:['es2015']
preset:['@baber/env'] //<------------
}))
.pipe(uglify())
.pipe(gulp.dest('./dest/js/'))
}
//将js文件打包任务导出
module.exports.jsHandler = jsHandler;