[Start Up][Angular2]Angular2+TypeScript+Gulp In VSCode

2016-01-11

306
0
Angular2
2016-03-29

[Start Up][Angular2]Angular2+TypeScript+Gulp In VSCode

Angular2在VSCode內，使用Gulp建置自動化Build Code環境。

Angular 2 Quick Start將以下資料拷貝到專案內:
新增package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
      //若用npm start要在此填入參數(一些命令)
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "^2.0.0-beta.2",
    "browser-sync": "^2.11.1",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.34.2",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.1",
    "systemjs": "0.19.18",
    "typescript": "^1.7.5",
    "zone.js": "0.5.13"
  },
  "devDependencies": {
    "browser-sync": "^2.10.0",
    "concurrently": "^1.0.0",
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-debug": "^2.1.2",
    "gulp-filter": "^3.0.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^2.10.0",
    "gulp-util": "^3.0.7",
    "lite-server": "^2.0.1",
    "typescript": "^1.7.3"
  }
}

按下F1
鍵入Configure Task Runner，修改tasks.json檔案，此檔案的作用是，當建置檔案定義如何建置，以下使用Gulp建置

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
       {
            //taskName會匹配到gulp task name
            "taskName": "default",
            "args": ["-w"],
            "isBuildCommand": true,
            "isWatching": true,
            "problemMatcher": [
                "$tsc"
            ]
        }

    ]
}

//使用GULP產至dist資料夾使用GULP產至dist資料夾作為Release資料夾
//並搭配lauch.json
var gulp = require('gulp');
var path = require('path');
var ts = require('gulp-typescript');
var log = require('gulp-util').log;
var typescript = require('typescript');
var browserSync = require('browser-sync');
var sourcemaps = require('gulp-sourcemaps');
var debug = require('gulp-debug');
var del = require('del');

var tsSources = [
    './app/'
].map(function (tsFolder) {
    return tsFolder + '/**/*.ts';
});

//將引用到的JS紀錄，使用GULP產至dist資料夾
var jsNPMDependencies = [
    'angular2/bundles/angular2-polyfills.js',
    'rxjs/bundles/Rx.js',
    'systemjs/dist/system.src.js',
    'angular2/bundles/angular2.dev.js',
    'angular2/bundles/router.dev.js'
];

//dist為Release資料夾，maps為js連接至ts的記錄檔
gulp.task('del', function (cb) {
   return del(['./dist/**/*','./maps/**/*'],cb);
});


gulp.task('buildts:NodeModule',['del'], function ()
{

    var mappedPaths = jsNPMDependencies.map(
        file =>{
                 return path.resolve('node_modules', file);
                }
        );
    //產出至dist/node_modules
    var copyJsNPMDependencies = gulp.src(mappedPaths, {base:'node_modules'})
        .pipe(gulp.dest('dist/node_modules'));
    return [copyJsNPMDependencies];

});

gulp.task('build:html',['del'], function () {
var tsResult = gulp.src(['!node_modules/**/*.*','**/*.html'])
    //指定某資料夾下的ts轉為js 輸出至某檔案夾下
    return tsResult
        .pipe(debug({ title: 'html-Files' }))
        .pipe(gulp.dest('dist'));
});

gulp.task('buildts', ['build:html','buildts:NodeModule'], function () {
    //Build ts 參考指定的tsconfig.json
    var tsProject = ts.createProject(path.resolve('./tsconfig.json'));
    var tsResult = gulp.src(
        tsSources,{ base: '.' })
        .pipe(debug({ title: 'TS-Files' }))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(ts(tsProject));
        tsResult
        .js
        //sourceRoot:'//'的意思是launch.json的werRoot+絕對位置
        .pipe(sourcemaps.write('../maps',{includeContent:false,sourceRoot:'//'}))
        .pipe(gulp.dest('dist/'));
});

//Hosting
gulp.task('serve', function (done) {
    browserSync({
        online: false,
        open: false,
        //launch.json的url要對應此port
        port: 8080,
        server: {
             //launch.json的webRoot要與此匹配
            baseDir: ['.']
        }
    }, done);
});

//使專案代碼與Browser 同步
gulp.task('bs-reload', function () {
    browserSync.reload();
});

//監聽 檔案 若被更改 則同步Build、發佈與Sync Browser
gulp.task('watch', ['serve'], function (cb) {
    log('Watching build sources...');
    gulp.watch([tsSources], ['buildts', 'bs-reload']);
});

//與TaskName 匹配 並動作
gulp.task('default', [ 'buildts'],function()
{
    gulp.start('watch');
});

Ctrl+Shift+P
輸入launch.json
安裝msjsdiag.debugger-for-chrome
輸入launch.json
修改launch.json，此檔案為Debug時的配置，例如指定瀏覽器，開啟方式、index位置、map.js位置...

{
    "version": "0.1.0",
    "configurations":
    [
        {
            "name": "test chrome",
            "type": "chrome",
            "request": "launch",
            //Debug的起始頁面位址
            "url": "http://localhost:8080/dist/index.html",
            //是否參考SourceMap來Debug
            "sourceMaps": true,
            //Log是否要寫
            "diagnosticLogging": false,
            //當在Debug的時候，此位置為默認的hosting位置。與上面的url
            //及sourcemap的相對路徑友直接關係喔
            //vscode-chrome-debug改版後webRoot 如果是在url所指定的目錄，則不能空白喔要打${workspaceRoot}
            "webRoot": "${workspaceRoot}",
            "runtimeArgs":
            [
                //每次運行都開啟新視窗
                "--new-window",
                //指定根目錄路徑，index.html所在路徑
                "--user-data-dir=${workspaceRoot}",
                //Open in port 9222 (standard chrome debug port)
                "--remote-debugging-port=9222"
             ]
        }
    ]
}

Ctrl+Shift+B
建置完畢

以上建置完成後，就可按下F5 Debug搂!

但發現VSCode沒有Angular2的智能提示耶!

請打開command
安裝tsd
```
npm install tsd -g
```
於專案內建立typing檔案，為了能顯示夠智能提示
```
tsd init
```
引用Angular 2
```
tsd install angular2 -s
```
參考專案內的tsd.d.ts，將要引用的智能提示項目複製到正確的ts檔內，即完成。

By-藍小伙-VS Code要建置環境都要靠Gulp!

回首頁