使用.ts,.scss,.html复制和观看文件夹

我开始使用VS 2015与NPM和Gulp一起学习使用TypeScript的Angular2。 我有这样的文件夹结构:

scripts login login.html login.scss login.ts home home.html home.scss home.ts app.ts boot.ts 

我想让Gulp观察脚本文件夹,编译文件并将它们复制到另一个目录。 所以我想要这个输出:

  wwwroot login login.html login.css login.js home home.html home.css home.js app.js boot.js 

我怎样才能做到这一点? 谢谢

步骤如何做到这一点

1)在你的项目根文件夹中添加tsconfig.json内容:

 { "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false, "outDir": "assets" }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] } 

2)安装软件包:

 npm install gulp npm install gulp-typescript npm install gulp-sass 

3)在内容的根目录下添加gulpfile:

 var gulp = require('gulp'); var typescript = require('gulp-typescript'); var sass = require('gulp-sass'); var tscConfig = require('./tsconfig.json'); gulp.task('ts', function () { return gulp .src('scripts/**/*.ts') .pipe(typescript(tscConfig.compilerOptions)) .pipe(gulp.dest('wwwroot')); }); gulp.task('html', function() { return gulp .src('scripts/**/*.html') .pipe(gulp.dest('wwwroot')); }); gulp.task('scss', function() { return gulp.src('scripts/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('wwwroot')); }); gulp.task('default', ['ts', 'html', 'scss', 'watch']); gulp.task('watch', function(cb) { gulp.watch('scripts/**/*.ts', ['ts']); gulp.watch('scripts/**/*.html', ['html']); gulp.watch('scripts/**/*.scss', ['scss']); }); 

4)打开terminal或CMD更改目录到您的项目文件夹cd /yourprojectlocation并运行cd /yourprojectlocation