3

Me and my team recently shifted to Angular2 (or AngularJS 2) from AngularJS 1.x. We used to use Yeoman Angular Generator for scaffolding and grunt for building and creating a war using the inbuilt gruntfile.js that used to get created by default with the above mentioned generator. We used it by making some minor changes to it and we were good to go.
What this file essentially does is:

  • It combines all third party dependency js files installed from package.json in node_modules folder (i.e. npm install) & optionally even from bower.json in bower_components folder(i.e. bower install) [if you are using it] into a single vendor.js file (Does so by doing concatenation, minification and uglification)
  • It repeats the above steps for css files and combines it into vendor.css
  • It combines all user javascript files into scripts.js and css files in styles.css
  • In bundles these 4 files with index.html and other necessary things like images, fonts, etc.

I have been looking for a similar solution for Angular2 but have failed so far. I tried using gulp by using gulpfile.js found in angular2-seed project or ng build from angular-cli project but none have provided such a solution. The problem always occurs with the node_modules folder. The typescript ts files from these folders which are completely unnecessary get built into the bundle.

Now I do understand that Angular2 is different from Angular1 and all but how can build a good build by in this? What approach should I take? And can I achieve anything like what I used to get in Angular1?

theHeman
  • 505
  • 1
  • 6
  • 26
  • Are you using pure JS? Or TypeScript? –  Jul 29 '16 at 07:36
  • I am using Typescript – theHeman Jul 29 '16 at 07:59
  • Have you read this blog post? http://blog.scottlogic.com/2015/12/24/creating-an-angular-2-build.html He uses ECMA 6 setup for the gulp. And it look like you can take your former gulp config and just paste? –  Jul 29 '16 at 08:16
  • @McBoman, my former config was grunt based not gulp and it has no way to deal with Typescript so I can't use it.. The blog seems to be good.. Going through it now – theHeman Jul 29 '16 at 08:29
  • I will just write you a gulp file for css and ts. Are you using any SASS or LESS? –  Jul 29 '16 at 08:41

1 Answers1

1

So if you use gulp which is a fantastic tool if you ask me :-) then this setup for a gulp file would work.

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const del = require('del');
const typescript = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');
const bower = require('gulp-bower');

/*
    Clean current builds
*/
gulp.task('clean', function () {
  return del('dist/**/*');
});

/*
    Pull in bower dependencies.
    Uses default .bowerrc path
*/
gulp.task('bower', function() {
  return bower();
});

//Use custom path
/*
gulp.task('bower', function() {
  return bower('./my_bower_components')
    .pipe(gulp.dest('lib/'))
});
*/

/*
    Minify css
    Remember to edit distination path
*/
gulp.task('minify-css', function() {
    return gulp.src('styles/*.css')
        .pipe(cleanCSS({debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(gulp.dest('dist')); // Here
});


/*
    Typescript compile
    Remember to edit distination path
*/
gulp.task('compile', ['clean'], function () {
  return gulp
    .src('app/**/*.ts')
    .pipe(typescript(tscConfig.compilerOptions))
    .pipe(gulp.dest('dist/app')); // Here
});

gulp.task('build', ['compile', 'minify-css', 'bower']);
gulp.task('default', ['build']);

OBS!

Remember to edit the destination paths.

I have just added bower handling. But when it comes to node modules, you just need to keep your package.json file and then run a npm install when modules are needed.

To bundle all node modules and bower components will you need the gulp bundle kit.

https://www.npmjs.com/package/gulp-bundle-assets