Gulp gulpfile.js 模块化

🌙
手机阅读
本文目录结构
axihe

Gulpfile 模块化

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

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

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

步骤如下

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

gulpfile.js/index.js

代码如下

// test.js 文件内像传统gulpfile.js一样的写法
const test = require('./test');

exports.default = function () {
  // 使用 test 下的默认任务
  return test.default()
}

gulpfile.js/test.js

代码如下

const { src, dest } = require('gulp');
// babel
// npm install --save-dev gulp-babel @babel/core @babel/preset-env
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function () {
  return src('src/*.js')
    // 把 src 下面的文件经过babel转义
    .pipe(babel({
      presets: ['@babel/env']
    }))
    // 添加vendor下的文件
    .pipe(src('vendor/*.js'))
    // 把源文件移动到output/
    .pipe(dest('output/'))
    .pipe(uglify())
    // 把源文件,改为`.mini.js` 移动到output
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

运行的如下

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang