Using Grunt to concat multiple js files but want them split?

Question

I am new to grunt (literally installed it today and using it) and its great, but i cannot work out something.

I have an angularJs project and i would like to concat all my javascript files into 3 files overall.

So i would have

"base" - all the vendor javascript files for plugins etc

"app" - all the controllers etc used by all users

"admin" - all the controllers etc used but only ever accessed by administrators

Now i have install grunt and setup my task for concat, but how can i have multiple dest and src attributes?

Example of grunt file

grunt.initConfig({
    // Metadata
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        options: {
            stripBanners: true
        },
        dist: {
            src: ['Scripts/jquery-*.js', '!Scripts/jquery-*.min.*', '!Scripts/jquery-*.intellisense.*', 'Scripts/bootstrap.js', 'Scripts/respond.js', 'js/**/*.js'],
            dest: 'dist/app.js'
        },
        distCss: {
            src: ['Content/bootstrap.css', 'Content/site.css'],
            dest: 'dist/app.css'
        }
    },
});

Once i have figured this out, can i then have multiple ugilify attributes to ugilify each js file created?

Dreeda

Answer 1

you can set up seperate tasks to perform when ever you run grunt. each task will concatenate different sources.

from grunt-contrib-concat:

In this example, running grunt concat will build two separate files. One "basic" version, with the main file essentially just copied to dist/basic.js, and another "with_extras" concatenated version written to dist/with_extras.js.

grunt.initConfig({
  concat: {
    basic: {
      src: ['src/main.js'],
      dest: 'dist/basic.js',
    },
    extras: {
      src: ['src/main.js', 'src/extras.js'],
      dest: 'dist/with_extras.js',
    },
  },
});

after which you need to use grunt-contrib-uglify plugin to minify the output files from grunt-concat.

Stingy

Literally just figured this out. Was gonna remove post, but you answered it before hand. Thanks – Dreeda

How to configure above example for multiple extras files say - js and css ? – Steffy

It's just a matter of the name. You can add any number of items with different names. ex: basic,extras,foo,bar... for more info visit gruntjs.com/configuring-tasks – Hypolimnion