Typescript+Gulp+Browserify+Less+Web Server LiveReload
In this tutorial we create an all-in-one gulp configuration file for Typescript.
First we have to create our project folder, for example “MyTypeScriptProj”.
First dependencies are:
NPM and Node
So you have to install it, the installation process is out of scope of this tutorial, but is very easy todo, simply go to node website and download the installer.
Now go to the project folder and activate npm:
npm initthis create a pacgkage.js file ( you have to answer some questions before the file creation ).
Now is time to install some global packages:
$:> npm install typescript -g$:> npm install gulp -g$:> npm install tsd -g
You have to have the correct rights to install npm global packages.
Now is time to install packages for our project
$:> npm install gulp — save-dev$:> npm install gulp-connect — save-dev$:> npm install gulp-less — save-dev$:> npm install gulp-typescript — save-dev$:> npm install gulp-watch — save-dev$:> npm install browserify— save-dev$:> npm install tsd— save-dev$:> npm install typescript— save-dev$:> npm install vinyl-source-stream— save-dev
As you can see we have replicated some global packages, like gulp or typescript, this is because sometime gulp return some errors during the compilation
Now we have all the packages installed, is time to create the project folder structure, typescript configuration file tsconfig.json and gulp tasks.
create a src folder,
create a src/styles folder
create a src/assets folder
Into src folder create a tsconfig.json file, this is a configuration file for typescript introduced in typescript 1.5 and give all the informations for the scripts compilation.
src/tsconfig.json:
{
“compilerOptions”: {
“target”: “es5”,
“module”: “commonjs”,
“isolatedModules”: false,
“jsx”: “react”,
“experimentalDecorators”: true,
“emitDecoratorMetadata”: true,
“declaration”: false,
“noImplicitAny”: true,
“removeComments”: true,
“noLib”: false,
“preserveConstEnums”: true,
“suppressImplicitAnyIndexErrors”: true
},
“compileOnSave”: false,
“files”: [
“../typings/tsd.d.ts”,
“main.ts”
]
}The description of this file is quite boring, but you can find all the informations about the different options here.
Is important to take in care the files options.
This option define which files we have to compile, pay attention to typings folder, this folder is automatic created by tsd.
Now, in the project root folder, we can create gulpfile.js
gulpfile.js
var gulp = require(‘gulp’);
var ts = require(‘gulp-typescript’);
var watch = require(‘gulp-watch’);
var browserify = require(‘browserify’);
var source = require(‘vinyl-source-stream’);
var less = require(‘gulp-less’);
var tsProject = ts.createProject(‘./src/tsconfig.json’);
var connect = require(‘gulp-connect’);/*
compile typescript
use ES5 and commonJS module
*/
gulp.task(‘typescript’, function() {
/*
old version
var tsResult = tsProject.src().pipe(ts(tsProject));
changed for
*/
tsResult = tsProject.src().pipe(tsProject()); return tsResult.js.pipe(gulp.dest(‘dist/js’));
});/*
Web server to test app
*/
gulp.task(‘webserver’, function() {
connect.server({
livereload: true,
root: [‘.’, ‘dist’]
});
});
/*
Automatic Live Reload
*/
gulp.task(‘livereload’, function() {
gulp.src([‘dist/styles/*.css’, ‘dist/js/*.js’])
.pipe(watch([‘dist/styles/*.css’, ‘dist/js/*.js’]))
.pipe(connect.reload());
});
/*
copy all html files and assets
*/
gulp.task(‘copy’, function() {
gulp.src(‘src/**/*.html’).pipe(gulp.dest(‘dist’));
gulp.src(‘src/assets/**/*.*’).pipe(gulp.dest(‘dist/assets’));
});/*
compile less files
*/
gulp.task(‘less’, function() {
gulp.src(‘src/styles/semantic.less’)
.pipe(less())
.pipe(gulp.dest(‘dist/styles’));
});/*
browserify
now is only for Javascript files
*/
gulp.task(‘browserify’, function() {
browserify(‘./dist/js/main.js’).bundle().pipe(source(‘main.js’)).pipe(gulp.dest(‘dist/js’));
});/*
Watch typescript and less
*/
gulp.task(‘watch’, function() {
gulp.watch(‘src/styles/*.less’, [‘less’]);
gulp.watch(‘src/**/*.ts’, [‘typescript’,’browserify’]);
gulp.watch(‘src/**/*.html’, [‘copy’]);
})
/*
default task
*/
gulp.task(‘default’,[‘less’, ‘typescript’, ‘browserify’, ‘copy’, ‘webserver’, ‘livereload’, ‘watch’]);
As you can see we have define some tasks.
The typescript task read the tsconfig.json file and take all the options, after that gulp compile typescript as Javascript ES5 with commonJS module, if you are brave you can establish to compile in Javascript ES6 too.
The webserver and livereload are the two tasks related with webserver for testing the web app and the automatic reload of webserver when have some changes in css or javascript files into the dist folder.
The webserver have the root folder into the dist folder and the default port is 8080.
The copy task simply copy the assets files, like images and the html files. in this example we suppose that html will be not compiled and is sufficient to copy into the dist folder.
The less task compile less files into css and copy into the dist/styles folder.
The browserify task is a very important piece of puzzle. after the typescript->javascript compilation, browserify create a monolithic javascript file with all the requirements. In this specific case he read the main.js file into dist/js folder, find all the requirements and recreate them into the same folder.
The watch task, is in charge to “watch” if the less files, the ts files and the html files are changed and for every specific result execute one or more tasks.
The dafault task is the mandatory task and execute all the previous tasks.
The last step is the tsd init process
tsd initTSD is package manager for typescript. In my next post i will explain how we can connect tsd files with typescript files and how to compile them correctly.
Now is time to test our project, create a src/main.ts and src/index.html with a reference to js/main.js file into the src folder and start gulp.
gulpIf all work well you will see that now you have a dist folder and you can open the url http://localhost:8080
