Search code examples
javascriptangularjsvendor

Combine vendor javascripts in angular 2

I'm using Angular 2 and I'd like to know how can I combine my vendor javascript files.

for example, I have these files:

  • jquery.min.js
  • slick.min.js
  • bootstrap.min.js

I want to output them as vendor.js.

Is it possible do to this?

Edit 1

In Laravel There's a service called Elixir, It does exactly what I wish to do with my Angular app.

Solution

  • You can use Grunt / Gulp. With grunt, you write something like concat:

    concat: {
    options: {
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %> */'
    },
    js_libs: {
        src: ["jquery.js", "bootstrap.js"],
        dest: 'vendor.js'
    },
}

    Or if you also want to uglify:

    uglify: {
    options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    js_libs: {
        src: ["jquery.js", "bootstrap.js"],
        dest: 'vendor.min.js'
    }
},