阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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

    代码如下

    // 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

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录