CODEWITHSUNDEEP
typescriptgulpvisual-studio-2015gulp-watchgulp-newer
raberana
raberana

Reputation: 11816

Gulp-watch typescript files and publish only changed files

In Visual Studio 2015, I am tracking the changes done on my TS files so that I can copy the generated JS files and output them to my wwwroot directory. However, whenever I do a change on a single TS file, all of them are built and outputted to the wwwroot folder. What should i change here so that only new JS files are copied to wwwroot?

I use gulp-watch to track the file changes and gulp-newer to filter the new files.

gulp.task('min:site:js', function () {
return gulp
  .src('Contents/Scripts/**/*.js', { relative: true })
  .pipe(newer('wwwroot/js/'))
  .pipe(gulp.dest('wwwroot/js/'))
  .pipe(uglify())
  .pipe(rename({ extname: '.min.js' }))
  .pipe(gulp.dest('wwwroot/js/'));
});

gulp.task('watch:ts', function () {
   gulp.watch('Contents/Scripts/**/*.ts', ['min:site:js']);
});

Upvotes: 4

Views: 7975

Answers (1)

amin
amin

Reputation: 3852

gulp.watch has two main forms. Both of which return an EventEmitter that emits change events. The first of which takes a glob, an optional options object, and an array of tasks as it’s parameters.

gulp.watch('Contents/Scripts/**/*.ts', ['min:site:js']);

Simply put, when any of the files matched by the glob change, run the tasks. In the above code block, when any files in theContents/Scripts/**/*.ts subfolders that have an extension of .ts change, then the task min:site:js will be run against those files.

The second form takes the glob, an optional options object, and an optional callback that will run when a change is picked up.

For more information refer to the api docs

Use gulp-typescript to compile your .ts files on change here is there example:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var merge = require('merge2');

var tsProject = ts.createProject({
    declaration: true,
    noExternalResolve: true
});

gulp.task('scripts', function() {
    var tsResult = gulp.src('lib/*.ts')
                    .pipe(ts(tsProject));

    return merge([ // Merge the two output streams, so this task is finished         when the IO of both operations are done. 
        tsResult.dts.pipe(gulp.dest('release/definitions')),
        tsResult.js.pipe(gulp.dest('release/js'))
    ]);
});
gulp.task('watch', ['scripts'], function() {
    gulp.watch('lib/*.ts', ['scripts']);
});

https://www.npmjs.com/package/gulp-typescript

Upvotes: 4

Related Questions