web-dev-qa-db-ja.com

gulpタスクからnpmスクリプトを実行する

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その後、大量のエラーが発生します。

javascriptnode.jstypescriptgulptsc
13
lbrahim

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をセットアップすることです。

11
BrunoLM

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

});
6
LazyDeveloper

この簡単なことで約1時間無駄になりました。

質問がTypeScript（tsc）のみにある場合は、 https://stackoverflow.com/a/36633318/984471 を参照してください
その他、一般的な回答については以下をご覧ください。

質問のタイトルは一般的なものであるため、最初に一般的な例を示し、次に回答を示します。

一般的な例：

  1. ここから、できればLTSバージョンをお持ちでない場合は、nodejsをインストールします。 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が実行され、yay! cmd1 command is run.いずれかのjsファイルが変更されるたび。

この質問：別の例として：

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

それが役に立てば幸いです。

1
Manohar Reddy Poreddy