使用.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