Gulp 打包压缩 js 文件到指定目录详细流程（修改文件名与后缀）

主篇 前端 Gulp 详细介绍与案例使用。

打包 index.js 测试内容

js 包内容文件：

// 测试属性
export const dzmName = 'dzm'
export const dzmAge = 18// 测试方法
export function dzmFunc (name, age) {return `名字：${name}，年龄：${age}`
}

ts 声明文件：

// 声明测试属性
export const dzmName: string;
export const dzmAge: number;// 声明测试方法
export function dzmFunc (name: string, age: number): string;

安装依赖库

# 安装 gulp，基础库
$ npm i -D gulp# 安装 gulp-uglify，JS 压缩
$ npm i -D gulp-uglify# 安装 gulp-babel，ES6 转 ES5
$ npm i -D gulp-babel# 安装 @babel/core @babel/preset-env，gulp-babel 需要依赖这两个包
$ npm i -D @babel/core @babel/preset-env# 安装 gulp-clean，清空文件夹
$ npm i -D gulp-clean

根目录新建 gulpfile.js（附：gulp 常用依赖库）

// 基础库
const gulp = require('gulp')
// ES6 转 ES5
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
// 文件重命名
const rename = require('gulp-rename')
// 清空文件夹
const clean = require('gulp-clean')// 删除文件夹
gulp.task('clean', function () {return gulp// read：是否读取文件，true 读取， false 不读取，加快程序// allowEmpty：允许文件夹为空或不存在，要不然会报错.src('./dist/', { read: false, allowEmpty: true })  .pipe(clean());
})// 打包 JS 任务
gulp.task('build', function () {return gulp.src('./js/*.js')               // 定位需要压缩的 JS 文件// .pipe(babel({                // ES6 转 ES5，看需求而定//   presets: ['@babel/env']// })).pipe(uglify())                 // 文件压缩.pipe(rename(function (path) {  // 文件重命名path.basename ='index'path.extname = ".min.js"})).pipe(gulp.dest('./dist/'))     // 输出
})// 发布文件移动
gulp.task('move', function () {return gulp.src('./js/*').pipe(gulp.dest('./dist/'))
})// 配置默认任务
// module.exports.default = gulp.series('clean', 'build')
gulp.task('default', gulp.series('clean', 'build', 'move'))

执行命令

# 默认走 default 任务
$ gulp# 指定任务名
$ gulp 任务名