标签：版本 on() rod zip port show 文档 tom uil
Angular2.x与Angular1.x完全不同，Angular2.x是不兼容Angular1.x的，所在在框架的构造上，它们是完全不同的。在Angular2.x中，因为其是基于ES6来开发的，所以会有很多第三方依赖。由于很多浏览器还不支持ES6，所以Angular2引入了很多polyfill或者shim, 导致我们引入了第三方依赖。
官方的说法，它是基于数据流的构建系统（streaming build system），主要用来让自动化和增强你的工作流程（Automate and enhance your workflow)。
1.安装 node v6.x.x npm 3.x.x gulp 有兴趣的可以安装typescript
gulp的安装 npm install -g 全局安装环境
gulp 教程:https://www.w3ctech.com/topic/134
中文网：http://www.gulpjs.com.cn/
2.新建项目文件夹（英文）
3.在github上clone相关文件，并放入相关配置项
地址：https://github.com/Jasonwang911/angular2
4.package.json文件：用来标记项目所需的npm依赖包
这是一个gulp的工作流，在gulp中我们部署的函数都是由gulp.task来执行的，这个文件的主要做的工作是
1.对angular2源码进行转换，将es6代码转换为es5代码，然后合并成angular2.js，放入dest/lib目录
2.将angular2的第三方依赖放入dest/lib目录
3.自动监测用户写的代码，当文件发生修改时，自动将其编译为es5代码，然后放入dest目录
4.开启一个本地服务器，让用户访问http://localhost:3456/ 就可以看到页面效果
5.删除dest目录
如果想了解gulp可以翻下我之前的博客，或者直接gulp的中文站
‘use strict‘; var gulp = require(‘gulp‘), del = require(‘del‘), plumber = require(‘gulp-plumber‘), rename = require(‘gulp-rename‘), traceur = require(‘gulp-traceur‘); var connect = require(‘gulp-connect‘), open = require(‘gulp-open‘), port = 3456; var PATHS = { src: { js: ‘src/**/*.js‘, html: ‘src/**/*.html‘ }, lib: [ ‘node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js‘, ‘node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js‘, ‘node_modules/systemjs/lib/extension-register.js‘, ‘node_modules/angular2/node_modules/zone.js/dist/zone.js‘, ‘node_modules/angular2/node_modules/zone.js/dist/long-stack-trace-zone.js‘, ‘node_modules/reflect-metadata/Reflect.js‘, ‘node_modules/reflect-metadata/Reflect.js.map‘, ] }; gulp.task(‘watch‘, function() { gulp.watch(PATHS.src.js, [‘js‘]); gulp.watch(PATHS.src.html, [‘html‘]); }); gulp.task(‘js‘, function() { return gulp.src(PATHS.src.js) .pipe(rename({ extname: ‘‘ })) .pipe(plumber()) .pipe(traceur({ modules: ‘instantiate‘, moduleName: true, annotations: true, types: true, memberVariables: true })) .pipe(rename({ extname: ‘.js‘ })) .pipe(gulp.dest(‘dist‘)); }); gulp.task(‘html‘, function() { return gulp.src(PATHS.src.html) .pipe(gulp.dest(‘dist‘)); }); gulp.task(‘angular2‘, function() { var buildConfig = { paths: { "angular2/*": "node_modules/angular2/es6/prod/*.es6", "rx": "node_modules/angular2/node_modules/rx/dist/rx.js" }, meta: { ‘rx‘: { format: ‘cjs‘ } } }; var Builder = require(‘systemjs-builder‘); var builder = new Builder(buildConfig); return builder.build(‘angular2/angular2‘, ‘dist/lib/angular2.js‘, {}); }); gulp.task(‘libs‘, [‘angular2‘], function() { var size = require(‘gulp-size‘); return gulp.src(PATHS.lib) .pipe(size({ showFiles: true, gzip: true })) .pipe(gulp.dest(‘dist/lib‘)); }); gulp.task(‘connect‘, function() { connect.server({ root: __dirname + ‘/dist‘, port: port, livereload: true }); }); gulp.task(‘open‘, function() { var options = { url: ‘http://localhost:‘ + port, }; gulp.src(‘./index.html‘) .pipe(open(‘‘, options)); }); gulp.task(‘build‘, [‘js‘, ‘html‘]) gulp.task(‘default‘, [‘build‘, ‘libs‘]); gulp.task(‘serve‘, [‘connect‘, ‘open‘]); gulp.task(‘clean‘, function(done) { del([‘dist‘], done); });
5.tyconfig.json文件：定义了typescript编译器如何从项目源文件生成javascript代码
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } }
6.typings.json文件：为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
{ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160725163759", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160909174046" } }
7.systemjs.config.js文件：为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。它还包括文档中后面的例子需要用到的包。
8.安装package.json中列出的依赖包，这里需要使用nodejs来定义需要使用的angular2版本和所有第三方依赖的版本
在node命令行中输入 npm install
如果运行结束没有生成typings目录，则手动安装 npm run typings install
9.定义该应用的宿主页面，根目录下创建index.html
10.编译并运行应用程序 npm start
你会发现浏览器启动了程序，并且编译了app/app.component.ts文件并输出所有相应的ts文件为js文件，在你编辑文件保存后浏览器会自动刷新并会提示相应的错误
标签：版本 on() rod zip port show 文档 tom uil
原文地址：http://www.cnblogs.com/jasonwang2y60/p/6259868.html
