Build whole angular project using grunt

Question

I'm using grunt for the first time in order to annotate/minify/uglify my whole angular project. Here is what i have for the moment :

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    ngAnnotate: {
        options: {
            singleQuotes: true
        },
        all: { //"app" target
             files: [
            {
                expand: true,
                src: ['./app/**/*.js'],
                dest: './build',
            },
        ],
        }
    },
    concat: {
        js: { //target
             files: [
            {
                expand: true,
                src: ['./build/**/*.js'],
                dest: '.',
            },
        ],
        }
    },
    uglify: {
        js: { //target
             files: [
            {
                expand: true,
                src: ['./build/**/*.js'],
                dest: '.',
            },
        ],
        }
    }



    //grunt task configuration will go here     
});
//load grunt task
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-ng-annotate');
//register grunt default task
grunt.registerTask('default', ['ngAnnotate', 'concat', 'uglify']);
}

This works great, i get all my .js files in a "build" folder, with the correct folder architecture. The problem is : i only have the javascript files.

What am i supposed to add in the gruntfile to have my whole project architecture in the "build" folder ? ( HTML,CSS and media files in the right places, not only the annotated/minified/uglified javascript ?

Answer 1

Let's assume we want the following post-build file structure:

.
├── build
│   ├── css
│   ├── img
│   └── js
└── index.html

grunt-contrib-concat
You can just add a parameter for your CSS to be concatenated in a single file, just like you did with JS files.

    concat: {
        js: {
            src: [
                'scripts/config.js',
                'app.js',
                'controllers/*.js'
            ],
            dest: 'build/js/main.js'
        },
        css: {
            src: [
                'css/*.css'
            ],
            dest: 'build/css/main.css'
        }
    }

grunt-contrib-cssmin
This will minify your CSS (the single file the concat task created.)

    cssmin: {
        target: {
            files: [{
                expand: true,
                cwd: 'build/css',
                src: ['*.css', '!*.min.css'],
                dest: 'build/css',
                ext: '.min.css'
            }]
        }
    }

grunt-contrib-imagemin
Minifies your images and puts them in build/img .

    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'images/',
                src: ['**/*.{png,jpg,jpeg}'],
                dest: 'build/img/'
            }]
        }
    }

And finally:

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');

grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 'imagemin']);

Answer 2

You'll want to look at the copy task . It lets you copy files from one directory to another (like your html, css, fonts, images, etc):

copy: {
  html: {
    files: [
      {expand: true, cwd: '.app/', src: ['some-dir/index.html'], dest: '.build/'}
    ]
  },
  css: {
    files: [
      {expand: true, cwd: '.app/', src: ['some-dir/styles/**/*.css'], dest: '.build/'}
    ]
  },
  // ... more targets for `copy`
}