从gulp任务中运行npm脚本

Question

如何从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文件，会出现一堆错误。

- lbrahim

---

你试过这个插件吗？ https://www.npmjs.com/package/gulp-shell....pipe(shell('npm run tsc'))... - Raul Fernandez

如果这样做，您将失去增量编译。 - CodingIntrigue

@RGraham 我也不清楚它的好处。 - lbrahim

"gulp-shell已被Gulp列入黑名单" 引用BrunoLM的答案（请参见其回答和toszter的评论） - FelipeAls

Answer 1

你可以使用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已被列入黑名单，可以在这里看到原因

另一个选择是设置webpack。

- BrunoLM

---

我该如何在npm start命令中运行gulp watch？我尝试过了，但是在npm start命令执行时，scss文件没有像应该一样编译成css文件。这是package.json中的代码："start": "concurrently "npm run tsc:w" "npm run lite" "gulp"" - Peter

在命令行中运行该命令正常。但是使用此方法，我得到了“ReferenceError: connect is not defined”的错误，即使我安装了“gulp-connect”，我仍然得到了“events.js：141 throw er; //未处理的'error'事件^ Error：spawn npm run buildng ENOENT”的错误。 在util.js:907:11处exports._errnoException 在internal/child_process.js:178:32处Process.ChildProcess._handle.onexit 在internal/child_process.js:344:16处onErrorNT 在node.js:442:9处nextTickCallbackWith2Args 在node.js:356:17处process._tickCallback 进程以代码1终止。 - Serj Sagan

请注意，gulp-shell已被gulp列入黑名单。请改用child_process.exec或child_process.spawn。请参见https://dev59.com/3F0b5IYBdhLWcg3wLOnP。 - 4Z4T4R

Answer 2

在这个简单的问题上浪费了大约1小时的时间，寻找一个完整的答案，所以在这里添加另一个答案:

如果你的问题仅与typescript (tsc)有关，请参见https://dev59.com/E1oV5IYBdhLWcg3wJ8HD#36633318。否则，请参见下面的通用答案。

问题标题很通用，因此首先给出一个通用示例，然后再给出答案。

通用示例：

1. 从此处安装nodejs（如果您还没有安装），最好使用LTS版本：https://nodejs.org/

2. 安装以下内容：

   npm install --save-dev gulp gulp-run

3. 文件package.json具有以下内容（可能有其他内容）：

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

3. 创建一个名为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();
    });
});

4. 使用 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();

希望这能有所帮助。

- Manohar Reddy Poreddy

Answer 3

你可以尝试使用childprecess节点包来实现，或者使用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());

});

- LazyDeveloper

---

请查看 https://github.com/sun-zheng-an/gulp-shell ，它可能适用于最新的Node版本。 - LazyDeveloper

"gulp-shell已被Gulp列入黑名单" 引用BrunoLM的另一个答案（请参见其答案和toszter的评论） - FelipeAls