Grunt构建工具

Grunt是javascript的构建工具，对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以简化工作。Grunt生态系统非常庞大。你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上。
 
一、Grunt安装：
Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。奇数版本号的 Node.js 被认为是不稳定的开发版。
在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。
Grunt命令行（CLI）安装到全局环境中
npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入“grunt”命令即可。如果生效，则会出现以下结果：

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。 这样就能让多个版本的 Grunt 同时安装在同一台机器上。
 
CLI工作原理：每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，然后执行你所指定的任务
 
二、准备一份新的Grunt项目，package.json和Gruntfile.js
1、package.json：应当放置于项目的根目录中。与Gruntfile在同一目录中，并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。
{
  "name": "mygruntTest",
  "version": "0.0.1",
  "description": "js for uglify",
  "author": {
    "name": "圣耀",
    "email": "meng.chen1@alibaba-inc.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/tuupola/jquery_lazyload"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-cssmin": "~0.5.0",
    "grunt-contrib-jshint": "~0.3.0",
    "grunt-contrib-uglify": "~0.1.2"
  }
}

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过命令。

在命令行进入项目所在目录，键入如下命令，npm会根据devDependencies中的配置，将需要的grunt及其插件下载到你的项目目录中。
npm install grunt --save-dev

“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项，即配置package.json时“devDependencies”中存储开发依赖项。

在运行安装grunt的命令之前，package.json中的“devDependencies”对应的是空对象。

插件安装完成后，查看项目目录，会发现生成node_modules目录，包含了相应的插件目录，其中“grunt”文件夹就是存储grunt源文件的地方。
 
安装单个模块
npm install <module> --save-dev

这时控制台执行grunt命令会出现waring提示。证明grunt插件下载完成，需要继续配置Gruntfile.js 文件

2、Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 
 grunt官网的插件列表页面 http://www.gruntjs.net/plugins。插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。下载量前几名插件：

  • Contrib-jshint——javascript语法错误检查；

  • Contrib-watch——实时监控文件变化、调用相应的任务重新执行；

  • Contrib-clean——清空文件、文件夹；

  • Contrib-uglify——压缩javascript代码

  • Contrib-copy——复制文件、文件夹

  • Contrib-concat——合并多个文件的代码到一个文件中

  • karma——前端自动化测试工具

以uglify为例，插件配置参照官方文档：https://www.npmjs.com/package/grunt-contrib-uglify#basic-compression
module.exports = function(grunt) {

  //任务配置，所有插件的配置信息
  grunt.initConfig({
    //获取package.json的信息
    pkg: grunt.file.readJSON('package.json'),

    uglify: {
      options: {
        mangle: false,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },    
       my_target: {  
           files: {  
              'default.min.js': ['index.js','jquery2.0.0.js']
           }  
       }  
    }
  });

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

  // 默认被执行的任务列表，注意先后顺序
  grunt.registerTask('default', ['uglify']);

};

 

 
参考：
http://blog.csdn.net/playboyanta123/article/details/43230831
http://developer.51cto.com/art/201506/479127_all.htm 
 
posted @ 2016-02-18 16:57  圣耀  阅读(304)  评论(0)  编辑  收藏  举报