<commit_before># Gulp

This quick start guide will teach you how to build TypeScript with [Gulp](http://gulpjs.com) or add TypeScript into an existing Gulp build with [Babel](https://babeljs.io/), [webpack](https://webpack.github.io/) and [uglify](http://lisperator.net/uglifyjs/).

We assume that you're already using [Node.js](https://nodejs.org/) with [npm](https://www.npmjs.com/).

## Minimal project

### Lay out the project

Let's start out with a new directory.
We'll name it `proj` for now, but you can change it to whatever you want.

```shell
mkdir proj
cd proj
```

To start, we're going to structure our project in the following way:

```text
proj/
   +- src/
   +- dist/
```

TypeScript files will start out in your `src` folder, run through the TypeScript compiler and end up in `dist`.
Later we'll show how to webpack

Let's scaffold this out:

```shell
mkdir src
mkdir dist
```

### Initialize the project

Now we'll turn this folder into an npm package.

```shell
npm init
```

You'll be given a series of prompts.
You can use the defaults except for your entry point.
For your entry point, use `./dist/main.js`.
You can always go back and change these in the `package.json` file that's been generated for you.

### Install our dependencies

First install TypeScript and gulp globally.

```shell
npm install -g typescript gulp-cli
```

Then install `gulp` and `gulp-typescript` in your project devDependencies.
Gulp-typescript is a gulp plugin for Typescript.
TODO: Find out which (if any) gulp plugin is most popular.

```shell
npm install --save-dev gulp gulp-typescript
```

### Write a simple example

In src, create the file `main.ts`:

```ts
function hello(compiler: string) {
    console.log(`Hello from ${compiler}`);
}
hello("TypeScript");
```

### Create a `gulpfile.js`

In the project root, create the file `gulpfile.js`:

```js
var gulp = require('gulp');
var ts = require('gulp-typescript');
var paths = {
    scripts: ['src/**/*.ts'],
};


gulp.task('default', function () {
    return gulp.src(paths.scripts)
        .pipe(ts({noImplicitAny: true}))
        .pipe(gulp.dest('dist'));
});
```

### Test the resulting app

```ts
gulp
cd dist
node main.js
```

The program should print "Hello from TypeScript!".


## Add sourcemaps

TODO: gulp-typescript recommends gulp-sourcemaps but doesn't explain how they work.


2. Fit TypeScript into an existing gulp workflow.
3. Fit TypeScript into a babel-based workflow.
4. Make --watch work with gulp too

## Existing workflow with bundling and minify<commit_msg>Half-done draft of adding browserify to gulp<commit_after># Gulp

This quick start guide will teach you how to build TypeScript with [Gulp](http://gulpjs.com) or add TypeScript into an existing Gulp build with [Babel](https://babeljs.io/), [webpack](https://webpack.github.io/) and [uglify](http://lisperator.net/uglifyjs/).

We assume that you're already using [Node.js](https://nodejs.org/) with [npm](https://www.npmjs.com/).

## Minimal project

### Lay out the project

Let's start out with a new directory.
We'll name it `proj` for now, but you can change it to whatever you want.

```shell
mkdir proj
cd proj
```

To start, we're going to structure our project in the following way:

```text
proj/
   +- src/
   +- dist/
```

TypeScript files will start out in your `src` folder, run through the TypeScript compiler and end up in `dist`.
Later we'll show how to webpack

Let's scaffold this out:

```shell
mkdir src
mkdir dist
```

### Initialize the project

Now we'll turn this folder into an npm package.

```shell
npm init
```

You'll be given a series of prompts.
You can use the defaults except for your entry point.
For your entry point, use `./dist/main.js`.
You can always go back and change these in the `package.json` file that's been generated for you.

### Install our dependencies

First install TypeScript and gulp globally.

```shell
npm install -g typescript gulp-cli
```

Then install `gulp` and `gulp-typescript` in your project devDependencies.
Gulp-typescript is a gulp plugin for Typescript.
TODO: Find out which (if any) gulp plugin is most popular.

```shell
npm install --save-dev gulp gulp-typescript
```

### Write a simple example

In src, create the file `main.ts`:

```ts
function hello(compiler: string) {
    console.log(`Hello from ${compiler}`);
}
hello("TypeScript");
```

### Create a `gulpfile.js`

In the project root, create the file `gulpfile.js`:

```js
var gulp = require('gulp');
var ts = require('gulp-typescript');
var paths = {
    scripts: ['src/**/*.ts'],
};


gulp.task('default', function () {
    return gulp.src(paths.scripts)
        .pipe(ts({noImplicitAny: true}))
        .pipe(gulp.dest('dist'));
});
```

### Test the resulting app

```shell
gulp
cd dist
node main.js
```

The program should print "Hello from TypeScript!".

# Browserify and Source Maps

## Add modules

Now let's turn our app into a web app written as a collection of modules.
We'll add browserify to pack our code into a single file for distribution, and source maps so that we can debug TypeScript code directly in the browser.

### Write some simple module code

Create a file called `src/greet.ts`:

```ts
export function showHello(divName: string) {
    const elt = document.getElementById(divName)
    elt.innerText = sayHello("TypeScript");
}
export function sayHello(name: string) {
    return `Hello from ${name}`;
}
```

Now replace the code in `src/main.ts`:

```ts
import { sayHello } from "./greet";
console.log(sayHello("TypeScript"));
```

You can make sure the code works by running `gulp` and then testing in Node:

```shell
gulp
cd dist
node main.js
```

Notice that even though we used ES2015 module syntax, TypeScript emitted CommonJS modules that Node uses.
You can change this by adding a `module` member to the options object that you pass to gulp-typescript.
For example `module: "amd` emits AMD module syntax instead.

## Change to a web app

Now let's change this to a simple web app.
We'll use browserify, which bundles all our modules into one JavaScript file.
In addition, it lets us use the CommonJS module system used by Node, which is the default TypeScript emit.
That means we don't have to change any options to tell TypeScript which module system to target.

First, install browserify

```shell
npm install -g browserify
```

### Create a page


Create a file in the root of the project named `index.html`:

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>
    </head>
    <body>
        <p id="greeting">Loading ...</p>
        <script src="./dist/bundle.js"></script>
    </body>
</html>
```

Now change `main.ts` to the following:

```ts
import { sayHello, showHello } from "./greet";
console.log(sayHello("TypeScript"));
showHello("greeting");
```

This changes makes `main.ts` change an object on the page in addition to writing to the console.
Now change your gulpfile to the following:

```js
TODO: Copy index.html too
TODO: Call `browserify main.js -o bundle.js` I guess
```

```shell
npm install --save-dev gulp-sourcemaps
```

TODO: gulp-typescript recommends gulp-sourcemaps but doesn't explain how they work.

2. Fit TypeScript into an existing gulp workflow.
3. Fit TypeScript into a babel-based workflow.
4. Make --watch work with gulp too

## Existing workflow with bundling and minify
{'fraction_non_alphanumeric': 0.11886024423337856, 'fraction_numerical': 0.0014925373134328358, 'mean_word_length': 3.9238476953907817, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 8, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1276787', 'n_tokens_mistral': 2378, 'n_tokens_neox': 2219, 'n_words': 967}