To install gulp you first need to install NodeJS in your system. To install NodeJS head off to the NodeJS Site to get it and install it.
After that we need to install gulp. For installing gulp we need to run the command npm install gulp -g .
The benefit of using the JavaScript task runner is that it will watch all the directories and files and only run the selected tasks when the file is changed. Thus it will remove the overhead of manually running any task any time you have done any changes in the file.
So what is the benefit of Gulp for TypeScript ?
The importance of using Gulp for TypeScript is that we can take the TypeScript and automate it down to JavaScript. Lets suppose you have a .ts file and every time you change it you need to manually change it to .js file, instead we can automate this process using Gulp. Along with this there are a lot of different things. Lets suppose you wanted to concatenate multiple .js files together, then we can use gulp to automate it the process.
We need to install gulp-typescript to compile typescript files. According to gulp-typescript, it is a typescript compiler for gulp with incremental compilation support. The features of gulp-typescript are Incremental compilation, error reporting, different output streams for .js, .d.ts files, support for sourcemaps using gulp-sourcemaps etc.. The gulp-typescript can be installed via npm install gulp-typescript -g.
Example : Lets say we have a .ts file downloaded from here. After running the below task where we are taking all the TypeScript files (*.ts) and then converting it to a plain JavaScript file.
var gulp = require('gulp'),
ts = require('gulp-typescript'),
tsPath = 'D:/example/*.ts',
compilePath = 'D:/example/js';
gulp.task('default', function () {
var result = gulp.src(tsPath)
.pipe(ts({
target: 'ES5',
declarationFiles: false,
noExternalResolve: true
}));
return result.js.pipe(gulp.dest(compilePath));
});
JavaScript Result :
var Greeter = (function () {
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function () {
return "<h1>" + this.greeting + "</h1>";
};
return Greeter;
})();
;
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;
Please Like and Share the Blog, if you find it interesting and helpful.
The benefit of using the JavaScript task runner is that it will watch all the directories and files and only run the selected tasks when the file is changed. Thus it will remove the overhead of manually running any task any time you have done any changes in the file.
So what is the benefit of Gulp for TypeScript ?
The importance of using Gulp for TypeScript is that we can take the TypeScript and automate it down to JavaScript. Lets suppose you have a .ts file and every time you change it you need to manually change it to .js file, instead we can automate this process using Gulp. Along with this there are a lot of different things. Lets suppose you wanted to concatenate multiple .js files together, then we can use gulp to automate it the process.
We need to install gulp-typescript to compile typescript files. According to gulp-typescript, it is a typescript compiler for gulp with incremental compilation support. The features of gulp-typescript are Incremental compilation, error reporting, different output streams for .js, .d.ts files, support for sourcemaps using gulp-sourcemaps etc.. The gulp-typescript can be installed via npm install gulp-typescript -g.
Example : Lets say we have a .ts file downloaded from here. After running the below task where we are taking all the TypeScript files (*.ts) and then converting it to a plain JavaScript file.
var gulp = require('gulp'),
ts = require('gulp-typescript'),
tsPath = 'D:/example/*.ts',
compilePath = 'D:/example/js';
gulp.task('default', function () {
var result = gulp.src(tsPath)
.pipe(ts({
target: 'ES5',
declarationFiles: false,
noExternalResolve: true
}));
return result.js.pipe(gulp.dest(compilePath));
});
var Greeter = (function () {
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function () {
return "<h1>" + this.greeting + "</h1>";
};
return Greeter;
})();
;
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;
Please Like and Share the Blog, if you find it interesting and helpful.
No comments:
Post a Comment