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 任务名

相关文章
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
740 1
|
2月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
45 0
|
29天前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
113 2
前端JS读取文件内容并展示到页面上
|
2月前
|
JavaScript 中间件 Shell
Node.js JXcore 打包
10月更文挑战第8天
37 1
|
3月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
192 17
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
183 0
|
2月前
|
前端开发 JavaScript 开发者
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器
|
3月前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5