将gulp-file分成几个文件

Posted 2021-04-20

我想将一个大gulp文件分成几个文件。 其中一些文件应该包含gulp-tasks，其他文件包括 - 原始函数，第三文件 - 两者。 我该怎么做？ 我试图用几个文件创建目录，有些像这样：

gulpfile.js
gulp/
├── css_tasks.js
└── js_tasks.js

然后在require-dir中使用gulpfile.js：

require('require-dir')('./gulp');

它运行良好，但此方法只允许使用所需目录中的任务。 但这还不够。 另外，我想使用其他文件中的原始函数，有些类似：

gulpfile.js
gulp/
├── common_methods.js
├── css_tasks.js
└── js_tasks.js

并以这种方式使用它：

/* css_tasks.js: */

gulp.task('some_css_task', function() {
   var foo = someCommonMethod();
   /* task stuff */
})

和

/* js_tasks.js: */

gulp.task('some_js_task', function() {
   var boo = anotherCommonMethod();
   /* task stuff */
})

那么，我该怎么做呢？

答案

根据require-dir模块，它根据您的目录结构返回一个对象。

{
  a: require('./a'),
  b: require('./b')
}

所以我建议为你的js和css“gulp-task-files”创建文件夹。所以结构可以是下一个：

gulp/
├── common_methods.js
├── css/index.js
└── js/index.js

然后在你的gulpfile你应该分别要求css和js文件夹，如：

const js = require('require-dir')('./gulp/js');
const css = require('require-dir')('./gulp/css');

它将允许你有common_methods.js文件，可以在这些（js和css）任务文件夹之间共享＆common_methods.js将不会通过require-dir导出

UPDATE

// common_methods.js
function method1(){}
function method2(){}

module.exports = {
  foo: method1,
  baz: method2
}

// js/index.js
const foo = require('../common_methods').foo;

// css/index.js
const baz = require('../common_methods').baz;

希望它有意义。