gruntfile-project.md

Grunt / Sass project

package.json

{
  "name": "My Project",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-sass": "~0.11.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-contrib-concat": "^0.4.0"
  }
}

Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({
    sassDir: 'sass/',
    cssDistDir: 'css/',
    jsDir: 'js/',
    pkg: grunt.file.readJSON('package.json'),

    watch: {
      assets: {
        files: ['sass/{,**/}*.scss', 'js/main.js'],
        tasks: ['sass:dev', 'concat:dev'],
      }
    },

    sass: {
        dev: {
            options: {
                outputStyle: 'expanded',
                sourceComments: 'normal'
            },
            files: {
                '<%=cssDistDir%>style.css': '<%=sassDir%>style.scss'
            }
        },
        dist: {
            options: {
                outputStyle: 'compressed',
            },
            files: {
                '<%=cssDistDir%>style.css': '<%=sassDir%>style.scss'
            }
        },
    },

    uglify: {
        dist: {
            files: {
                '<%=jsDir%>scripts.min.js': ['<%=jsDir%>/main.js']
            }
        }
    },

    concat: {
        dev: {
            src: ['<%=jsDir%>script1.js', '<%=jsDir%>script2.js'],
            dest: '<%=jsDir%>scripts.min.js'
        },
        dist: {
            src: ['<%=jsDir%>script1.min.js', '<%=jsDir%>script2.min.js'],
            dest: '<%=jsDir%>scripts.min.js'
        }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('build', [
    'sass:dist',
    'uglify:dist',
    'concat:dist'
  ]);

  grunt.registerTask('default', [
    'sass:dev',
    'concat:dev',
    'watch'
  ]);

};