Run a npm script from gulp task

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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

});