Blogs Hub

by AskGif | Mar 23, 2019 | Category :coding

Getting started with TypeScript and Gulp

Getting started with TypeScript and Gulp

<p>I&rsquo;ll be upfront &ndash; getting TypeScript building is frustrating, especially the first time. I&rsquo;m starting to get the hang of it, but keep finding myself running into brick walls with no help. This post will help guide you in opening the doors to the world of TypeScript (and I&rsquo;m pretty sure you&rsquo;ll love it).</p> <p>First things first: NPM packages</p> <p>You are going to need to install 5 packages. Shortcut:</p> <p>npm install &ndash;save-dev gulp-typescript &ndash; gulp-typescript does the actual transpilation of TypeScript to JavaScript.</p> <p>npm install &ndash;save-dev tslint &ndash; gulp-tslint uses this as a dependency, so you&rsquo;ll need it.</p> <p>npm install &ndash;save-dev gulp-tslint &ndash; gulp-tslint is a linting package to help enforce style guides and keep your code clean.</p> <p>npm install &ndash;save systemjs &ndash; SystemJS is a module loader that can load ES6, AMD, and CommonJS modules. there&rsquo;s a few options here, so feel free to explore alternatives.</p> <p>npm install &ndash;save es6-shim &ndash; Not all browsers support everything SystemJS needs to operate. This package includes all the shims you&rsquo;ll need.</p> <p>npm install &ndash;save-dev gulp-concat &ndash; gulp-concat concatonates JavaScript files together. You&rsquo;ll need this for SystemJS and ES6-Shim.</p> <p>Setting up the TypeScript configuration</p> <p>&nbsp;</p> <p>tsconfig.json</p> <p>Tsconfig.json is an object of configurations for how the TypeScript build should work. This should live in the same level as your gulpfile.js. Here is a tsconfig.json that I&rsquo;ve been using that will get you moving:</p> <pre class="language-javascript"><code>{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "experimentalDecorators": true, "removeComments": false }, "exclude": [ "node_modules" ] }</code></pre> <p>With this configuration, we are using SystemJS module loader, allowing for @Decorators, stripping comments, and transpiling to ES5. You can find more info on this on typescriptlang.org.</p> <p>&nbsp;</p> <p>tslint.json</p> <p>Tslint.json tells tslint what styles to follow. There are a ton of arguments available for this that you can see on the project Github. Check out this gist for an example of a tslint that I&rsquo;m using.</p> <p>&nbsp;</p> <p>Gulp builds</p> <p>We are going to add new tasks to the gulpfile. This is configured to take all TypeScript files from the &ldquo;ts&rdquo; folder and transpile the output (and SystemJS dependencies) to &ldquo;www/js&rdquo;.</p> <p>&nbsp;</p> <p>Linting the TypeScript</p> <pre class="language-javascript"><code>gulp.task("lint:ts", function() { return gulp.src("ts/**/*.ts") .pipe(tslint({ formatter: "verbose" })) .pipe(tslint.report()) });</code></pre> <p>Compiling the TypeScript to JavaScript</p> <pre class="language-javascript"><code>var tsProject = ts.createProject("tsconfig.json", { outFile: "app.js" }); gulp.task("compile:ts", ["lint:ts"], function() { return tsProject.src() .pipe(ts(tsProject)) .js .pipe(gulp.dest("www/js")); });</code></pre> <p>Concatonating SystemJS dependencies</p> <p>If you have an existing JS concatonation build, you can of course just include these modules to it. But if you don&rsquo;t, you&rsquo;ll need these three files.</p> <pre class="language-javascript"><code>gulp.task("concat:js", function() { return gulp.src([ "node_modules/systemjs/dist/system.js", "node_modules/systemjs/dist/system-polyfills.js", "node_modules/es6-shim/es6-shim.js" ]) .pipe(concat("lib.js")) .pipe(gulp.dest("www/js")); });</code></pre> <p>Loading the modules with SystemJS</p> <p>After you&rsquo;ve run your transpilation and concatonation tasks, you&rsquo;re now ready to add the scripts to your page. Add the following to the bottom of your HTML:</p> <pre class="language-javascript"><code>&lt;script src="js/lib.js"&gt;&lt;/script&gt; &lt;script src="js/app.js"&gt;&lt;/script&gt; &lt;script&gt; System.import("app") .then(function() { console.info("System.import was successful."); }) .catch(function(response) { console.error("Error in System.import, could not bootstrap.", response); }); &lt;/script&gt;</code></pre> <p>All done!</p> <p>Now that wasn&rsquo;t so bad was it? &hellip; Okay, there was a bit involved. But that&rsquo;s in the past now. Time to enjoy TypeScript</p>

read more...