从gulp任务运行npm脚本

时间:2016-04-14 09:49:27

标签: javascript node.js typescript gulp tsc

如何从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那么我就会收到大量错误。

3 个答案:

答案 0 :(得分:11)

您可以使用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-shellblacklisted you can see why here

另一种选择是设置webpack

答案 1 :(得分:6)

您可以尝试使用childprecess node package或

来实现它

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

});

答案 2 :(得分:0)

在这个简单的事情上浪费了大约1个小时,寻找一个完整的答案,因此在这里添加另一个:

如果您仅在打字稿(tsc)上提问,请参阅https://stackoverflow.com/a/36633318/984471
否则,请参见下面的通用答案。

问题标题是通用的,因此下面首先给出通用示例,然后给出答案。

通用示例:

  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", } }

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

`

  1. 使用mywatchtask1运行任务gulp吗?

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

希望有帮助。

相关问题