Grunt入门学习

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'
        }
    }
});