2

I have a angular 2 application in which typescript compiler options is defined to generate a single outFile which is Scripts1.js and Scripts1.js.map

Now in my index.html 

<script src="Scripts/Script1.js"></script>
    <script>
            System.config({
                packages: {
                    'V1/components/main': {
                        format: 'register',
                        defaultExtension: 'js',
                        defaultJSExtensions: true
                    }
                }
            });
            debugger;
            //System.import('Scripts/main')
            System.import('V1/components/main')
                  .then(null, console.error.bind(console));
        </script>

Which is working fine now How to uglify this using gulp

My gulpFile.js

gulp.task('MinifyBundled', function () {

    console.log('testiang');
    return gulp.src(config.src2)
      .pipe(uglify())
      .pipe(gulp.dest('app/'));

})

which generates Script1.js in my app folder now when I include 

<script src="app/Script1.js"></script>

this minified file it is not working and no errors in console . I guess I'm missing map files while uglifying . I tried this

gulp.task('MinifyBundled', function () {

    console.log('testiang');
    return gulp.src(config.src2)
        .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(uglify())
         .pipe(sourcemaps.write('app/'))
      .pipe(gulp.dest('app/'));

})

P.S : Please don't suggest any other bundling or minification tools, I'm sick of all

sudhir
  • 1,387
  • 3
  • 25
  • 43

3 Answers3

0

If you create bundle from all of your files it would be better to use Webpack and not system.JS (System JS load every module file at runtime while Webpack make a bundle from all your file)

There is a great explanation on how to create a webpack file in the original angular documentation. https://angular.io/docs/ts/latest/guide/webpack.html

Ariel Henryson
  • 1,316
  • 1
  • 10
  • 13
  • Already I tried that using gulp-concat I bundled that and we get error like Multiple reguster cannot be imported in system.import – sudhir Jul 21 '16 at 10:58
  • Okay i see what you're talking about and I think that for your case if you're bundling all of your file and not load them dynamically you should use webpack and not system.js I will update my answer – Ariel Henryson Jul 21 '16 at 11:17
  • I already mentioned I'm not looking for alternatives because I have been facing too many problems on all those and finally landed here, here question refers that can we minify the typescript bundled file using gulp and use it or not? . Thank you for taking time and helping. – sudhir Jul 21 '16 at 11:51
  • The thing is that you need some sort off module loader to work with Angular 2 and you trying to use dynamic loader (System.JS) and use it against the way it was built to. So you are going to work twice harder to achieve your needs. That's why i think more easy way will be to transfer your code to work with Webpack and that's why it was presented in the original documentation. – Ariel Henryson Jul 21 '16 at 13:22
  • Ok dude will go through WebPack then , can you confirm me 2 things that 1)Can I Bundle , minify js files using webpack ? 2) Does it solve absolute and relativ epath issues when I move my html to separte folder? – sudhir Jul 21 '16 at 14:52
  • Webpack has built in plugin for minify uglify and a lot of other things it is cover in the Angular documentation, and I didn't understand your last question – Ariel Henryson Jul 21 '16 at 16:13
0

Better use Angular 2 CLI for developing apps. It provides all baseline works like build, run, unit testing, transpiling of TS files, with NG commands you can create pages, routes with pre-defined code.

Uglify can also be done by changing Angular 2 CLI environment to PROD

Mithun Pattankar
  • 1,372
  • 1
  • 8
  • 12
0

Try gulp uglify with mangle option set as false. i.e .pipe(uglify(), {mangle : false})

Sreeragh A R
  • 2,871
  • 3
  • 27
  • 54