需要 gulpfile 中的另一个文件(不在 node_modules 中)
Require another file in gulpfile (which isn't in node_modules)
我已经使用 gulp 一段时间了,知道如何导入另一个节点模块,例如
var sass = require('gulp-sass');
很好,但是我的 gulp 文件中充满了代码,我想将这些代码移到一个单独的文件中 "require"。具体来说,我正在编写一个 postcss 插件,当在 gulp 文件中声明为函数时,我已经可以使用它了。我的问题是如何将我的函数放在外部文件中并像我做节点模块一样需要它。我是否需要 "export" 所需文件中的函数?我需要使用 ES6 模块或类似的东西吗?
顺便说一句,我意识到如果我正在这样做,我可能会 (A) 将它变成一个合适的节点模块并将其放在私有 NPM 存储库中,但这似乎没有必要,或者 (B) 转它变成一个适当的 gulp 插件,但这需要学习如何编写 gulp 插件并学习流和东西。这两个可能更好,但会花费更多时间,所以我决定暂时只保持功能简单和本地化。
首先新建一个js文件(这里./lib/myModule.js
):
//./lib/myModule.js
module.exports = {
fn1: function() { /**/ },
fn2: function() { /**/ },
}
您还可以将一些参数传递给您的模块:
// ./lib/myAwesomeModule.js
var fn1 = function() {
}
module.exports = function(args) {
fn1: fn1,
fn2: function() {
// do something with the args variable
},
}
然后在你的 gulpfile 中引入它:
//gulpfile.js
var myModule = require('./lib/myModule')
// Note: here you required and call the function with some parameters
var myAwesomeModule = require('./lib/myAwesomeModule')({
super: "duper",
env: "development"
});
// you could also have done
/*
var myAwesomeModuleRequire = require('./lib/myAwesomeModule')
var myAwesomeModule = myAwesomeModuleRequire({
super: "duper",
env: "development"
});
*/
gulp.task('test', function() {
gulp.src()
.pipe(myModule.fn1)
.pipe(myAwesomeModule.fn1)
.gulp.dest()
}
首先,您必须在文件末尾添加 export default <nameOfYourFile>
然后要使用它,写import gulp from 'gulp'
如果出现错误消息,请使用 NPM 安装 babel-core
和 babel-preset-es2015
,并在 .babelrc
配置文件中添加预设 "presets": ["es2015"]
。
我通过安装解决了我的问题:
npm i babel-plugin-add-module-exports
然后我添加 "plugins": [["add-module-exports"]] 到 .babelrc
我已经使用 gulp 一段时间了,知道如何导入另一个节点模块,例如
var sass = require('gulp-sass');
很好,但是我的 gulp 文件中充满了代码,我想将这些代码移到一个单独的文件中 "require"。具体来说,我正在编写一个 postcss 插件,当在 gulp 文件中声明为函数时,我已经可以使用它了。我的问题是如何将我的函数放在外部文件中并像我做节点模块一样需要它。我是否需要 "export" 所需文件中的函数?我需要使用 ES6 模块或类似的东西吗?
顺便说一句,我意识到如果我正在这样做,我可能会 (A) 将它变成一个合适的节点模块并将其放在私有 NPM 存储库中,但这似乎没有必要,或者 (B) 转它变成一个适当的 gulp 插件,但这需要学习如何编写 gulp 插件并学习流和东西。这两个可能更好,但会花费更多时间,所以我决定暂时只保持功能简单和本地化。
首先新建一个js文件(这里./lib/myModule.js
):
//./lib/myModule.js
module.exports = {
fn1: function() { /**/ },
fn2: function() { /**/ },
}
您还可以将一些参数传递给您的模块:
// ./lib/myAwesomeModule.js
var fn1 = function() {
}
module.exports = function(args) {
fn1: fn1,
fn2: function() {
// do something with the args variable
},
}
然后在你的 gulpfile 中引入它:
//gulpfile.js
var myModule = require('./lib/myModule')
// Note: here you required and call the function with some parameters
var myAwesomeModule = require('./lib/myAwesomeModule')({
super: "duper",
env: "development"
});
// you could also have done
/*
var myAwesomeModuleRequire = require('./lib/myAwesomeModule')
var myAwesomeModule = myAwesomeModuleRequire({
super: "duper",
env: "development"
});
*/
gulp.task('test', function() {
gulp.src()
.pipe(myModule.fn1)
.pipe(myAwesomeModule.fn1)
.gulp.dest()
}
首先,您必须在文件末尾添加 export default <nameOfYourFile>
然后要使用它,写import gulp from 'gulp'
如果出现错误消息,请使用 NPM 安装 babel-core
和 babel-preset-es2015
,并在 .babelrc
配置文件中添加预设 "presets": ["es2015"]
。
我通过安装解决了我的问题:
npm i babel-plugin-add-module-exports
然后我添加 "plugins": [["add-module-exports"]] 到 .babelrc