Latest gruntfile

gruntfile.js

module.exports = function(grunt) {

  grunt.registerTask('watch', [ 'watch' ]);

  grunt.initConfig({

    // Make JS tiny
    uglify: {
      options: {
        mangle: false
      },
      js: {
        files: {
          'assets/js/scripts-header.min.js': ['assets/js/scripts-header.js'],
          'assets/js/scripts-footer.min.js': ['assets/js/scripts-footer.js']
        }
      }
    },

    // Minify Images. This is like using ImageOptim, but without the GUI
    imagemin: {
      dynamic: {
        files: [{
          expand: true,
          cwd: 'assets/images',
          src: ['**/*.{png,jpg,gif,svg}'],
          dest: 'assets/images'
        }]
      }
    },

    // Import whole folder into one file, allowing you to break down elements
    sass_globbing: {
      target: {
        files: {
          'assets/scss/partials/_menus.scss': 'assets/scss/partials/menus/*.scss',
          'assets/scss/partials/_mixins.scss': 'assets/scss/partials/mixins/*.scss',
          'assets/scss/partials/_components.scss': 'assets/scss/components/*.scss'
        }
      }
    },

    // Compile SCSS into css files, for browsers that are 
    sass: {
      stage: {
        options: {
          style: 'nested', // No need to compress while testing
        },
        files: {
          'assets/css/style.css' : 'assets/scss/style.scss',
          'assets/css/woocommerce.css' : 'assets/scss/woocommerce.scss',
          'assets/css/login.css' : 'assets/scss/login.scss'
        }
      },

      // When we're going live, compress the shit out of
      dist: {
        options: {
          style: 'compressed', // Change to Compressed once live.
        },
        files: {
          'assets/css/style.css' : 'assets/scss/style.scss',
          'assets/css/woocommerce.css' : 'assets/scss/woocommerce.scss',
          'assets/css/login.css' : 'assets/scss/login.scss'
        }
      }
    },

    // Combine Mediaqueries, but lose critical css?
    combine_mq: {
      target: {
        files: {
          'assets/css/woocommerce.css': ['assets/css/woocommerce.css'],
          'assets/css/style.css': ['assets/css/style.css']
        },
        options: {
          beautify: false
        }
      }
    },

    // Autoprefix everything, make it backwards compatible
    postcss: {
        options: {
            map: false,
            processors: [
                require('autoprefixer-core')({
                    browsers: ['> 20%', 'last 10 versions', 'Firefox > 20']
                })
            ],
            remove: false
        },
        dist: {
            src: 'assets/css/*.css'
        }
    },

    /**
     * Fallback for Internet Explorer!
     */

    // Make all rems into px, then output the file    
    pixrem: {
      options: {
        rootvalue: '100%',
        replace: true
      },
      dist: {
        src: 'assets/css/style.css',
        dest: 'assets/css/ie.css'
      }
    },

    // Remove all mediaqueries after 1400px wide
    stripmq: {
      options: {
        width: 1400,
        type: 'screen'
      },
      all: {
        files: {
          'assets/css/ie.css': ['assets/css/ie.css']
        }
      }
    },

    /*
    * End of Fallback for Internet Explorer
    */

    // Watch for any changes while developing
    watch: {
      js: {
        files: ['assets/js/*.js'],
        tasks: ['uglify:js']
      },
      css: {

        // Watch sass changes, then process new images and merge mqs
        files: [
          'assets/scss/*.scss',
          'assets/scss/**/*.scss',
          'assets/scss/**/**/*.scss'
        ],
        
        tasks: [
          'sass_globbing:target',
          'sass:stage',
          'postcss:dist',
          'pixrem',
          'stripmq',
          'browserSync'
        ]
      },
      options: {
        spawn: false // Very important, don't miss this
      }
    },

    // Using browsersync is the only way to test.
    browserSync: {
      default_options: {
        bsFiles: {
          src: [
            "assets/css/*.css",
            "*.html,",
            "**/*.html,",
            "*.php,",
            "**/*.php,"
          ]
        },
        options: {
          watchTask: true,
          open: false,
          proxy: "http://local.dev:8080" // If your site runs through MAMP, whats the URL
        }
      }
    }
  });

  // Register everything used
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  // Run everything with 'grunt', these need to be in
  // a specific order so they don't fail.
  grunt.registerTask('default', [
    'sass_globbing:target', // Glob together needed folders
    'sass:stage', // Run sass
    'postcss:dist', // Post Process with Auto-Prefix
    'browserSync', // live reload
    'newer:imagemin:dynamic', // Compress all images
    'pixrem', // Fallback for IE and Android
    'stripmq', // remove mediaqueries for IE
    'watch:css' // Keep watching for any changes
  ]);

  // When we go live, run `grunt live` instead
  grunt.registerTask('live', [
    'uglify',
    'sass_globbing:target', // Glob together needed folders
    'sass:dist', // Run sass
    'postcss:dist', // Post Process with Auto-Prefix
    'combine_mq', // Combine MQ's
    'newer:imagemin:dynamic', // Compress all images
    'pixrem', // Fallback for IE and Android
    'stripmq' // Take it all away.
  ]);
};