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