Grunt exemple file : include SASS, Compass, StyleGuide, cssLint, jsHint and uglify

config.rb

# -----------------------#
# ::: HOW USE SCSS ? ::: #
# -----------------------#

# 1 - Copy "SCSS" folder where you need the "CSS" folder
# 2 - Open commande line in "SCSS" folder (should contain this config.rb)
# 3 - Enter "compass watch"
# 4 - Done
# Notes: if you have a problem, force the config.rb:
#        => compass compile -c config.rb --force

http_path = "/"
css_dir = "path_to_frontend/css"
sass_dir = "path_to_frontend/scss"
images_dir = "path_to_frontend/images"
javascripts_dir = "path_to_frontend/js"

# If you need to change "environment":
# => compass compile -e development --force
# => compass compile -e production --force
if environment == :production
  output_style = :compressed
else
  output_style = :expanded
  #sass_options = { :debug_info => true }
end

# Enable relative paths to assets via compass helper functions for sprite:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

Gruntfile.js

/* ----------------- */
/* ::: G R U N T ::: */
/* ----------------- */

module.exports = function(grunt) {

// Project configuration.
    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        // Watch les SCSS
        watch: {
            compass: {
                files: ['path_to_frontend/scss/**/*.{scss,sass}'],
                tasks: ['compass:dev']
            } 
        },

        // Compass (utilise le fichier de config ruby)
        compass: {                  
            dev: {                 
                options: {
                    config: 'config.rb'
                }
            },
            prod: {                 
                options: {
                    config: 'config.rb',
                    environment: 'production',
                    // !IMPORTANT: il faut qu'il détecte un changement pour qu'il minifie les CSS
                }
            }
        },

        less: {
            singleFile: {
                files: {
                    'cssFolder/global.css': 'lessFolder/global.less'
                }
            },
            multipleFilesInOneFile: {
                files: {
                    'cssFolder/global2.css': [
                        'lessFolder/_button.less', 
                        'lessFolder/global.less',
                    ] 
                }
            },
            allFilesInOneFile: {
                files: {
                    'cssFolder/global3.css': 'lessFolder/*.less', 
                }
            },
            allFilesSeparately: {
                // ce n'est pas possible actuelement
            },
            developpement: {
                options: {
                    paths: ["cssFolder/css"],
                    sourceMap: true,
                    sourceMapRootpath: 'file:///C:/Users/lperroteau/www/lab/grunt/less/',
                    sourceMapFilename: 'cssFolder/global.css.map'
                },
                files: {
                    'cssFolder/global.css': 'lessFolder/global.less'
                }
                // 1 - Ajouter le dossier qui contient les ".less" en faisant "Add folder to workspace" (click droit dans source)
                // 2 - Ensuite sur le fichier voulue "Map to networks resource..."
            }
        },

        replace: {
            // Copie le CSS dans docs en modifiant le path des images
            replaceStyleGuide: {
                src: ['path_to_frontend/css/chronomarket.css'],       
                dest: 'doc/front_end/chronomarket.css', 
                replacements: [{
                    from: '../font/',
                    to: '/path_to_frontend/font/', // remplace le path des fonts

                },
                {
                    from: '../images/',
                    to: '/path_to_frontend/images/', // remplace le path du sprite d'icon

                },
                {
                    from: 'background: #edeae5 url(/path_to_frontend/images/background.gif) repeat;',
                    to: 'background: none', // supprime le background de l'image

                }] // doit être une array même si 1 seul argument
            },
            // Dans le master.js, annule le mode debug
            cancelDebugMode: {
                src: ['path_to_frontend/js/chronomarket-master.js'],       
                dest: 'path_to_frontend/js/chronomarket-master.js', 
                replacements: [{
                    from: 'debug     : true',
                    to: 'debug     : false', // remplace le path des fonts

                }] // doit être une array même si 1 seul argument
            }
        },

        // Créer un guide des styles
        // https://github.com/indieisaconcept/grunt-styleguide
        styleguide: {
            styledocco: {
                options: {
                    framework: {
                        name: 'styledocco'
                    },
                    name: 'Guide des styles - Chronomarket',
                    template: {
                        // obligatoire, inclure le CSS du site : il sera insérer dans <style type="text/preview">
                        include: ['docs/front_end/chronomarket.css'] 
                    }
                },
                files: {
                    // destination : fichier à documenter
                    'doc/front_end': [
                        'path_to_frontend/scss/1-global/_typography.scss',
                        'path_to_frontend/scss/1-global/_form.scss'
                    ]
                }
            }
        },

        // Lint le CSS
        csslint: {
            all: {
                options: {
                    'important': false,
                    'adjoining-classes': false,
                    'vendor-prefix': false,
                    'fallback-colors': false, 
                    'compatible-vendor-prefixes': false,
                    'ids': false,
                    'unique-headings': false,
                    'box-model': false,
                    //'overqualified-elements': false,
                    'qualified-headings': false,
                    //'text-indent': false,
                    'duplicate-background-images': false,
                    'floats': false,
                    //'font-sizes': false,
                    'outline-none': false,
                    'regex-selectors': false, // interéssant pour projet à venir
                    'universal-selector': false,
                    //'display-property-grouping': false,
                    'star-property-hack': false,
                    //'shorthand': false,
                    'box-sizing': false
                },
                src: [
                    'path_to_frontend/css/chronomarket.css'
                ]
            }
        },

        // Lint le JS
        jshint: {
            all: ['Gruntfile.js', 
                'path_to_frontend/js/chronomarket-master.js', 
                'path_to_frontend/js/chronomarket-global.js',
                'path_to_frontend/js/chronomarket-form.js',
                'path_to_frontend/js/chronomarket-list.js'
            ]
        },

        // Concatène et minifie le JS
        uglify: {
            all: {
                options: {
                    mangle: false, //to prevent changes to your variable and function names
                    banner: '/* !IMPORTANT : NE JAMAIS MODIFER => ce fichier à été minifié le <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                },
                files: {
                    'path_to_frontend/js/dist/chronomarket.min.js': [ 
                        'path_to_frontend/js/chronomarket-helpers.js',
                        'path_to_frontend/js/chronomarket-master.js',
                        'path_to_frontend/js/chronomarket-global.js',
                        'path_to_frontend/js/chronomarket-form.js',
                        'path_to_frontend/js/chronomarket-list.js'
                    ]
                }
            }
        }
    });

    // Task list
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-text-replace');
    grunt.loadNpmTasks('grunt-styleguide');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Task command
    grunt.registerTask('default', ['watch']);
    grunt.registerTask('replaceGuide', ['replaceStyleGuide']);
    grunt.registerTask('guide', ['styleguide']);
    grunt.registerTask('testCSS', ['csslint']);
    grunt.registerTask('testJS', ['jshint']);
    grunt.registerTask('prod', ['compass:prod', 'replace:cancelDebugMode', 'uglify']);
};