Skip to content

Commit 73f6382

Browse files
committed
Update docs for version 3
1 parent 6ff3f3e commit 73f6382

File tree

1 file changed

+32
-94
lines changed

1 file changed

+32
-94
lines changed

readme.md

Lines changed: 32 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ gulp-typescript
22
===============
33
A gulp plugin for handling TypeScript compilation workflow. The plugin exposes TypeScript's compiler options to gulp using TypeScript API.
44

5+
Updating from version 2? See the [breaking changes in version 3](http://dev.ivogabe.com/gulp-typescript-3/).
6+
57
[![Build Status](https://travis-ci.org/ivogabe/gulp-typescript.svg?branch=master)](https://travis-ci.org/ivogabe/gulp-typescript)
68

79
Features
@@ -30,11 +32,12 @@ npm install gulp-typescript
3032
Options
3133
-------
3234
Allmost all options from TypeScript are supported.
33-
- `out` (TS1.5-), `outFile` (TS1.6+) (string) - Generate one javascript and one definition file. Only works when no module system is used.
35+
- `outFile` (string) - Generate one javascript and one definition file. Only works when no module system is used.
3436
- `outDir` (string) - Move output to a different (virtual) directory. Note that you still need `gulp.dest` to write output to disk.
3537
- `noImplicitAny` (boolean) - Warn on expressions and declarations with an implied 'any' type.
36-
- `suppressImplicitAnyIndexErrors` (boolean) - Suppress --noImplicitAny errors for indexing objects lacking index signatures.
38+
- `suppressImplicitAnyIndexErrors` (boolean) - Suppress `--noImplicitAny` errors for indexing objects lacking index signatures.
3739
- `noLib` (boolean) - Don't include the default lib (with definitions for - Array, Date etc)
40+
- `lib` (string[]) - List of library files to be included in the compilation.
3841
- `target` (string) - Specify ECMAScript target version: 'ES3' (default), 'ES5' or 'ES6'.
3942
- `module` (string) - Specify module code generation: 'commonjs', 'amd', 'umd' or 'system'.
4043
- `jsx` (string) - Specify jsx code generation: 'react' or 'preserve' (TS1.6+).
@@ -51,19 +54,13 @@ Allmost all options from TypeScript are supported.
5154
- `allowJs` (boolean) - Allow JavaScript files to be compiled.
5255
- `rootDir` - Specifies the root directory of input files. Only use to control the output directory structure with `outDir`.
5356

54-
See the [TypeScript wiki](http://www.typescriptlang.org/docs/handbook/compiler-options.html) for a complete list.
57+
See the [TypeScript wiki](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for a complete list.
5558
These options are not supported:
5659
- Sourcemap options (`sourceMap`, `inlineSourceMap`, `inlineSources`, `sourceRoot`) - Use [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) instead.
5760
- `watch` - Use `gulp.watch` instead. See the paragraph "Incremental compilation".
5861
- `project` - See "Using `tsconfig.json`".
5962
- Obvious: `help`, `version`
6063

61-
## Unofficial options
62-
Besides the official options options, gulp-typescript supports the following options:
63-
- ```noExternalResolve``` (boolean) - Do not resolve files that are not in the input. Explanation below.
64-
- ```sortOutput``` (boolean) - Sort output files. Useful if you want to concatenate files (see below).
65-
- ```typescript``` (object) - Use a different version / fork of TypeScript (see below). Use it like: `typescript: require('typescript')` or `typescript: require('my-fork-of-typescript')`
66-
6764
Basic Usage
6865
----------
6966
Below is a minimal `gulpfile.js` which will compile all TypeScript file in folder `src` and emit a single output file called `output.js` in `built/local`. To invoke, simple run `gulp`.
@@ -81,17 +78,16 @@ gulp.task('default', function () {
8178
.pipe(gulp.dest('built/local'));
8279
});
8380
```
84-
Another example of `gulpfile.js`. Instead of creating default task, the file specifies custom named task. To invoke, run `gulp scripts` instead of `gulp`. As a result, the task will generate both JavaScript files and TypeScript definition files (.d.ts).
81+
Another example of `gulpfile.js`. Instead of creating the default task, the file specifies custom named task. To invoke, run `gulp scripts` instead of `gulp`. As a result, the task will generate both JavaScript files and TypeScript definition files (`.d.ts`).
8582
```javascript
8683
var gulp = require('gulp');
8784
var ts = require('gulp-typescript');
88-
var merge = require('merge2'); // Require separate installation
85+
var merge = require('merge2'); // Requires separate installation
8986

9087
gulp.task('scripts', function() {
9188
var tsResult = gulp.src('lib/**/*.ts')
9289
.pipe(ts({
93-
declaration: true,
94-
noExternalResolve: true
90+
declaration: true
9591
}));
9692

9793
return merge([
@@ -100,28 +96,29 @@ gulp.task('scripts', function() {
10096
]);
10197
});
10298
```
103-
`tsResult` is a object that has a JavaScript stream (`.js`) and a definition file stream (`.dts`).
104-
You need to set the `declaration` option to get definition files in the `dts` stream.
99+
`tsResult` is a stream containing the generated JavaScript and definition files.
100+
In many situations, some plugins need to be executed on the JavaScript files.
101+
For these situations, the stream has sub-streams, namely a JavaScript stream (`tsResult.js`) and a definition file stream (`tsResult.dts`).
102+
You need to set the `declaration` option to generate definition files.
105103
If you don't need the definition files, you can use a configuration as seen in the first example.
106104

107105
Incremental compilation
108106
-----------------------
109-
Instead of calling ```ts(options)```, you can create a project first, and then call ```ts(project)```. An example:
107+
Instead of calling `ts(options)`, you can create a project first, and then call `tsProject()`. An example:
110108
```javascript
111109
var gulp = require('gulp');
112110
var ts = require('gulp-typescript');
113111
var merge = require('merge2');
114112

115113
var tsProject = ts.createProject({
116-
declaration: true,
117-
noExternalResolve: true
114+
declaration: true
118115
});
119116

120117
gulp.task('scripts', function() {
121118
var tsResult = gulp.src('lib/*.ts')
122-
.pipe(ts(tsProject));
119+
.pipe(tsProject());
123120

124-
return merge([ // Merge the two output streams, so this task is finished when the IO of both operations are done.
121+
return merge([ // Merge the two output streams, so this task is finished when the IO of both operations is done.
125122
tsResult.dts.pipe(gulp.dest('release/definitions')),
126123
tsResult.js.pipe(gulp.dest('release/js'))
127124
]);
@@ -131,7 +128,7 @@ gulp.task('watch', ['scripts'], function() {
131128
gulp.watch('lib/*.ts', ['scripts']);
132129
});
133130
```
134-
When you run ```gulp watch```, the source will be compiled as usual. Then, when you make a change and save the file, your TypeScript files will be compiled in about half the time.
131+
When you run `gulp watch`, the source will be compiled as usual. Then, when you make a change and save the file, your TypeScript files will be compiled in about half the time.
135132

136133
You must create the project outside of the task. You can't use the same project in multiple tasks.
137134
Instead, create multiple projects or use a single task to compile your sources.
@@ -144,93 +141,35 @@ var tsProject = ts.createProject('tsconfig.json');
144141
```
145142
If you want to add or overwrite certain settings in the `tsconfig.json` file, you can use:
146143
```javascript
147-
var tsProject = ts.createProject('tsconfig.json', { sortOutput: true });
144+
var tsProject = ts.createProject('tsconfig.json', { noImplicitAny: true });
148145
```
149146
The task will look like:
150147
```javascript
151148
gulp.task('scripts', function() {
152149
var tsResult = tsProject.src() // instead of gulp.src(...)
153-
.pipe(ts(tsProject));
150+
.pipe(tsProject());
154151

155152
return tsResult.js.pipe(gulp.dest('release'));
156153
});
157154
```
158155

159156
TypeScript version
160157
------------------
161-
gulp-typescript uses TypeScript 1.8 by default. You can also use 1.4+ or a nighty version of TypeScript instead.
162-
You should add the version you want (1.4+) to your package.json file as a devDependency. You can use the a nightly build to get the latest features:
163-
```
164-
npm install typescript@next
165-
```
166-
And add this to your gulpfile:
167-
```javascript
168-
[...].pipe(ts({
169-
typescript: require('typescript')
170-
}));
171-
```
172-
Or in combination with a `tsconfig` file:
173-
```javascript
174-
var tsProject = ts.createProject('tsconfig.json', {
175-
typescript: require('typescript')
176-
});
177-
```
158+
gulp-typescript isn't restricted to a single TypeScript version.
159+
You can install the latest stable version using `npm install typescript --save-dev` or a nightly `npm install typescript@next --save-dev`.
178160

179-
It's also possible to use a fork of TypeScript. Add an extra option to the options object like this:
161+
You can also use a fork of TypeScript, if it is based on TypeScript 2.x. You can configure this in your gulpfile:
180162
```javascript
181163
[...].pipe(ts({
182164
typescript: require('my-fork-of-typescript')
183165
}));
184166
```
185-
186-
Filters
187-
-------
188-
There are two ways to filter files:
189-
```javascript
190-
gulp.task('scripts', function() {
191-
var tsResult = gulp.src('lib/*.ts')
192-
.pipe(ts(tsProject, filterSettings));
193-
194-
...
195-
});
196-
```
197-
And
167+
Or in combination with a `tsconfig` file:
198168
```javascript
199-
gulp.task('scripts', function() {
200-
var tsResult = gulp.src('lib/*.ts')
201-
.pipe(ts(tsProject));
202-
203-
tsResult.pipe(ts.filter(tsProject, filterSettings));
169+
var tsProject = ts.createProject('tsconfig.json', {
170+
typescript: require('my-form-of-typescript')
204171
});
205172
```
206-
The first example doesn't add files (that don't pass the filter) to the compiler, the second one does add them to the compiler,
207-
but removes them later from the stream.
208-
You can put as much pipes between compilation and filtering as you want, as long as the filename doesn't change.
209-
210-
At the moment there is only one filter available:
211-
212-
- ```referencedFrom``` (string[]) Only files that are referenced (using ```/// <reference path="..." />```) by the files in this array pass this filter.
213-
214-
Resolving files
215-
---------------
216-
By default, gulp-typescript will try to resolve the files you require and reference. These files are parsed, but not emitted (so you will not see them in the output stream).
217-
218-
If you set the option ```noExternalResolve``` to true, gulp-typescript will not resolve all the requires and references. It assumes that all the necessary files are in the input stream. For example, if you have your ```.ts``` files in the ```lib``` folder, and the ```.d.ts``` files in the ```definitions``` folder, you must use ```gulp.src(['lib/**.ts', 'definitions/**.ts'])``` instead of ```gulp.src(['lib/**.ts'])``` in your gulpfile if you use the option ```noExternalResolve```.
219-
220-
Advantage of ```noExternalResolve```: faster compilation.
221-
Disadvantage of ```noExternalResolve```: won't work when you forgot some input files.
222-
Advice: turn it on, and make sure you list all the input files.
223-
224-
Files that are resolved when ```noExternalResolve``` is off, won't be pushed to the output stream, unless you are using the `out` option.
225-
226-
Concatenate files
227-
------------
228-
The ```tsc``` command has the ability to concatenate using the ```--out``` parameter. There are two approaches to do that in ```gulp-typescript```.
229-
230-
You can use the `out` option. This is fine for small projects, but for big projects it's not always sufficient.
231-
232-
The other option is to use `gulp-concat`. The ```tsc``` command sorts the files using the ```<reference>``` tags. ```gulp-typescript``` does this when you enable the ```sortOutput``` option. You can use the ```referencedFrom``` filter to only include files that are referenced from certain files.
233-
234173

235174
Source maps
236175
----------
@@ -240,19 +179,17 @@ associated sourcemap.
240179
```javascript
241180
var gulp = require('gulp')
242181
var ts = require('gulp-typescript');
243-
var concat = require('gulp-concat');
244182
var sourcemaps = require('gulp-sourcemaps');
245183

246184
gulp.task('scripts', function() {
247185
var tsResult = gulp.src('lib/*.ts')
248186
.pipe(sourcemaps.init()) // This means sourcemaps will be generated
249187
.pipe(ts({
250-
sortOutput: true,
251188
// ...
252189
}));
253190

254191
return tsResult.js
255-
.pipe(concat('output.js')) // You can use other plugins that also support gulp-sourcemaps
192+
.pipe( ... ) // You can use other plugins that also support gulp-sourcemaps
256193
.pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
257194
.pipe(gulp.dest('release/js'));
258195
});
@@ -261,17 +198,18 @@ For more information, see [gulp-sourcemaps](https://github.com/floridoo/gulp-sou
261198

262199
Reporters
263200
---------
264-
You can specify a custom reporter as the 3rd argument of the main function:
201+
You can specify a custom reporter as the second argument of the main function, or as the only argument when using a `tsProject`:
265202
```javascript
266-
ts(optionsOrProject, filters, reporter);
203+
ts(options, reporter);
204+
tsProject(reporter);
267205
```
268-
You can set options, project or filter to `undefined` if you don't want to set them. Available reporters are:
206+
Available reporters are:
269207
- nullReporter (`ts.reporter.nullReporter()`) - Don't report errors
270208
- defaultReporter (`ts.reporter.defaultReporter()`) - Report basic errors to the console
271209
- longReporter (`ts.reporter.longReporter()`) - Extended version of default reporter, intelliJ link functionality + file watcher error highlighting should work using this one
272210
- fullReporter (`ts.reporter.fullReporter(showFullFilename?: boolean)`) - Show full error messages, with source.
273211

274-
If you want to build a custom reporter, you take a look at `lib/reporter.ts`, in that file is an interface which a reporter should implement.
212+
If you want to build a custom reporter, you take a look at `lib/reporter.ts`, that file declares an interface which a reporter should implement.
275213

276214
Build gulp-typescript
277215
------------

0 commit comments

Comments
 (0)