javascript - Run a npm script from gulp task - Stack Overflow

admin管理员组

文章数量:1173665

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

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

I want to do this because running npm run tsc does not give me any error but if I use gulp-typescript to compile .ts then I get bunch of errors.

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

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

I want to do this because running npm run tsc does not give me any error but if I use gulp-typescript to compile .ts then I get bunch of errors.

• javascript
• node.js
• typescript
• gulp
• tsc

• 1 Have you tried this plugin? npmjs.com/package/gulp-shell ....pipe(shell('npm run tsc'))... – Raul Fernandez Commented Apr 14, 2016 at 9:54
• 1 You'll lose incremental compilation if you do that though – CodingIntrigue Commented Apr 14, 2016 at 9:56
• @RGraham I am not clear on the benefits either. – lbrahim Commented Apr 14, 2016 at 10:13
• "gulp-shell has been blacklisted (by Gulp)" quoting the answer from BrunoLM (see its answer and comment by toszter) – FelipeAls Commented Sep 20, 2018 at 8:06

3 Answers 3

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

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

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 gulp-run

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

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

3. Create a file gulpfile.js with below contents:

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. Run the task mywatchtask1 using gulp?

   gulp mywatchtask1

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

For this question: as another example:

a) package.json will have

"tsc": "tsc -w",

instead of the below:

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

b) and, gulpfile.js will have:

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

instead of below:

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

Hope that helps.

You can get the equivalent using 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

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

gulp-shell has been blacklisted you can see why here

Another alternative would be setting up webpack.

You can try to implement it using childprecess node package or

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

});

本文标签： javascriptRun a npm script from gulp taskStack Overflow