Este passo a passo irá configurar o Gulp para automatizar suas tarefas relacionadas ao typescript. Todo o fonte utilizado está disponível no projeto introducao-typescript do github. Nesse exemplo será separado diretórios de fontes (neste exemplo, '/src') do de distribuição ('/dist').
- [raiz]
- dist
- src
Para iniciar o projeto, no diretório raiz, basta executar o comando abaixo na linha de comando:
npm init
Selecione todas as opções padrões e para o entry point digite './dist/main.js'
Ao terminar será criado o arquivo packages.json na raiz da aplicação, que facilita atualização e restauração dos pacotes NPM no projeto.
Instalando dependências e configuração básica
Será necessário instalar o Gulp CLI (de forma global), o que pode ser feito com o comando abaixo:npm install -g gulp-cli
Depois instale typescript, gulp e gulp-typescript nas dependências de projeto:
npm install --save-dev typescript gulp gulp-typescript
Defina as configurações do typescript no arquivo tsconfig.json na raiz da aplicação (Para ver mais informações de todas as opções consulte a documentação).
Para ver um exemplo de configuração, veja este exemplo no github:
Crie o gulpfile.js também na raiz da aplicação. Ele será responsável pela tarefa de executar o typescript
Tudo pronto! Depois basta executar o comando abaixo que irá transpilar o typescript para javascript no "target" definido do tsconfig.json.
gulp TypescriptTranscript
Veja o exemplo de um arquivo TS:
E o arquivo JS gerado:
Configurando o Browserify
O browserify permitirá você definir um arquivo de entrada e baseado em suas referências será feita a transpilação automaticamente de toda árvore que se referencia.Instale o plugin browserify, tesify e vinyl-source-strem, para juntar todos os modulos em um único arquivo.
npm install --save-dev browserify tsify vinyl-source-stream
Com a configuração abaixo do gulpfile.js o arquivo de entrada é utilizado para buscar todas as dependências e gerar um novo arquivo .js. Ao executar o comando abaixo é utilizado o arquivo 03BrowserUsage.ts, visto a dependência 01Basic.ts e gerado o arquivo bundle.js
gulp browserify
Já ficou interessante, mas ainda é preciso executar o comando para transpilar. Vamos agora configurar para a compilação acontecer automaticamente quando os arquivos tiverem alteração com o watchify.
Instale os plugins watchify e gulp-util:
npm install --save-dev watchify gulp-util
Para entender o Browserify veja este link:
https://benclinkinbeard.com/posts/how-browserify-works/
O browserify utiliza um arquivo de entrada, para descobrir todas as dependências e gerar um empacotamento de javascript. Ele também resolve o uso de recursos produtivos do Node.js que não existem para o browser – que é o uso de módulo por exemplo. O uso do require tão comum no Node.js não existe para o javascript no browser. O Browserify implementa um tipo de require interpretando este javascript. O mesmo é feito para o exports.
Desta forma você pode criar seu javascript modularizado, até mesmo usando o typescript, e ainda assim conseguir transformar em um javascript entendível pelo navegador.
Referência
https://www.typescriptlang.org/docs/handbook/gulp.html
