Grunt介绍与应用

Grunt中文网：http://www.gruntjs.net/

1.为何要用构建工具？

一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

2.安装教程

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。

2.1 安装node.js和npm

• 进入nodejs官网下载node https://nodejs.org/en/
  下载对应版本
  
  
  
  我下载了node8.9.3版本，包括npm 5.5.1版本
  
  
  
  下载完成后安装该文件
  
  
  
  
  
  
  
  

  安装完成

【1】打开命令行，cmd或者Windows PowerShell
【2】查看node版本

node -v

【3】更改npm默认安装路径
默认是在c:\Users\Administrator\AppData里面安装，装在c盘很乱不舒服。先修改位置。

在nodejs里面创建了两个文件夹，node_globe,node_cache作为npm默认路径。

【4】更改npm安装默认的源

npm config set registry https://registry.npm.taobao.org 
npm info underscore （如果上面配置正确这个命令会有字符串response）

【5】配置系统环境变量

系统变量里面找到Path

点击编辑，添加默认安装路径，我的是F:\nodejs\node_global

2.2 Grunt安装

1）安装CLI

npm install -g grunt-cli

2）Grunt项目介绍
一个Grunt项目中应该有两份文件：package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

3）创建package.json文件（项目中没有该文件情况下）
package.json应当放置于项目的根目录中。
进入到项目的目录中，执行如下命令。

npm init

进入项目目录，执行如下命令：

npm install grunt --save-dev

项目中会生成node_modules文件夹，同时package.json中会添加依赖devDeoendencies

4）在项目根目录中创建Gruntfile.js文件

module.exports = function(grunt) {

// 项目配置
//uglify:压缩任务,将所有的js(src文件加中)压缩成min.js(build文件夹中)
//concat：合并任务，将所有的min.js合并成一个min.js(build文件夹下)
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }，
    concat: {
        bar: {
            src:['build/*.js'],
            dest:'build/all.min.js'
         },
     }，
     watch:{
          //多个文件可以用数组['','']。
          files:'src/<%= pkg.name %>.js',
          tasks:['uglify','concat']
     }

  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-watch');
  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify','concat','watch']);

};

5 )进入到项目目录中，执行grunt命令。

grunt

如果提示有包没有安装，执行如下命令。

npm install 包名 --save-dev