从 gulp 任务运行 npm 脚本答案

【问题标题】：Run a npm script from gulp task从 gulp 任务运行 npm 脚本
【发布时间】：2016-08-05 19:01:55
【问题描述】：

如何从 gulp 任务中运行 npm 脚本命令？

package.json

"scripts": 
{
    "tsc": "tsc -w"
}

gulpfile.js

gulp.task('compile:app', function(){
  return gulp.src('src/**/*.ts')
    .pipe(/*npm run tsc*/)
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());
});

我想这样做是因为运行 npm run tsc 不会给我任何错误，但如果我使用 gulp-typescript 编译 .ts 则会收到一堆错误。

【问题讨论】：

你试过这个插件吗？ npmjs.com/package/gulp-shell ....pipe(shell('npm run tsc'))...
如果你这样做，你会失去incremental compilation
@RGraham 我也不清楚好处。
“gulp-shell 已被列入黑名单（由 Gulp）”引用 BrunoLM 的答案（请参阅 toszter 的答案和评论）

标签： javascript node.js typescript gulp tsc

【解决方案1】：

您可以尝试使用子进程节点包或实现它

使用https://www.npmjs.com/package/gulp-run

var run = require('gulp-run');
gulp.task('compile:app', function(){
  return gulp.src(['src/**/*.js','src/**/*.map'])
    .pipe(run('npm run tsc'))
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());

});

【讨论】：

github.com/sun-zheng-an/gulp-shell 检查这个，这可能适用于最新的节点版本
“gulp-shell 已被列入黑名单（由 Gulp）”引用 BrunoLM 的另一个答案（请参阅 toszter 的答案和评论）

【解决方案2】：

您可以使用gulp-typescript 获得等价物

var gulp = require('gulp');
var ts = require('gulp-typescript');

gulp.task('default', function () {
  var tsProject = ts.createProject('tsconfig.json');

  var result = tsProject.src().pipe(ts(tsProject));

  return result.js.pipe(gulp.dest('release'));
});

gulp.task('watch', ['default'], function() {
  gulp.watch('src/*.ts', ['default']);
});

然后在你的package.json

"scripts": {
  "gulp": "gulp",
  "gulp-watch": "gulp watch"
}

然后运行

npm run gulp-watch

~~或者使用shell~~

var gulp = require('gulp');
var shell = require('gulp-shell');

gulp.task('default', function () {
  return gulp.src('src/**/*.ts')
    .pipe(shell('npm run tsc'))
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());
});

gulp-shell 一直是blacklisted you can see why here

另一种选择是设置webpack。

【讨论】：

如何运行 gulp watch 和 npm start。我试过了，但是在 npm start 上，scss 没有像它应该的那样编译成 css。这是 package.json 中的代码： "start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"gulp\" ",
从命令行运行命令工作正常。使用这个我得到ReferenceError: connect is not defined 但即使在安装gulp-connect 之后，我也得到了 events.js:141 throw er; // 未处理的“错误”事件 ^ 错误：在 onErrorNT ( internal/child_process.js:344:16) at nextTickCallbackWith2Args (node.js:442:9) at process._tickCallback (node.js:356:17) 进程以代码 1 终止。
请注意，gulp-shell 已被gulp 列入黑名单。请改用child_process.exec 或child_process.spawn。见stackoverflow.com/questions/29511491/…

【解决方案3】：

在这个简单的事情上浪费了大约 1 个小时，寻找一个〜完整的答案，所以在这里添加另一个：

如果您的问题仅针对 typescript (tsc)，请参阅 https://stackoverflow.com/a/36633318/984471
否则，请参阅下面的通用答案。

问题标题是通用的，所以下面先给出一个通用的例子，然后是答案。

通用示例：

安装 nodejs，如果你还没有，最好是 LTS 版本，从这里：https://nodejs.org/
在下面安装：

npm install --save-dev gulp gulp-run
文件package.json有以下内容（其他内容也可以）：

{
      "name": "myproject",
      "scripts": {
          "cmd1": "echo \"yay! cmd1 command is run.\" && exit 1",
      }
}

创建一个文件gulpfile.js，内容如下：

var gulp = require('gulp');
var run = require('gulp-run');

gulp.task('mywatchtask1', function () {
    // watch for javascript file (*.js) changes, in current directory (./)
    gulp.watch('./*.js', function () {

        // run an npm command called `test`, when above js file changes
        return run('npm run cmd1').exec();

        // uncomment below, and comment above, if you have problems
        // return run('echo Hello World').exec();
    });
});

使用gulp运行任务mywatchtask1？

gulp mywatchtask1

现在，gulp 正在监视当前目录中的 js 文件更改
如果发生任何更改，则运行 npm 命令cmd1，每当其中一个 js 文件更改时，它将打印yay! cmd1 command is run.。

对于这个问题：再举一个例子：

a) package.json 将有

"tsc": "tsc -w",

而不是下面的：

"cmd1": "echo \"yay! cmd1 command is run.\" && exit 1",

b) 并且，gulpfile.js 将有：

return run('npm run tsc').exec();

而不是下面：

return run('npm run cmd1').exec();

希望对您有所帮助。

【讨论】：