grunt入门级使用

环境准备

基于nodejs

    grunt是基于node的  所以使用grunt前务必要安装了node

安装grunt

 npm install -g grunt-cli   // 全局安装grunt

    至此，grunt的环境准备基本完成

本文将简易地涉及grunt的一些基础用法和三个插件:

    js压缩插件：grunt-contrib-unglify

    js合并插件：grunt-contrib-concat 

    css压缩合并插件：grunt-contrib-cssmin

你将要准备的东西

在使用grunt时，你必须在根目录准备的两个文件：

package.json：此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

下载grunt插件和下载node模块一样：
  npm install grunt-contrib-uglify --save-dev //这是下载uglify插件命令

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-cssmin": "~0.5.0",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1"
  }
}

Gruntfile.js：用来配置或定义任务（task）并加载Grunt插件

Gruntfile.js由以下内容组成

1、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API

module.exports = function(grunt) {
    // Do grunt-related things in here
};

2、项目和任务配置

3、载入grunt插件和任务

4、定制执行任务

举个栗子：（注意要在根目录下创建一个名为src的文件夹，并在文件夹内新建js文件）

module.exports = function (grunt) {
  // Grunt的task配置都是在Gruntfile中的grunt.initConfig方法中指定的
  grunt.initConfig({
    // 定义任务uglify，将指定的js文件压缩后打包到另一个文件
    uglify: {
      options: {
        banner: '/*! 这是注释信息 */' // banner在文件头部添加信息,一般用于添加注释信息
        footer: '/*footer*/' // 文件尾信息，只会出现一次
      },
      // uglify中有名为my_target的任务
      my_target: {
        files: [{
          expand: true, // 设置为true将启用下面的选项
          cwd: 'src',  //cwd相当于给所有匹配的文件设置一个相对的起点。比如设置cwd为/home/xxx/code，那么src的路径就是相对于这个/home/xxx/code的
          src: '**/*.js', // 开启expand配置后，相对于cwd路径的匹配模式，这里指src目录下的所有js文件
          dest: 'dest' // 目标文件路径
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');  // 加载插件

  grunt.registerTask('default', 'uglify');  // 注册任务uglify，并定义为默认执行任务 
}

你的package.json和Gruntfile.js已经完成  但为了保证项目能正常运行因此我们要多一个步骤：

npm install

执行grunt命令：

grunt  // 执行默认命令
或
grunt uglify  // 执行指定命令

------------------------------------------------简陋的分割线------------------------------------------------

这里用几个简单的栗子把上文提到的几个插件介绍一下

我们的package.json文件保持上文的配置不变（在npm install时，会自动检测本地模块文件内与package.json内的模块是否一致，不一致时会自动更新）如需要额外添加插件  用上文提到的命令即可

uglify

    js压缩插件：将js文件压缩后打包到另一个文件

    对应的栗子在上文中已经给出，这里就不重复贴代码了

concat

    js合并插件：将指定的js文件合并后打包到另一个文件

    举个栗子：

module.exports = function (grunt) {
  grunt.initConfig({
  // 将指定的js文件合并在另一个js文件
  concat: {
    options: {
      separator: '/*分割*/',  // 用于分隔各个文件的文字
      banner: '/*测试*/', // 文件头信息，只会出现一次
      footer: '/*footer*/' // 文件尾信息，只会出现一次
     
    },
    // 将多个文件合并在一个文件内
    // dist: {
    //   src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
    //   dest: 'dist/built.js',
    // }
     
    // 将合并的代码放到不同的文件
    basic_and_extras: {
      files: {
        'dest/basic.js': ['src/test.js', 'src/zepto.js'],
        'dest/with_extras.js': ['src/underscore.js', 'src/backbone.js']
      }
    }
  }
});
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('default', 'concat')
}

cssmin

    css压缩合并插件：是的没有错，这个插件是把css压缩完并合并的

    栗子上来：

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'dest/style.min.css': ['src/style01.css', 'src/style02.css']
                }
            }
        }
    });

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

    grunt.registerTask('default',['cssmin']);
}

最常用的三个插件以及最基础的语法也就介绍完了，当然，这只是最简单的应用而已，实际开发过程中应该会比案例的复杂很多，所有一起加油吧。