grunt学习一

前话（摘自https://www.gruntjs.net/）

• 1.在学习之前了解下为什么需要用构建工具
  一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作
• 2.为什么要使用 Grunt，Grunt的作用是什么？
  Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个 Grunt 插件，然后将其发布到 npm 上吧。
  Grunt的作用,按任务目标大致可分为四类：
  1. 文件操作型：比如合并、压缩js和css文件等（包括）。
  2. 预编译型：比如编译less、sass、coffeescript等。
  3. 类库项目构建型：比如 angular、ember、backbone等.
  4. 工程质量保障型：比如jshint、jasmine、mocha等.

学习历程

• 1.安装nodejs

grunt必须依赖于node.js，基于先学习好grunt的目的，那么首先，我们要安装node.js, https://nodejs.org/zh-cn/download/

• 2.新建一个项目
• 3.安装 CLI

在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。

    npm install -g grunt-cli

• 4.一般需要在你的项目中添加两份文件：package.json 和 Gruntfile.js。

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

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。
npm init命令会创建一个基本的package.json文件，根据命令提示输入一些项目信息，生成文件，文件内容如下。（也可手动创建文件）

{"name": "grunt-demo","version": "10.1.0","description": "aaaaaaaaaaa_demo","main": "./Gruntfile.js","author": "","devDependencies": {"grunt": "^1.1.0","grunt-contrib-uglify": "^0.5.1"}
}

在工程根目录下运行 npm install
等命令成功跑完之后，在工程根目录中生成了node_modules目录，该目录包含一些必要的插件。

接下来我们需要Gruntfile.js配置

module.exports = function(grunt) {// Project configuration.grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},build: {src: 'src/js/*.js',dest: 'build/<%= pkg.name %>.min.js'}}});// 加载包含 "uglify" 任务的插件。grunt.loadNpmTasks('grunt-contrib-uglify');// 默认被执行的任务列表。grunt.registerTask('default', ['uglify']);};

接下来我们只需要在工程根目录下，运行命令 grunt
我们可以在根目录看到 动态生成了文件夹 build 如下

@ 以下部分来自摘抄

接下来我们来重点看下Gruntfile.js代码的含义。

所有grunt的代码，必须放在module.exports函数内，参数grunt为grunt对象，当你运行命令grunt时，grunt系统会去读此函数的grunt构建配置。

grunt.initConfig(obj)

initConfig用于配置构建信息，第一个参数必须是个object。

// 构建任务配置

grunt.initConfig({});
grunt.file.readJSON(path)

读取一个json文件，通常我们会把构建任务的基本配置写在独立的json文件内，方便我们修改。

// 构建任务配置

grunt.initConfig({//读取package.json的内容，形成个json数据pkg: grunt.file.readJSON('package.json')
});
grunt.loadNpmTasks(pluginName).
//加载指定插件任务.
grunt.registerTask(taskName,taskArray)
//注册任务，比如下面的代码：
grunt.registerTask('default', ['concat','uglify']);
//注册默认执行的任务，即你运行grunt命令时，触发的任务构建。 第二个参数为任务目标名，在initConfig()中配置

// 配置

grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},build: {src: 'src/js/*.js',dest: 'build/<%= pkg.name %>.min.js'}}
});