3、GruntJs做JavaScript代码校验、自动化

首先grunt是JavaScript的脚手架，先node官网安装node；

安装好node之后，可以使用node、npm功能；

grunt要了解有：grunt cli、task runner、plugins三个。

1. GruntJS CLI

全局安装 grunt-cli 包，这样在任何目录下都可以调用grunt命令。

npm install grunt-cli -g

2. GruntJS Task Runner

新建项目文件夹b，进入项目路径

mkdir b
cd b

创建package.json文件，设置入口js

npm init

entry point: (index.js) 

删除没用的 main、scripts、author和license，剩下package.json

{
  "name": "myname",
  "version": "1.0.0",
  "description": ""
}

安装grunt到本地，从而package.json更新(核心步骤)

npm install grunt --save-dev

{
  "name": "myname",
  "version": "1.0.0",
  "description": "",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

　

3. Grunt Plugins插件

① package.json添加内容：

{
  "name": "myname",
  "version": "1.0.0",
  "description": "",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^0.3.0",
    "grunt-contrib-csslint": "^1.0.0",
    "grunt-contrib-jshint": "^0.6.5",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-watch": "^1.0.0"
  }
}

插件批量安装（如果手动单个添加：npm install grunt-contrib-concat --save-dev）

npm install

接下来手动创建以下内容——

　

② 新建Gruntfile.js

module.exports = function(grunt){
        grunt.initConfig({
            //3 压缩JS文件的
            uglify: {
                build: {
                src: 'des/concat1.js',
                dest: 'des/libs.min.js'
                }
            },
            //2 连接JS文件
            concat: {
                options: {
                    separator: ';'
                },
                dist: {
                    src: ['src/a.js', 'src/b.js'],
                    dest: 'des/concat1.js'
                }
            },
            //1 js：检查代码中糟糕的部分，大家都用
            jshint: {
                build: [ 'Gruntfile.js','src/*.js'],
                options: {
                    jshintrc:'.jshintrc'
                }
            },
            //4 自动刷新
            watch:{
                build: {
                    files: ['src/*.js', 'src/*.css'],
                    tasks: ['jshint', 'uglify'],
                    options: { spawn: false}
                }
            }
        });

        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-jshint');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-contrib-concat');

        //1检查语法 2连接 3压缩 4自动刷新
        grunt.registerTask('default', ['jshint','concat','uglify','watch']);
};

③ 新建过滤文件.jshintrc、.csslintrc

{
    "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
}

{
    "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
}

新建src文件夹、des文件夹

 

④ src文件夹中新建测试用的js文件 a.js b.js，随便写点东西测试

var a=[];
var b=123;
var c;
var sadf;

//现在跑起来
grunt

生成连接文件、压缩文件，最终效果截图。（名字可以随便取）

OK！

 

参考资料：

segment社区：      https://segmentfault.com/a/1190000000353114

叶小钗大神：       http://www.cnblogs.com/yexiaochai/p/3603389.html

插件汇总：     http://www.gruntjs.net/plugins

grunt理论介绍：    http://www.tuicool.com/articles/FfMBfq

 http://www.cnblogs.com/wangfupeng1988/p/4561993.html