GRUNT 介绍

GRUNT 介绍

- 官方网站：http://gruntjs.com/ 

- the javascript task runner

- task runner: 简单的说就是自动化，自动化编译、安装、测试，以及单元测试(unit testing)、代码检测（linting）等

- Grunt类似于Linux中的Makefile，Java中的Ant，Maven等  

配置Gruntfile

#封装grunt

module.exports = function(grunt) {

#初始化配置

grunt.initConfig({

#从依赖包中初始化包配置

pkg: grunt.file.readJSON('package.json'),

#grunt-contrib-concat定义了包的连接方式

#concat 任务连接所有src下的js文件 

concat: {

  options: {

    separator: ';'

  },

  dist: {

    src: ['src/**/*.js'],

    dest: 'dist/<%= pkg.name %>.js'

  }

},

#grunt-contrib-uglify压缩合并javascript 代码

uglify: {

  options: {

    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'

  },

  dist: {

    files: {

      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']

    }

  }

},

#grunt-contrib-qunit自动化测试代码 

qunit: {

  files: ['test/**/*.html']

},

#grunt-contrib-jshint 代码正确性检测

jshint: {

  files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],

  options: {

    // options here to override JSHint defaults

    globals: {

      jQuery: true,

      console: true,

      module: true,

      document: true

    }

  }

},

#grunt-contrib-watch 检测修改，并执行jshint和qunit任务

watch: {

  files: ['<%= jshint.files %>'],

  tasks: ['jshint', 'qunit']

}

});

#加载grunt所需要的npm的引擎

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-qunit');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-concat');

 

#建立test任务

grunt.registerTask('test', ['jshint', 'qunit']);

#建立默认任务

grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

 

};

Grunt 安装和运行

npm install -g grunt-cli 

首先需要到目录包，改目录包中需要建立package.json和Gruntfile

npm install 安装依赖包

grunt 即可运行 

package.json可以通过grunt-init 或者 npm init来初始化package.json

Jquery 运行

1)  全部运行 cd jquery && npm run build 

2)  自定义运行 grunt custom:-ajax