grunt setup for web projects.

package.json

{
  "name": "package",
  "version": "0.0.1",
  "dependencies": {
    "grunt": "^1.0.1"
  },
  "devDependencies": {
    "grunt-autoprefixer": "^3.0.4",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^3.1.0",
    "grunt-contrib-watch": "^1.0.0"
  },
  "license": "ISC"
}

Gruntfile.js

module.exports = function (grunt) {

    grunt.initConfig({
        watch: {
            scss: {
                files: 'assets/css/*.scss',
                tasks: ['concat', 'sass', 'autoprefixer']
            }
        },
        uglify: {
            js: {
                files: {
                    'assets/dist/scripts.min.js': [
                        'assets/js/main.js'
                    ]
                }
            }
        },
        concat: {
            sass: {
                src: [
                    'assets/css/*.scss'
                ],
                dest: 'assets/css/build.scss'
            }
        },
        sass: {
            dist: {
                options: {
                    style: 'compressed'
                },
                files: {
                    'assets/dist/style.min.css': 'assets/css/build.scss'
                }
            }
        },
        autoprefixer: {
            dist: {
                files: {
                    'assets/dist/style.min.css': 'assets/dist/style.min.css'
                }
            }
        }
    });

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

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

 

Categories: Development