通过 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 -- --watchnpm 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接口时直接调用它,而不是与其他任何东西结合,或者引入一个接口来隐藏另一个接口。 gruntnpm 也是如此。另外,我不喜欢答案中的第二个选项,它仅用于共享信息。至于第一个选项,它允许我以一种优雅且非常健壮的方式避免全局安装包。

以上是关于通过 npm 自动运行 gulp 任务的主要内容,如果未能解决你的问题,请参考以下文章

在 NPM 包安装后运行 gulp 任务,无需任何命令

自动化构建工具gulp

实用教程|使用gulp进行简单的自动化运行调试

npm ande gulp cmd

如何使用来自 VSCode 的 npm run 脚本进行调试?

[译] Gulp 4 入门指南