grunt自动化环境配置

1.创建package.json文件和Gruntfile.js文件,再执行下grunt命令，ok

一、package.json

{
  "name": "dps",
  "varsion": "0.1.0",
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-connect": "^0.11.2",
    "grunt-contrib-cssmin": "*",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-less": "^1.0.1",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "^0.6.1",
    "load-grunt-tasks": "^3.2.0"
  }
}
二、Gruntfile.js

module.exports = function(grunt) {


    require('load-grunt-tasks')(grunt); //加载所有的任务
    //require('time-grunt')(grunt); 如果要使用 time-grunt 插件

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
         uglify: {
              options: {
               //banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
              },
              my_target: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'js/src/',
                        src: '**/*.js',
                        dest: 'js/des/',
                        rename: function (dest, src) {  
                                  var folder = src.substring(0, src.lastIndexOf('/'));  
                                  var filename = src.substring(src.lastIndexOf('/'), src.length);  
                                  filename = filename.substring(0, filename.lastIndexOf('.'));  
                                  var fileresult=dest + folder + filename + '.min.js';  
                                  grunt.log.writeln("现处理文件："+src+"  处理后文件："+fileresult);  

                                  return fileresult;  
                              } 
                    }
                ]
             }
            },
        cssmin: {
           my_target: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'css/src/',
                        src: '**/*.css',
                        dest: 'css/des/',
                        rename: function (dest, src) {  
                                var folder = src.substring(0, src.lastIndexOf('/'));  
                                var filename = src.substring(src.lastIndexOf('/'), src.length);  
                                filename = filename.substring(0, filename.lastIndexOf('.'));  
                                var fileresult=dest + folder + filename + '.min.css';  
                                grunt.log.writeln("现处理文件："+src+"  处理后文件："+fileresult);  

                                return fileresult;
                                }
                    }
                ]
            }

        },
        jshint: {
            options: {
                //大括号包裹
                curly: true,
                //对于简单类型，使用===和!==，而不是==和!=
                eqeqeq: true,
                //对于首字母大写的函数（声明的类），强制使用new
                newcap: true,
                //禁用arguments.caller和arguments.callee
                noarg: true,
                //对于属性使用aaa.bbb而不是aaa['bbb']
                sub: true,
                //查找所有未定义变量
                undef: true,
                //查找类似与if(a = 0)这样的代码
                boss: true,
                //指定运行环境为node.js
                node: true
            },
            //具体任务配置
            files: {
                src: ['js/src/*.js']
            }
        },
        less: {
            development: {
                files: [{
                    expand: true,
                    cwd: 'less/src',
                    src: ['*.less'],
                    dest: 'css/src',
                    ext: '.css'
                }]
            }
        },
        connect: {
            options: {
                port: 9000,
                hostname: '192.168.0.250', //默认就是这个值，可配置为本机某个 IP，localhost 或域名
                livereload: 35729  //声明给 watch 监听的端口
            },

            server: {
                options: {
                    open: true, //自动打开网页 http://
                    base: [
                        ''  //主目录
                    ]
                }
            }
        },

        watch: {
            livereload: {
                options: {
                    livereload: '<%=connect.options.livereload%>'  //监听前面声明的端口  35729
                },

                files: [  //下面文件的改变就会实时刷新网页
                    'h5/*.html',
                    //'./less/{,*/}*.less',
                    './**/*.html',
                    './css/{,*/}*.css',
                    './css/{,*/**/}*.css',
                    './js/{,*/}*.js',
                    './images/{,*/}*.{png,jpg}'
                ],
                //tasks: ['less']
            }
        }


    });

    // 加载包含 "uglify" 任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //加载 cssmin 插件任务
    grunt.loadNpmTasks('grunt-contrib-cssmin'); 

    // 加载指定插件任务
    // grunt.loadNpmTasks('grunt-contrib-jshint');

      //grunt.loadNpmTasks('grunt-contrib-less');

    //默认执行插件任务 
    grunt.registerTask('default', ['uglify','cssmin']);

    grunt.registerTask('serve', [
        'connect:server',
        'watch'
    ]);


};