Grunt configuration

Grunt configuration

node -v  // check node
npm update -g npm //update npm

npm install -g grunt-cli //install grunt command line

//existing project
npm install
grunt

//new project
npm init //create a package.json for you.
or
npm install -g grunt-init //creates config files

gruntfile.js //manually create this file

//add plugins

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev

Grunt setup file.js

module.exports = function(grunt) {
    grunt.initConfig({
        //deletes the files in array when called
        clean: [],
        //janus converts CSS stylesheets between left-to-right and right-to-left
        cssjanus: {
            options: {
                swapLtrRtlInUrl: true,
                swapLeftRightInUrl: false,
                generateExactDuplicates: false
            },
            //destination:source
            'app/css/screen-right.css': ['app/css/screen-comb.css']
        },
        //sorting CSS properties in specific order.
        csscomb: {
            module: {
                files: {
                    //destination:source
                    'app/css/screen-comb.css': ['app/css/screen.css']
                }
            }
        },
        //setup for compass sass
        compass: {
            dev: {
                options: {
                    //set watch to true inorder to 
                    //imporove the performance of compass watch
                    watch: true,
                    noLineComments: false,
                    basePath: 'app/',
                    outputStyle: 'compressed', //'expanded',
                    fontsDir: 'fonts',
                    sassDir: 'build/sass',
                    cssDir: 'css',
                    environment: 'production'
                }
            }
        },
        jshint: {
            files: ['Gruntfile.js', 'app/**/*.js'],
            options: {
                globals: {
                    //jQuery: true
                }
            }
        },
        validation: {
            options: {
                proxy: 'http://10.2.3.21:8080/',
                reset: grunt.option('reset') || false,
                stoponerror: false
            },
            //source files as array
            files: {
                src: ['app/index.html']
            }
        },
        browserSync: {
            dev: {
                bsFiles: {
                    src: [
                        'app/css/*.css',
                        'app/*.html'
                    ]
                },
                options: {
                    watchTask: true,
                    server: './app'
                }
            }
        },
        //create pages on fly
        //includepath contains header and footer
        includes: {
            build: {
                cwd: 'app/',
                src: ['page/*.html'],
                dest: 'app/pages',
                options: {
                    flatten: true,
                    includePath: 'app/html_includes/'
                }
            }
        },
        watch: {
            styles: {
                files: ['app/build/**/*.scss'],
                tasks: ['compass']
            },
            grunt: {
                files: [
                    'gruntfile.js'
                ],
                tasks: ["watch"]
            },
            //for watching css comb
            // cssOrder: {
            //     files: ['app/css/screen.css'],
            //     tasks: ['csscomb']
            // }
        }
    });

    // load npm tasks
    grunt.loadNpmTasks('grunt-contrib-compass');

    grunt.loadNpmTasks('grunt-csscomb');
    grunt.loadNpmTasks('grunt-cssjanus');

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-html-validation');

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');


    grunt.loadNpmTasks('grunt-includes');
    grunt.loadNpmTasks('grunt-contrib-clean');


    // define build task
    grunt.registerTask('build', ['includes', 'validation', /*'jshint',*/ 'csscomb', 'cssjanus']);
    // define default task
    grunt.registerTask('default', ['browserSync', 'watch']);
};

package.js

{
  "name": "Admin_panel",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-browser-sync": "^2.0.0",
    "grunt-contrib-compass": "^1.0.1",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-jshint": "^0.11.0",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-csscomb": "^3.0.0",
    "grunt-cssjanus": "^0.2.4",
    "grunt-hologram": "0.0.6",
    "grunt-html-validation": "^0.1.18",
    "grunt-includes": "^0.4.5",
    "grunt-contrib-clean": "^0.6.0"
  }
}