Gulp gulpfile.js 模块化

🌙
手机阅读
本文目录结构

Gulpfile 模块化

大部分用户起初是将所有业务逻辑都写到一个 gulpfile 文件中。随着文件的变大,无论怎么重构都会显得很臃肿;

如果 task 较多或者较复杂,可以创建 gulpfile.js 目录,在目录中拆分 task 为多个文件,只要保证该目录下有个 index.js 作为入口即可。

每个任务(task)可以被分割为独立的文件,然后导入到 gulpfile 文件中并组合,这样的方式。这不仅使事情变得井然有序,而且可以对每个任务(task)进行单独测试,或者根据条件改变组合。

步骤如下

  • 创建 gulpfile.js 的目录,
  • 该目录中创建一个名为 index.js 的文件,该文件被当作 gulpfile.js 使用。
  • 该目录中还可以包含各个独立的任务(task)模块。

gulpfile.js/index.js

代码如下

  1. // test.js 文件内像传统gulpfile.js一样的写法
  2. const test = require('./test');
  3. exports.default = function () {
  4. // 使用 test 下的默认任务
  5. return test.default()
  6. }

gulpfile.js/test.js

代码如下

  1. const { src, dest } = require('gulp');
  2. // babel
  3. // npm install --save-dev gulp-babel @babel/core @babel/preset-env
  4. const babel = require('gulp-babel');
  5. const uglify = require('gulp-uglify');
  6. const rename = require('gulp-rename');
  7. exports.default = function () {
  8. return src('src/*.js')
  9. // 把 src 下面的文件经过babel转义
  10. .pipe(babel({
  11. presets: ['@babel/env']
  12. }))
  13. // 添加vendor下的文件
  14. .pipe(src('vendor/*.js'))
  15. // 把源文件移动到output/
  16. .pipe(dest('output/'))
  17. .pipe(uglify())
  18. // 把源文件,改为`.mini.js` 移动到output
  19. .pipe(rename({ extname: '.min.js' }))
  20. .pipe(dest('output/'));
  21. }

运行的如下

https://a.axihe.com/npm/gulp/WX20200614-155415.png

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了