主篇 前端 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 任务名