通过 npm 自动运行 gulp 任务

Posted 2023-03-07

【中文标题】通过 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 也是如此。另外，我不喜欢答案中的第二个选项，它仅用于共享信息。至于第一个选项，它允许我以一种优雅且非常健壮的方式避免全局安装包。