Review Gulp.md

This commit is contained in:
zhongsp 2016-06-11 16:24:35 +08:00
parent d2029947fd
commit 026eea9e3e
4 changed files with 44 additions and 41 deletions

View File

@ -10,10 +10,11 @@ TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
## 目录
* [快速上手](./doc/handbook/tutorials/README.md)
* [React与webpack](./doc/handbook/tutorials/React & Webpack.md)
* [ASP.NET 4](./doc/handbook/tutorials/ASP.NET 4.md)
* [ASP.NET Core](./doc/handbook/tutorials/ASP.NET Core.md)
* [ASP.NET 4](./doc/handbook/tutorials/ASP.NET 4.md)
* [Gulp](./doc/handbook/tutorials/Gulp.md)
* [Knockout.js](./doc/handbook/tutorials/Knockout.md)
* [React与webpack](./doc/handbook/tutorials/React & Webpack.md)
* [新增功能](./doc/release-notes/README.md)
* [TypeScript 1.8](./doc/release-notes/TypeScript 1.8.md)
* [TypeScript 1.7](./doc/release-notes/TypeScript 1.7.md)

View File

@ -1,10 +1,11 @@
# Summary
* [快速上手](./doc/handbook/tutorials/README.md)
* [React与webpack](./doc/handbook/tutorials/React & Webpack.md)
* [ASP.NET 4](./doc/handbook/tutorials/ASP.NET 4.md)
* [ASP.NET Core](./doc/handbook/tutorials/ASP.NET Core.md)
* [ASP.NET 4](./doc/handbook/tutorials/ASP.NET 4.md)
* [Gulp](./doc/handbook/tutorials/Gulp.md)
* [Knockout.js](./doc/handbook/tutorials/Knockout.md)
* [React与webpack](./doc/handbook/tutorials/React & Webpack.md)
* [新增功能](./doc/release-notes/README.md)
* [TypeScript 1.8](./doc/release-notes/TypeScript 1.8.md)
* [TypeScript 1.7](./doc/release-notes/TypeScript 1.7.md)

View File

