Gulp 使用 .ts、.scss、.html 复制和监视文件夹

Question

我开始使用带有 NPM 和 Gulp 的 VS 2015 和 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

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

Answer 1

步骤怎么做

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) 打开终端或 cmd 将目录更改为您的项目文件夹 cd /yourprojectlocation 并运行 gulp