通过 npm 自动运行 gulp 任务
Posted
技术标签:
【中文标题】通过 npm 自动运行 gulp 任务【英文标题】:Automatic run gulp tasks via npm 【发布时间】:2015-01-20 14:17:37 【问题描述】:我通常通过 npm 运行 gulp,例如在我的 package.json 中
"scripts":
"test": "gulp test",
"minify": "gulp minify"
然后我可以运行诸如
之类的命令npm run minify
这没关系,但是每次我的 gulpfile 中有新任务时,我都需要将它们添加到脚本部分下的 package.json 中,有没有更好的方法呢?
原因:我只将npm全局安装到我的path
,所以所有其他模块都不会污染我的path
,所以我需要通过npm
脚本运行它们
【问题讨论】:
那么您为什么使用npm run
而不是正常方式?这些信息可以帮助您了解您真正想要实现的目标
我只全局安装 npm,所以 npm 在我的路径中,我不想 gulp 污染我的路径,所以我通过 npm 运行 gulp。
为什么不直接运行gulp呢?
【参考方案1】:
我有没有请客:我继续为您制作了一个简单的 npm 模块来处理这个问题。
gulp-npm-script-sync
这里是它的要点:
var file = fs.readFileSync(config.path || 'package.json', 'utf-8');
var pkg = JSON.parse(file);
var tasks = gulp.tasks;
pkg.scripts = pkg.scripts || ;
Object.keys(tasks).forEach(function (t)
pkg.scripts[t] = 'gulp '+tasks[t].name;
);
full source 会使用相同的缩进和内容将 package.json 写回。
所以,继续吧:npm install --save-dev gulp-npm-script-sync
将其粘贴到您的 gulpfile 中:
var gulp = require('gulp');
var sync = require('gulp-npm-script-sync');
// your gulpfile contents
sync(gulp);
每次您使用新任务更新 gulpfile 时,它都会更新您的 package.json。
您甚至可以将其放入 gulp 任务中:
gulp.task('sync', function ()
sync(gulp);
【讨论】:
我认为 Roman 下面的答案更优雅,并且您可以少一点开发依赖。 我同意。例如,我经常使用npm run webpack -- --watch
或npm run webpack -- -d
。【参考方案2】:
Brian Brennan 给了a fantastic suggestion:添加
./node_modules/.bin
到您的$PATH
变量。 然后就可以在本地运行了 安装的实用程序,只要您位于 项目。
来源:Keeping clean。
无需全局安装包即可轻松调用它。请记住,上面的路径应该是前置。
另外,从 2.0.0 版开始,npm
提供了向我们的运行命令传递额外参数的能力。这些参数将被简单地附加到您的脚本命令中。
在您的情况下,您的package.json
中的以下脚本:
"scripts":
"gulp": "gulp"
,
可以调用为npm run gulp -- test
,或npm run gulp -- minify
等。
【讨论】:
对于那些在 Windows 下难以安装npm@2.0.0
的人的提示:从 node.js 文件夹中执行 npm update npm
(例如,C:\Program Files (x86)\nodejs
)。这可能需要管理员权限。
在清单中定义脚本的美妙之处在于您创建了一个通用 api。 npm run build
可以触发 gulp 或 grunt 任务或其他任何事情。随着项目的发展,您可以更改实施。界面保持不变,并将继续工作。在这种情况下,您也不需要向 $PATH 添加任何内容,您可以简单地执行以下操作:"scripts": "build": "./node_modules/.bin/gulp build"
.
@Jasper 是的,额外的间接级别可以带来好处。但是,通常不需要替换构建系统,任何间接性也有成本。我个人更喜欢在项目中使用gulp
接口时直接调用它,而不是与其他任何东西结合,或者引入一个接口来隐藏另一个接口。 grunt
和 npm
也是如此。另外,我不喜欢答案中的第二个选项,它仅用于共享信息。至于第一个选项,它允许我以一种优雅且非常健壮的方式避免全局安装包。以上是关于通过 npm 自动运行 gulp 任务的主要内容,如果未能解决你的问题,请参考以下文章