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

简介: Gulp 打包压缩 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,基础库,如果不安装全局会报错 # zsh: command not found: gulp
$ npm i -g gulp
# 安装项目 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
// 基础库
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 任务名

相关文章
|
8天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
15 0
|
21天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
2月前
|
JavaScript
uni-app中关于格式化时间的js文件
uni-app中关于格式化时间的js文件
32 0
|
3月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
60 0
|
3月前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
3月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
|
2月前
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
21 0
|
2天前
|
Rust JavaScript 安全
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
|
2天前
|
运维 JavaScript Java
Serverless 应用引擎产品使用之阿里云Serverless函数计算中,在Node.js环境中执行jar文件如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
9 0
|
14天前
|
JavaScript
node.js 删除某个目录下所有的文件夹
node.js 删除某个目录下所有的文件夹
14 0