Gulp-övervaka TypeScript-filer och publicera endast ändrade filer

I Visual Studio 2015 spårar jag de ändringar som görs i mina TS-filer så att jag kan kopiera de genererade JS-filerna och placera dem i min wwwroot-katalog. Men varje gång jag gör en ändring i en enda TS-fil byggs och kopieras alla till wwwroot-mappen. Vad bör jag ändra här så att endast nya JS-filer kopieras till wwwroot?

Jag använder gulp-watch för att spåra filändringar och gulp-newer för att filtrera de nya filerna.

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']);
});

Svar #1

gulp.watch har två huvudformer. Båda returnerar en EventEmitter som sänder förändringshändelser. Den första av dessa tar en glob, ett valfritt alternativobjekt och en array av uppgifter som sina parametrar.

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

Enkelt uttryckt, när någon av filerna som matchas av globben ändras, kör uppgifterna. I kodblocket ovan, när någon fil i undermapparna Contents/Scripts/**/*.ts som har filtillägget .ts ändras, kommer uppgiften min:site:js att köras mot dessa filer.

Den andra formen tar globen, ett valfritt optionsobjekt och en valfri callback som kommer att köras när en förändring upptäcks.

För mer information, se API-dokumentationen

Använd gulp-typescript för att kompilera dina .ts-filer vid förändring, här är ett exempel:

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

Relaterade artiklar