From 026eea9e3e9e9b90df0268181b0b05bdd694be6c Mon Sep 17 00:00:00 2001 From: zhongsp Date: Sat, 11 Jun 2016 16:24:35 +0800 Subject: [PATCH] Review Gulp.md --- README.md | 5 ++- SUMMARY.md | 5 ++- doc/handbook/tutorials/Gulp.md | 68 +++++++++++++++++----------------- preface.md | 7 ++-- 4 files changed, 44 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index cdf0959..5001317 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/SUMMARY.md b/SUMMARY.md index a5df8f1..f8af144 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -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) diff --git a/doc/handbook/tutorials/Gulp.md b/doc/handbook/tutorials/Gulp.md index e6586ca..5761241 100644 --- a/doc/handbook/tutorials/Gulp.md +++ b/doc/handbook/tutorials/Gulp.md @@ -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`。 # Watchify，Babel和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的输出很像。 \ No newline at end of file +对于这样一段简单的代码来说，Babel的ES5输出应该和TypeScript的输出相似。 \ No newline at end of file diff --git a/preface.md b/preface.md index a12b6ce..3326833 100644 --- a/preface.md +++ b/preface.md @@ -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) ## 相关链接