grunt + sass 使用记录

环境依赖

• Nodejs for grunt
• Ruby for sass

配置文件

package.json

{  "name": "app",  "version": "1.0.0",  "devDependencies": {    "grunt": "^0.4.5",    "grunt-contrib-watch": "^0.6.1",    "grunt-contrib-sass": "^0.8.1",    "grunt-contrib-jshint": "^0.10.0",    "grunt-contrib-concat": "^0.5.0",    "grunt-contrib-CSSmin": "^0.10.0",    "grunt-contrib-uglify": "^0.6.0",    "grunt-contrib-htmlmin": "^0.3.0",    "grunt-contrib-imagemin": "^0.9.2"  }}

Gruntfile.js

module.exports = function (grunt) {    // grunt config    grunt.initConfig({        pkg: grunt.file.readJSON('package.json'),        sass: {            options: {                style: 'expanded'            },            scss: {                files: [{                    src: 'src/css/main.scss',                    dest: 'src/css/main.css'                }]            }        },        jshint: {                        files: ['gruntfile.js', 'src/js/*.js']        },        concat: {            options: {                banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> *//n',                separator: '/n/*---------分割线---------*//n'            },            js: {                files: [{                    src: ['src/js/base.js', 'src/js/script.js'],                    dest: 'dist/js/<%= pkg.name %>.js'                }]            }        },        cssmin: {            css: {                files: [{                    src: 'src/css/main.css',                    dest: 'dist/css/<%= pkg.name %>.min.css'                }]            }        },        uglify: {            js: {                files: [{                    src: 'dist/js/<%= pkg.name %>.js',                    dest: 'dist/js/<%= pkg.name %>.min.js'                }]            }        },        htmlmin: {            options: {                removeComments:true,                collapseWhitespace:true            },            dist: {                files: [{                    expand: true,       // all html                    cwd: 'src/',                    src: ['**/*.html'],                    dest: 'dist/'                }]            }        },        imagemin: {            img: {                files: [{                    expand: true,        // all images                    cwd: 'src/',                    src: ['**/*.{png,jpg,gif}'],                    dest: 'dist/'                }]            }        },        watch: {            css: {                files: 'src/css/main.scss',                tasks: ['sass']            },            js: {                files: ['<%= jshint.files %>'],                tasks: ['jshint']            }        }    });    // load task    grunt.loadNpmTasks('grunt-contrib-sass');    grunt.loadNpmTasks('grunt-contrib-jshint');    grunt.loadNpmTasks('grunt-contrib-concat');    grunt.loadNpmTasks('grunt-contrib-cssmin');    grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.loadNpmTasks('grunt-contrib-htmlmin');    grunt.loadNpmTasks('grunt-contrib-imagemin');    grunt.loadNpmTasks('grunt-contrib-watch');    // regist task    grunt.registerTask('compile', ['watch']);    grunt.registerTask('default', ['sass', 'jshint', 'concat', 'cssmin', 'uglify']);    grunt.registerTask('html', ['htmlmin']);    grunt.registerTask('img', ['imagemin']);};

参考资源：

• gruntjs.org
• grunt 回顾
• sass入门
• sass.bootcss.com