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

gds用.ts，.scss，.html复制和观看文件夹

1 个答案: