grunt搭建自动化的开发环境

（1）首先需要下载安装npm、node,创建一个简单的helloworld,这些我就不多说了。（注意两点。第一，grunt依赖于nodejs的v0.8.0及以上版本；第二，奇数版本号的版本被认为是不稳定的开发版，不过从官网上下载下来的应该都是偶数的稳定版）

（2）然后就是下载安装grunt-cli

命令行输入 npm install -g grunt-cli ,全局安装grunt
检查是否安装成功，在命令行输入grunt，出现以下提示说明安装成功

（3）下载安装grunt

在我们创建的简单项目目录下，在命令行输入：npm install grunt --save-dev
“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项
回车后可以在项目的package.json文件里看见

验证grunt是否安装成功，在命令行输入：grunt,出现以下提示说明安装成功

（4）配置Gruntfile.js,该文件与package.json同级，主要是运行grunt需要的配置文件

再在命令行输入：grunt,配置了Gruntfile.js文件，就不会再报warning和提示default等问题了

（6）grunt插件

　　进入grunt官网的插件列表页面 http://www.gruntjs.net/plugins ，我们能看到grunt到目前位置的所有插件。现在里面有4560个插件，这个数量每天都在增加。

　　插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。

　　跟jquery一样，插件那么多，肯定不会全部用。grunt官网插件列表的前几个插件中的前几个插件，下载量最多，它们肯定是大家都在用的插件

　　咱们可以把前几名插件的作用简单描述一下，看看你在实际编码过程中是否需要？其实不用看就知道答案——肯定需要——要不然怎么会下载量那么高呢？

Contrib-jshint——javascript语法错误检查
contrib-csslint一一css语法错误检查
Contrib-uglify——压缩javascript代码
Contrib-cssmin——压缩css代码
Contrib-concat——合并多个文件的代码到一个文件中
Contrib-watch——实时监控文件变化、调用相应的任务重新执行
Contrib-clean——清空文件、文件夹
Contrib-copy——复制文件、文件夹
karma——前端自动化测试工具

　　grunt集全世界web前端开发的智慧于一身，比你想想的更加强大，它的插件库能应对你在web前端开发遇到的任何事情。

（7）插件介绍

uglify插件---js代码压缩插件
官方网址:https://www.npmjs.com/package/grunt-contrib-uglify
下载安装，直接在命令行输入：npm install grunt-contrib-uglify --save-dev

然后在Gruntfile.js文件里加入配置

//uglify配置信息
        uglify: {
          options: {
            stripBanners:true,
            banner: '/*! <%= pkg.name %> - <%= pkg.version %>.js <%= grunt.template.today("yyyy-mm-dd") %> */
'
          },
          buildall: {//任务三：按原文件结构压缩js文件夹内所有JS文件
                files: [{
                    expand:true,
                    cwd:'public/javascripts/app',//js目录下
                    src:'**/*.js',//所有js文件
                    dest: 'public/javascripts/appBuild',//输出到此目录下
                    ext: '.min.js'
                }]
            }
        }

// These plugins provide necessary tasks.加载插件
    grunt.loadNpmTasks('grunt-contrib-uglify');


    // Default task.注册默认任务
    grunt.registerTask('default', [ 'uglify']);

我的项目目录结构如下：
然后在命令行中输入：grunt
可以看见在appBulid文件夹下生成了js的压缩文件

然后同理npm install grunt-contrib-插件名 --save-dev 安装jshint(js语法检查插件)、csslint(css语法检查插件)、cssmin(css压缩插件)、watch(实时监控文件变化、调用相应的任务重新执行)

grunt.registerTask('default', ['csslint', 'jshint', 'cssmin', 'uglify', 'watch']);任务注册的顺序，先语法检查，再压缩，最后是监控

相关配置Gruntfile.js代码如下：

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({

        //Read the package.json (optional)
        pkg: grunt.file.readJSON('package.json'),


        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %>
' +
                '* Copyright (c) <%= grunt.template.today("yyyy") %> ',
        //uglify配置信息
        uglify: {
          options: {
            stripBanners:true,
            banner: '/*! <%= pkg.name %> - <%= pkg.version %>.js <%= grunt.template.today("yyyy-mm-dd") %> */
'
          },
          buildall: {//任务三：按原文件结构压缩js文件夹内所有JS文件
                files: [{
                    expand:true,
                    cwd:'public/javascripts/app',//js目录下
                    src:'**/*.js',//所有js文件
                    dest: 'public/javascripts/appBuild',//输出到此目录下
                    ext: '.min.js'
                }]
            }
        },
        //jshint配置信息
        jshint: {
          all: ['Gruntfile.js', 'public/javascripts/app/*.js']
          // options: ['Gruntfile.js', 'public/javascripts/app/*.js'],
          // build: {
          //   jshintrc: '.jshintrc'
          // }
        },
        //csslint配置信息
        csslint: {
            options: {
              csslintrc: '.csslintrc'
            },
            strict: {
              options: {
                import: 2
              },
              src: ['public/stylesheets/app/*.css']
            },
            lax: {
              options: {
                import: false
              },
              src: ['public/stylesheets/app/*.css']
            }
        },
        //cssmin配置信息
        cssmin: {
          options:{
                stripBanners:true, //合并时允许输出头部信息
                banner:'/*!<%= pkg.name %> - <%= pkg.version %>-‘+‘<%=grunt.template.today("yyyy-mm-dd") %> */
'
            },
            build:{
              files: [{
                  expand:true,
                  cwd:'public/stylesheets/app',//css目录下
                  src:'**/*.css',//所有css文件
                  dest: 'public/stylesheets/appmin',//输出到此目录下
                  ext: '.min.css'
              }]
            }
        },
        //watch配置
        watch: {
          files:['public/javascripts/app/*.js', 'public/stylesheets/app/*.css'],
          tasks:['uglify', 'jshint', 'csslint', 'cssmin'],
          options: {spawn:false}
        }


    });

    // These plugins provide necessary tasks.加载插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Default task.注册默认任务
    grunt.registerTask('default', ['csslint', 'jshint', 'cssmin', 'uglify', 'watch']);
};