title: Getting started on minifying CSS/SCSS with Grunt?
body: <p>After inheriting a project, I've found the developer was using SCSS and Grunt to Minify his code. I'm new to both, but noticed I had to install grunt-cli locally. I've done so and need to make some edits to the style sheets, but am still working through how to get the scss to minify after making changes.</p>
  
  <p>The structure of the grunt/scss area is:</p>
  
  <pre><code>_ (root folder)
  _/css
  _/grunt
  _/img
  _/inc
  _/img
  _/js
  _/misc
  _/sass
  </code></pre>
  
  <p>Inside _/grunt is:</p>
  
  <pre><code>gruntfile.js
  npm-debug.log
  package.json
  </code></pre>
  
  <p>Steveax helped me figure our that I was missing the local grunt setup: </p>
  
  <pre><code>npm install
  </code></pre>
  
  <p>I've found the SCSS files inside the _/scss folder and am comfortable editing them for the purposes of updating styles; however, after saving one I've noticed that they don't automatically update the minified css in the _/css folder, and am left looking through the files and documentation for a solution. I think an experienced eye will know what command I've missed.</p>
  
  <p>Here is an example of an scss file, _/sass/common.scss, I'd like to be able to save and replace the css equivalent, _/css/common.css</p>
  
  <p>EDIT: Per the help of Robert Levy (below), it seems I just need to run Grunt after making changes.</p>
  
  <p>(x-See edit above) Do I simply run uglify from the _ directory?</p>
  
  <pre><code> uglify /sass/common.scss -o /css/common.css -p 1
  </code></pre>
  
  <p>Inside of package.json is:</p>
  
  <pre><code>{
    "name": "exampletheme.com",
   "version": "0.1.0",
    "devDependencies": {
      "grunt": "~0.4.1",
      "grunt-contrib-concat": "^0.3.0",
      "grunt-contrib-uglify": "^0.4.0",
      "grunt-contrib-imagemin": "^0.5.0",
      "grunt-contrib-watch": "^0.6.0",
      "grunt-contrib-compass": "^0.7.2",
      "grunt-contrib-sass": "^0.7.3"
    }
  }
  </code></pre>
  
  <p>Inside of _/grunt/gruntfile.js is:</p>
  
  <pre><code>module.exports = function(grunt) {
  
  // All configuration goes here 
  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
  
      concat: {
          // Configuration for concatinating files goes here.
          dist: {
              src: [
                      '../js/libs/owl.carousel.js',
                      '../js/libs/jquery.actual.js',
                      '../js/libs/chosen.jquery.js',
                      '../js/libs/jquery.parallax.js',
                      '../js/src/common.js'  
              ],
              dest: '../js/pro/global.js',
          },
      },
  
      uglify: {
          build: {
              src: '../js/pro/global.js',
              dest: '../js/pro/global.min.js',
          },
      },
  
  
      imagemin: {
          dynamic: {
              files: [{
                  expand: true,
                  cwd: '../img/src/',
                  src: ['**/*.{png,jpg,gif}'],
                  dest: '../img/pro/'
              }]
          }
      },
  
      compass: {
          dev: {
              options: {              
                  sassDir: '../sass',
                  cssDir: '../css',
                  fontsDir: '../fonts',
                  imagesDir: '../img/',
                  images: '../img/',
                  javascriptsDir: '../js/pro',
                  //environment: 'development',
                  outputStyle: 'compressed',
                  relativeAssets: false,
                  httpPath: '.',
              }
          },
      },
  
      watch: {
          scripts: {
              files: ['../js/**/**.js'],
              tasks: ['concat', 'uglify'],
              options: {
                  spawn: false,
              },
          },
          images: {
              files: ['../img/src/**.{png,jpg,gif}'],
              tasks: ['imagemin'],
              options: {
                  spawn: false,
              }
          },
          compass: {
              files: ['../**/*.{scss,sass}'],
              tasks: ['compass:dev'],
          }
  
      },
  
      svgstore: {
          defaults: {
              options: {
                  prefix : 'icon-',
              },
              files: {
                  '../img/svg-defs.svg': ['../img/svg/*.svg']
              }
          }
      },
  
  
  });
  
  // Where we tell Grunt we plan to use this plug-in.
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-svgstore');
  
  // Where we tell Grunt what to do when we type "grunt" into the terminal.
  grunt.registerTask('default', ['concat', 'uglify', /*'imagemin',*/ 'compass', 'svgstore', 'watch']);
  
  };
  </code></pre>