Search code examples
javascriptangularjsgruntjsgrunt-contrib-uglifygrunt-contrib-concat

Build whole angular project using grunt


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 ?


Solution

  • 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`
    }