Javascript 从 gulp 任务运行 npm 脚本

Run a npm script from gulp task

提问by lbrahim

How to run a npm script command from inside a gulp task?

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

package.json

包.json

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

gulpfile.js

gulpfile.js

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

I want to do this because running npm run tscdoes not give me any error but if I use gulp-typescriptto compile .tsthen I get bunch of errors.

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

采纳答案by BrunoLM

You can get the equivalent using gulp-typescript

您可以使用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']);
});

Then on your package.json

然后在你的 package.json

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

Then run

然后运行

npm run gulp-watch

---

---

Alternatively using 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());
});

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-shellhas been blacklisted you can see why here

gulp-shell已被列入黑名单你可以在这里看到原因

Another alternative would be setting up webpack.

另一种选择是设置webpack.

回答by LazyDeveloper

You can try to implement it using childprecess node package or

您可以尝试使用 childprecess 节点包或

use https://www.npmjs.com/package/gulp-run

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

});

回答by Manohar Reddy Poreddy

Wasted about 1 hour on this simple thing, looking for a ~complete answer, so adding another here:

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

If you question is only on typescript (tsc), see https://stackoverflow.com/a/36633318/984471
Else, see below for a generic answer.

如果您的问题仅在打字稿 (tsc) 上，请参阅https://stackoverflow.com/a/36633318/984471
其他，请参阅下面的通用答案。

The question title is generic, so a generic example is given below first, then the answer.

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

Generic example:

通用示例：

1. Install nodejs, if you haven't, preferably LTS version, from here: https://nodejs.org/

2. Install below:

   npm install --save-dev gulp
npm install --save-dev gulp-run

3. File package.jsonhas below contents (other contents can be there):

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

2. 安装如下：

   npm install --save-dev gulp
npm install --save-dev gulp-run

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

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

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

1. Create a file gulpfile.jswith below contents:

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();
  });
});

`

`

1. Run the task mywatchtask1using gulp?

   gulp mywatchtask1

4. 运行任务mywatchtask1使用gulp？

   gulp mywatchtask1

Now, gulp is its watching for js file changes in the current directory
if any changes happen then the npm command cmd1is run, it will print yay! cmd1 command is run.everytime the one of the js file changes.

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

For this question:as another example:

对于这个问题：作为另一个例子：

a) package.jsonwill have

a)package.json会有

"tsc": "tsc -w",

instead of the below:

而不是以下：

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

b) and, gulpfile.jswill have:

b) 并且，gulpfile.js将有：

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

instead of below:

而不是下面：

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

Hope that helps.

希望有帮助。