用grunt搭建自动化的web前端开发环境-完整教程

各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真的”重复，表 示重点）。至于grunt的作用，这里不详细说了，总之你如果做web前端开发，你一定要用grunt。还有一点，它完全免费，没有盗版。既强大又免费的 东西，为何不用？
当然了，你如果你能找到更好的替代grunt的其他工具也是可以的，例如gulp。Gulp未来有可能替代grunt，但是现在来说市场占有率还是不如grunt。而这种工具咱们是现在就需要用的，所有不要再犹豫了，拿来主义，先用grunt，即学即用。
本文章旨在讲解grunt入门，以及讲解grunt最常用的几个插件的使用。篇幅可能会比较长，大家耐心看。本文例证详细、清晰的讲解每一个知识点。 但是——如果你看完本文还是不会，我还有最后一个大招。不过你可能需要付出一顿饭钱 + 一包烟钱的代价——去看看我录制的视频教程《用grunt搭建自动化的web前端开发环境》（教程中有源码下载） ，保证你看完就会用。
（PS：碰巧，本文基于windows环境写的，而视频教程是基于mac os录制的，两者兼备了）
废话不多少，视频教程你也先别看，钱别着急花。先挑战一下自己的理解能力，看下文讲述是否清晰、是否能看懂。

教程参考：http://developer.51cto.com/art/201506/479127.htm
中文官网：http://www.gruntjs.net/getting-started

npm install -g grunt-cli

npm install  grunt  --save-dev

文档目录

插件安装

npm install grunt-contrib-csslint --save-dev  css语法检查
npm install grunt-contrib-cssmin --save-dev    css压缩
npm install grunt-contrib-jshint --save-dev   js语法检查
npm install grunt-contrib-uglify --save-dev  js压缩
npm install grunt-contrib-watch --save-dev   自动化检查

css语法检查

.csslintrc

{
    "adjoining-classes":false,
    "box-sizing":false,
    "box-model" : false,
    "compatible-vendor-prefixes": false,
    "floats":false,
    "font-sizes":false,
    "gradients":false,
    "important":false,
    "known-properties":false,
    "outline-none":false,
    "qualified-headings":false,
    "regex-selectors":false,
    "shorthand":false,
    "text-indent":false,
    "unique-headings":false,
    "universal-selector":false,
    "unqualified-attributes":false
}

js语法检查配置文件
.jshintrc

{
    "boss":false,
    "curly":true,
    "eqeqeq":true,
    "eqnull":true,
    "expr":true,
    "immed":true,
    "newcap":true,
    "noempty":true,
    "noarg":true,
    "undef":true,
    "regexp":true,

    "browser":true,
    "devel":true,
    "node":true
}

Gruntfiles.js

//包装函数
module.exports = function(grunt){
    //任务配置，所有插件的配置信息
    grunt.initConfig({
        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        // ugilify插件的配置信息
        uglify:{
            option:{
                stringBanners:true,
                banner:'/*<%=pkg.name%>-<%=pkg.version%>.js <%- grunt.template.today("yyyy-mm-dd")%>*/\n'
            },
            bulid:{
                src:"src/test.js",
                dest:'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
            }
        },
        //jshint插件配置信息
        jshint:{
            bulid:['Gruntfile.js','src/*.js'],
            options:{
                jshintrc:'.jshintrc'
            }
        },
        csslint:{
            bulid:['Gruntfile.js','src/*.css'],
            options:{
                csslintrc:'.csslintrc'
            }
        },
        //watch 插件的配置信息
        watch:{
            bulid:{
                files:['src/*.js','src/*.css'],
                tasks:['jshint','csslint','uglify'],
                options:{spawn:false}
            }
        }

});
    // 告诉grunt我们将使用的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）
    grunt.registerTask('default',['jshint','uglify','csslint','watch']);
};