Grunt入门篇

简单运用

1.前置条件

node.js>=0.8.0
npm升级到最新版本: npm update -g npm

2.安装CLI

将Grunt命令行CLI通过-g安装到全局环境中

1. Grunt CLI 的任务:调用与Gruntfile在同一目录下的Grunt
2. Grunt CLI 的工作原理: 每次运行grunt时,利用node提供的require()系统查找本地安装的Grunt,如果找到一份本地安装的Grunt,CLI就将其加载,并传递Gruntfile中的配置信息, 然后执行指定的任务.

3.package.json文件

此文件被npm用于存储项目的元数据,以便将此项目发布为npm模板, 列出项目依赖的Grunt和Grunt插件,放置在devDenpendencies配置段中.
1.grunt-init: 在当前根目录下创建 特定于项目的package.json文件
2.npm-init: 在当前根目录下创建 基本的package.json文件

4.添加Grunt和Grunt插件

通过npm install moudle –save-dev命令
例:npm install grunt-contrib-uglify --save-dev
–save-dev 将其自动添加到devDependencies配置段中

5.小有效果

1.将接下来的实例拷贝到Gruntfile.js文件中;
2.然后在相同目录下,通过npm init创建package.json文件,并进行简单的配置,
如:

{
  "name": "firstgrunt",
  "version": "0.0.1",
  "description": "my first grunt",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-qunit": "^0.7.0",
    "grunt-contrib-uglify": "^0.9.1",
    "grunt-contrib-watch": "^0.6.1"
  },
}

3.然后创建一个Gruntfile.js文件,把接下来的Gruntfile实例拷贝进去;
4.在命令行输入:

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-qunit --save-dev
npm install grunt-contrib-watch --save-dev

grunt

5.看到提示

cout

心情有木有很好呀^_^

详细的Gruntfile实例分析

接下来是一大段代码, 自己敲一遍备注,基本都能理解了

//wrapper函数,包含了整个Grunt配置信息
module.exports = function(grunt) {

  //初始化configuration对象.
  grunt.initConfig({
  //从package.json文件读入项目配置信息,并存入pkg属性内,这样就可以访问到package.json中列出的属性.
    pkg: grunt.file.readJSON('package.json'),
    //为每个任务来定义相应的配置concat,uglify,qunit,jshint,watch;然后每个任务的配置对象做为Grunt配置对象的属性,并且这个属性名称与任务名称相同.
    //concat任务就是为配置对象中的"concat"键,一下是"concat"任务的配置对象
    concat: {
      options: {
    //定义一个用于插入合并输出文件之间的字符
        separator: ';'
      },
      dist: {
    //将要被合并的文件
        src: ['src/**/*.js'],
    //合并后的JS文件存放的位置
        dest: 'dist/<%= pkg.name %>.js'
/*如何引用JSON文件(配置文件package.json)中的name属性呢--使用pkg.name来访问我们刚才引入并存储在pkg属性中的package.json文件信息,它会被解析为一个JavaScript对象.Grunt自带的有一个简单的模板引擎用于输出配置对象属性值(这里指package.json中的配置对象属性值),让concat任务将所有存在于src/目录下以.js结尾的文件合并起来,然后存储在dist目录中,以项目名来命名.*/
      }
    },
    //配置uglify插件,作用是压缩(minify)JavaScript文件
    uglify: {
      options: {
        //此处定义的banner注释将插入到输出文件的顶部
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
/*在dist/目录中创建一个包含压缩结果的JavaScript文件;使用<%= concat.dist.dest %>会自动压缩concat任务中生成的文件*/
        }
      }
    },
    //QUnit插件的配置:提供用于测试运行的文件位置
    qunit: {
      files: ['test/**/*.html']
    },
    //JSHint插件的配置:
    jshint: {
      //定义一个文件数组
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      //配置JSHint
      options: {
        //这里是覆盖JSHint默认配置的选项
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    //watch插件的配置:
    watch: {
//当它检测到任何所指定的文件发生变化时,它就会按照所指定的顺序执行指定的任务(即检测到JSHint任务中的文件发生变化是,将会执行jshint和qunit任务).
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  //最后加载所有需要的Grunt插件
  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');

  //最后在设置一些task,default最重要
  //在命令行输入"grunt test", test task就会被执行
  grunt.registerTask('test', ['jshint', 'qunit']);

  //在命令行输入"grunt",就会执行default task
  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};

Gruntfile.js的组成部分:

package.json文件中的项目元数据被导入到Grunt配置中.
grunt-contrib-ugligy插件中的uglify任务被配置为:压缩源文件并依据上述元数据的动态生成一个文件头注释,当在命令行中执行grunt时,default任务被执行.

1. “wrapper”函数
   所有Grunt代码都必须放在这个函数内:

module.exports = function(grunt) {
}

1. 项目与任务配置
   将Grunt依赖的配置数据,定义在一个object内,并传递给grunt.initConfig方法.
   a. gruntfile.readJSON('package.json')将JSON元数据引入到grunt config中.
   b. <% %>模板字符串,可以引用任意的配置属性,通过这种方式来指定配置数据(如文件路径, 文件列表类型等).
2. 加载Grunt插件和任务
   grunt.loadNpmTasks('grunt-contrib-uglify);
3. 自定义任务
   特定于项目的任务不必要在Gruntfile中定义, 可以通过grunt.loadTasks的方法加载js文件进来.

Grunt任务配置

Grunt创建任务