Menu
trying to minify compiled source code of a project for production, I'm using Gulp as the task runner.
the source files look like this,
html
<!--... . . various scripts and styles . . . . . ---> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/http.dev.js"></script> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <body> <app></app> </body> my app directory structure is as follows,
. ├── main.js ├── main.js.map ├── main.ts ├── main.app.js ├── main.app.js.map ├── main.app.ts ├── x.component1 │ ├── x.component.one.js │ ├── x.component.one.js.map │ └── x.component.one.ts └── x.component2 ├── x.component.two.js ├── x.component.two.js.map └── x.component.two.ts app/main.ts
import {bootstrap} from 'angular2/platform/browser'; import {MyAwesomeApp} from './main.app' bootstrap(MyAwesomeApp); main.app.ts
@Component({ selector: 'app', template: ` <component-1></component-1> <component-2></component-2> `, directives: [Component1, Component2] }) export class MyAwesomeApp { } then the components,
@Component({ selector: 'component-1', template: ` Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi. ` }) export class Component1 { } and
@Component({ selector: 'component-2', template: ` Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi. ` }) export class Component2 { } All the TypeScript files are compiled down to ES5 JavaScript, further need to minified to main.js
so my questions are,
.js files to minify to a single file and reference it as main in production branch?my TypeScript version is, 1.8.2
Thank you for any help.
651
If you want to compile all your TypeScript files into a single one, you need to use the outFile property of the TypeScript compiler. It's configurable through the gulp-typescript plugin.
This way you don't need to configure SystemJS to load module based on file names:
<script> // Not necessary anymore /* System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); */ System.import('app/main') .then(null, console.error.bind(console)); </script> The module names and their contents are now present in this single file. The same way for the packaged bundle files of the Angular2 distribution (angular2.dev.js, http.dev.js, ...). To use this file, simply include it in a script element.
This way you won't break module imports.
Then you can minify this single file with the uglify plugin of gulp...
175
** Create a single file from TS with options in tsconfig.json.
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": true, "noImplicitAny": false, "outDir":"client/build/", "outFile": "client/build/all.js", "declaration": true }, "exclude": [ "node_modules", "server" ], "include": [ "client/*.ts", "client/**/*.ts", "client/**/**/*.ts" ] } // Include all folders to put to a file. ** Build the output file and include as follows: Example:
<script> // Alternative way is compile in all.js and use the following system config with all the modules added to the bundles. // the bundle at build/all.js contains these modules System.config({ bundles: { 'client/build/all.js': ['boot','components/all/present','components/main/main','components/register/register','components/login/login','components/home/home','services/userdetails','services/httpprovider'] } }); // when we load 'app/app' the bundle extension interrupts the loading process // and ensures that boot of build/all.js is loaded first System.import('boot'); </script> ** Minify the all.js file as you do normally.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