@ -1,12 +1,12 @@
这篇快速上手指南会教你怎样使用[gulp](http://gulpjs.com)来构建TypeScript还有如何在gulp管道里添加[Browserify](http://browserify.org)[uglify](http://lisperator.net/uglifyjs/)或[Watchify](https://github.com/substack/watchify)。
这篇快速上手指南将教你如何使用[Gulp](http://gulpjs.com)构建TypeScript和如何在Gulp管道里添加[Browserify](http://browserify.org)[uglify](http://lisperator.net/uglifyjs/)或[Watchify](https://github.com/substack/watchify)。
这里假设你已经在使用[Node.js](https://nodejs.org/)和[npm](https://www.npmjs.com/)了。
# 创建简单工程
我们先创建一个新目录。
命名为`proj`可以使用任何你喜欢的名字。
我们先创建一个新目录。
命名为`proj`可以使用任何你喜欢的名字。
```shell
mkdir proj
@ -21,9 +21,9 @@ proj/
+- dist/
```
TypeScript文件放在`src`文件夹下经过TypeScript编译器编译生成的目标文件在`dist`目录下。
TypeScript文件放在`src`文件夹下经过TypeScript编译器编译生成的目标文件在`dist`目录下。
下面我们来创建这些文件夹:
下面我们来创建这些文件夹:
```shell
mkdir src
@ -32,7 +32,7 @@ mkdir dist
## 初始化工程
现在我们把这个文件夹转换成npm包
现在我们把这个文件夹转换成npm包
```shell
npm init
@ -46,15 +46,15 @@ npm init
## 安装依赖项
现在我们可以使用`npm install`命令来安装包。
首先全局安装TypeScript和gulp。
首先全局安装TypeScript和Gulp。
如果你正在使用Unix系统你可能需要使用`sudo`命令来启动`npm install`命令行。)
```shell
npm install -g typescript gulp-cli
```
后安装`gulp`和`gulp-typescript`到开发依赖项。
[Gulp-typescript](https://www.npmjs.com/package/gulp-typescript)是TypeScript的一个gulp插件。
后安装`gulp`和`gulp-typescript`到开发依赖项。
[Gulp-typescript](https://www.npmjs.com/package/gulp-typescript)是TypeScript的一个Gulp插件。
```shell
npm install --save-dev gulp gulp-typescript
@ -63,7 +63,7 @@ npm install --save-dev gulp gulp-typescript
## 写一个简单的例子
让我们写一个Hello World程序。
在`src`下创建`main.ts`文件:
在`src`目录下创建`main.ts`文件:
```ts
function hello(compiler: string) {
@ -72,7 +72,7 @@ function hello(compiler: string) {
hello("TypeScript");
```
在工程根目录`proj`下新建一个`tsconfig.json`文件:
在工程根目录`proj`下新建一个`tsconfig.json`文件:
```json
{
@ -109,12 +109,12 @@ gulp
node dist/main.js
```
程序应该能够打印“Hello from TypeScript!”。
程序应该能够打印“Hello from TypeScript!”。
# 向代码里添加模块
在使用Browserify前让我们先构建一下代码再添加一些混入的模块。
这个结构将是你在真实应用中会用到的。
在使用Browserify前让我们先构建一下代码然后再添加一些混入的模块。
这个结构将是你在真实应用程序中会用到的。
新建一个`src/greet.ts`文件:
@ -147,26 +147,26 @@ console.log(sayHello("TypeScript"));
}
```
确保执行`gulp`后模块是能工作的在Node下进行测试
确保执行`gulp`后模块是能工作的在Node.js下进行测试:
```shell
gulp
node dist/main.js
```
注意即使我们使用了ES2015的模块语法TypeScript会生成Node.js使用的CommonJS模块。
我们在这个教程里会一直使用CommonJS但是你可以通过修改`module`选项来改变这个行为。
注意即使我们使用了ES2015的模块语法TypeScript还是会生成Node.js使用的CommonJS模块。
我们在这个教程里会一直使用CommonJS模块,但是你可以通过修改`module`选项来改变这个行为。
# Browserify
现在让我们把这个工程由Node.js环境移到浏览器环境里。
因此我们将把所有模块捆绑成一个JavaScript文件。
所幸这正是Browserify做的事情。
有利的是它允许使用Node.js的CommonJS模块这正是TypeScript默认生成类型。
也就是说TypeScript和Node.js的设置不需要改变就可以移到浏览器里。
所幸这正是Browserify做的事情。
方便的是它支持Node.js的CommonJS模块这也正是TypeScript默认生成的类型。
也就是说TypeScript和Node.js的设置不需要改变就可以移到浏览器里。
首先安装Browserify[tsify](https://www.npmjs.com/package/tsify)和vinyl-source-stream。
tsify是一个Browserify插件就像gulp-typescript能够访问TypeScript编译器。
tsify是Browserify的一个插件就像gulp-typescript一样能够访问TypeScript编译器。
vinyl-source-stream会将Browserify的输出文件适配成gulp能够解析的格式它叫做[vinyl](https://github.com/gulpjs/vinyl)。
```shell
@ -238,35 +238,35 @@ gulp.task("default", ["copy-html"], function () {
这里增加了`copy-html`任务并且把它加作`default`的依赖项。
这样,当`default`执行时,`copy-html`会被首先执行。
我们还修改了`default`,让它使用`tsify`插件调用Browserify而不是`gulp-typescript`。
我们还修改了`default`任务,让它使用`tsify`插件调用Browserify而不是`gulp-typescript`。
方便的是两者传递相同的参数对象到TypeScript编译器。
调用`bundle`后,我们使用`source`vinyl-source-stream的别名把输出文件命名为`bundle.js`。
测试页面,运行`gulp`,然后在浏览器里打开`dist/index.html`。
测试页面,运行`gulp`,然后在浏览器里打开`dist/index.html`。
你应该能在页面上看到“Hello from TypeScript”。
注意我们为Broswerify指定了`debug: true`。
这会让`tsify`在输出文件里生成`source maps`。
`source maps`允许我们在浏览器中直接调试TypeScript源码而不是在合并后的JavaScript文件上。
`source maps`允许我们在浏览器中直接调试TypeScript源码而不是在合并后的JavaScript文件上调试
你要打开调试器并在`main.ts`里打一个断点,看看`source maps`是否能工作。
当你刷新页面时,代码会停在断点处,从而你就能够调试`greet.ts`。
# WatchifyBabel和Uglify
现在代码已经用Browserify和tsify捆绑在一起了我们可以使用browserify插件为构建添加一些特性。
现在代码已经用Browserify和tsify捆绑在一起了我们可以使用Browserify插件为构建添加一些特性。
* Watchify启动gulp并保持运行状态当你保存文件时自动编译。
保证你进入到编辑-保存-刷新浏览器的循环中。
* Watchify启动Gulp并保持运行状态当你保存文件时自动编译。
你进入到编辑-保存-刷新浏览器的循环中。
* Babel是个十分灵活的编译器将ES2015及以上版本的代码转换成ES5和ES3。
你可以添加大量自定义的TypeScript目前不支持的转换器。
* Uglify帮你压缩代码它们将花更少的时间去下载。
* Uglify帮你压缩代码将花更少的时间去下载它们
## Watchify
我们启动Watchify让它在后台帮我编译
我们启动Watchify让它在后台帮我编译:
```shell
npm install --save-dev watchify gulp-util
@ -320,7 +320,7 @@ watchedBrowserify.on("log", gutil.log);
然后给函数起个名字因为Watchify和Gulp都要调用它。
(3)是可选的,但是对于调试来讲很有用。
现在当你执行gulp它会启动并保持运行状态。
现在当你执行`gulp`,它会启动并保持运行状态。
试着改变`main.ts`文件里`showHello`的代码并保存。
你会看到这样的输出:
@ -383,9 +383,9 @@ gulp.task("default", ["copy-html"], function () {
});
```
注意`uglify`只是调用自己—`buffer`和`sourcemaps`调用用于确保sourcemaps可以工作。
注意`uglify`只是调用自己—`buffer`和`sourcemaps`调用用于确保sourcemaps可以工作。
这些调用让我们可以使用单独的sourcemap文件而不是之前的内嵌的sourcemaps。
你现在可以执行gulp来检查`bundle.js`是否被压缩了:
你现在可以执行`gulp`来检查`bundle.js`是否被压缩了:
```shell
gulp
@ -439,7 +439,7 @@ gulp.task('default', ['copyHtml'], function () {
```
我们需要设置TypeScript目标为ES2015。
Babel稍后会从TypeScript生成的ES2015代码中生成ES5.
Babel稍后会从TypeScript生成的ES2015代码中生成ES5
修改`tsconfig.json`:
```json
@ -454,4 +454,4 @@ Babel稍后会从TypeScript生成的ES2015代码中生成ES5.
}
```
对于这样一段简单的代码来说Babel的ES5输出应该和TypeScript的输出很像
对于这样一段简单的代码来说Babel的ES5输出应该和TypeScript的输出相似

View File

@ -22,10 +22,11 @@ TypeScript目前还在积极的开发完善之中不断地会有新的特性
## 目录
* [快速上手](./doc/handbook/tutorials/README.html)
* [React与webpack](./doc/handbook/tutorials/React & Webpack.html)
* [ASP.NET 4](./doc/handbook/tutorials/ASP.NET 4.html)
* [ASP.NET Core](./doc/handbook/tutorials/ASP.NET Core.html)
* [ASP.NET 4](./doc/handbook/tutorials/ASP.NET 4.html)
* [Gulp](./doc/handbook/tutorials/Gulp.html)
* [Knockout.js](./doc/handbook/tutorials/Knockout.html)
* [React与webpack](./doc/handbook/tutorials/React & Webpack.html)
* [新增功能](./doc/release-notes/README.html)
* [TypeScript 1.8](./doc/release-notes/TypeScript 1.8.html)
* [TypeScript 1.7](./doc/release-notes/TypeScript 1.7.html)
@ -76,6 +77,7 @@ TypeScript目前还在积极的开发完善之中不断地会有新的特性
## 主要修改 (Latest 10 updates)
* 2016-06-11 新增章节:快速上手:[Gulp](./doc/handbook/tutorials/Gulp.html)
* 2016-04-23 新增章节:[使用TypeScript的每日构建版本](./doc/handbook/Nightly Builds.html)
* 2016-04-18 新增章节:[新增功能](./doc/release-notes/README.html)
* 2016-04-10 新增章节:快速上手:[ASP.NET Core](./doc/handbook/tutorials/ASP.NET Core.html)
@ -85,7 +87,6 @@ TypeScript目前还在积极的开发完善之中不断地会有新的特性
* 2016-04-02 新增章节:[模块解析](./doc/handbook/Module Resolution.html)
* 2016-04-01 新增特性:[多态的`this`类型](./doc/handbook/Advanced Types.html)
* 2016-04-01 新增特性:[字符串字面量类型](./doc/handbook/Advanced Types.html)
* 2016-02-27 新增章节:快速上手:[React和webpack](./doc/handbook/tutorials/React & Webpack.html)
## 相关链接