title: How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)
body: <p><em>Note: This question is only relevant for Grunt 0.3.x and has been left for reference. For help with the latest Grunt 1.x release please see my comment below this question.</em></p>
  
  <p>I'm currently trying to use Grunt.js to setup an automatic build process for first concatenating and then minifying CSS and JavaScript files.</p>
  
  <p>I have been able to successfully concatenate and minify my JavaScript files, although each time I run grunt it seems to just append to the file instead of overwriting them.</p>
  
  <p>As for the minifying or even concatenating CSS, I have been unable to do this as of yet!</p>
  
  <p>In terms of grunt CSS modules I have tried using <code>consolidate-css</code>, <code>grunt-css</code> &amp; <code>cssmin</code> but to no avail. Could not get my head around how to use them!</p>
  
  <p>My directory structure is as follows (being a typical node.js application):</p>
  
  <ul>
  <li>app.js</li>
  <li>grunt.js</li>
  <li>/public/index.html</li>
  <li>/public/css/[various css files]</li>
  <li>/public/js/[various javascript files]</li>
  </ul>
  
  <p>Here is what my grunt.js file currently looks like in the root folder of my application:</p>
  
  <pre><code>module.exports = function(grunt) {
  
    // Project configuration.
    grunt.initConfig({
      pkg: '&lt;json:package.json&gt;',
      concat: {
        dist: {
          src: 'public/js/*.js',
          dest: 'public/js/concat.js'
        }
      },
      min: {
        dist: {
          src: 'public/js/concat.js',
          dest: 'public/js/concat.min.js'
        }
      },
      jshint: {
        options: {
          curly: true,
          eqeqeq: true,
          immed: true,
          latedef: true,
          newcap: true,
          noarg: true,
          sub: true,
          undef: true,
          boss: true,
          eqnull: true,
          node: true
        },
        globals: {
          exports: true,
          module: false
        }
      },
      uglify: {}
    });
  
    // Default task.
    grunt.registerTask('default', 'concat min');
  
  };
  </code></pre>
  
  <p>So just to summarise I need help with two questions:</p>
  
  <ol>
  <li>How to concatenate and minify all my css files under the folder <code>/public/css/</code> into one file, say <code>main.min.css</code></li>
  <li>Why does grunt.js keep on appending to the concatenated and minified javascript files <code>concat.js</code> and <code>concat.min.js</code> under <code>/public/js/</code> instead of overwriting them each time the command <code>grunt</code> is run?</li>
  </ol>
  
  <hr>
  
  <p><strong>Updated 5th of July 2016 - Upgrading from Grunt 0.3.x to Grunt 0.4.x or 1.x</strong></p>
  
  <p><code>Grunt.js</code> has moved to a new structure in <code>Grunt 0.4.x</code> (the file is now called <code>Gruntfile.js</code>). Please see my open source project <a href="https://github.com/jasdeepkhalsa/gruntjs-skeleton" rel="noreferrer">Grunt.js Skeleton</a> for help with setting up a build process for <code>Grunt 1.x</code>.</p>
  
  <p>Moving from <code>Grunt 0.4.x</code> to <code>Grunt 1.x</code> <a href="http://gruntjs.com/upgrading-from-0.4-to-1.0" rel="noreferrer">should not introduce many major changes</a>.</p>