grunt的学习之旅

概述

官网文档： https://www.gruntjs.net/api/grunt
定义： grunt是一个基于javascript项目命令行构建工具，可以快速的创建项目，合并、压缩和校验css，js等。

安装

grunt是通过npm来安装的。所以请确保当前的环境已经安装好node(npm是node自带的)

1. 创建一个项目文件夹：gruntTest，在控制台运行npm init生成package.json文件。
2. 全局安装cli，安装cli不等于安装grunt，grunt可以直接安装在项目中，所以不同项目可以存在不同版本的grunt。

npm install -g grunt-cli

3. 安装grunt

npm install  grunt --save-dev

4. 创建Gruntfile.js（grunt的配置文件）。
5. 创建index.html，js，css等文件
   目录结构
   |----gruntTest-------------------项目所在文件夹
   | | ----src------------------- 源码文件夹
   | | |----css------------------- css源文件夹
   | | | |-style.css------------------css源码
   | | | |- js------------------- js源文件夹
   | | | | |-index.js-------------------js源码
   | | | | |-main.js-------------------js源码
   | | ----index.html ------------------- 页面文件
   | | ----Gruntfile.js-------------------grunt配置文件(注意首字母大写)
   | | ---- package.json-------------------项目包配置文件
6. 配置Gruntfile.js文件

//默认暴露一个函数
//全局安装的grunt-cli，在控制台输入grunt后，Gruntfile.js会自动执行
module.exports = function(grunt){
    //1、初始化插件配置
    grunt.initConfig({

    })

    //2、加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');

    //3、注册task构建任务，用来执行配置的任务。
    grunt.registerTask('default',[]);
}

6.1 Gruntfile.js的配置项的意义：

• grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。
• grunt.loadNpmTasks：加载完成任务所需的模块。
• grunt.registerTask：注册具体的任务。第一个参数为任务名，任务名是default，在控制台输入grunt就可以直接运行；第二个参数是一个数组， 表示该任务需要依次使用的模块。

6.2 动态构建文件对象
当我们有几个单个文件，我们可以使用下面的属性去动态处理：

expand：设置为true将启用下面的选项：

• cwd：需要处理的文件（input）所在的目录。
• src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
• dest：表示处理后的文件名或所在目录。
• ext：表示处理后的文件后缀名。

6.3 模板 <% %>

使用<% %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描。模板会被递归的展开，直到配置中不再存在遗留的模板相关的信息(与模板匹配的)。

//其实模板<% %>的作用就是把配置的信息自动展开。
grunt.initConfig({
  concat: {
    sample: {
      options: {
        banner: '/* <%= baz %> */\n',   // '/* abcde */\n'
      },
      src: ['<%= qux %>', 'baz/*.js'],  // [['foo/*.js', 'bar/*.js'], 'baz/*.js']
      dest: 'build/<%= baz %>.js',      // 'build/abcde.js'
    },
  },
  //用于任务配置模板的任意属性
  foo: 'c',
  bar: 'b<%= foo %>d', // 'bcd'
  baz: 'a<%= bar %>e', // 'abcde'
  qux: ['foo/*.js', 'bar/*.js'],
});

在控制台输入grunt，看下是否可以运行成功，出现Done证明是成功的。
7. 这个时候，其实我们还没有安装任何插件，包括上述代码中的grunt-contrib-concat插件。下面简单介绍一下两三个插件的用法，其他的插件基本用法差不多，可以在官网上查找相关插件的安装和使用：http://www.gruntjs.net/plugins。

grunt-contrib-clean——清除文件(打包处理生成的)
grunt-contrib-concat——合并多个文件的代码到一个文件中
grunt-contrib-uglify——压缩js文件
grunt-contrib-jshint——javascript语法错误检查；
grunt-contrib-cssmin——压缩/合并css文件
grunt-contrib-htmlmin——压缩html文件
grunt-contrib-imagemin——压缩图片文件(无损)
grunt-contrib-copy——复制文件、文件夹
grunt-contrib-requirejs**—合并压缩requirejs管理的所有js模块文件
grunt-contrib-watch—实时监控文件变化、调用相应的任务重新执行

8. 安装 npm install grunt-contrib-concat --save-dev
   这个插件主要是将多个文件合并在一个文件中。
   安装好该插件后在Gruntfile.js中配置这个插件，代码片段如下

concat: {
   //可选项配置
    options: {
        separator: ';', //使用;连接合并
      },
      build: {
        src: ['src/js/index.js', 'src/js/main.js'],  //要合并的js文件
        dest: 'dist/js/command.js', //输出的js文件
      },
}

接着，使用grunt.loadNpmTasks()加载该插件，最好就是注册任务，就是把concat放到 grunt.registerTask(‘default’,[])的[]中。完整代码：

//默认暴露一个函数
//全局安装的grunt-cli，在控制台输入grunt后，Gruntfile.js会自动执行
module.exports = function(grunt){
    //1、初始化插件配置
    grunt.initConfig({
        concat: {
            //可选项配置
            options: {
                separator: ';', //使用;连接合并
              },
              build: {
                src: ['src/js/index.js', 'src/js/main.js'],  //要合并的js文件
                dest: 'dist/js/command.js', //输出的js文件
              },
        }
    })

    //2、加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');

    //3、注册task构建任务，用来执行配置的任务。
    grunt.registerTask('default',['concat']);
}

最后，在控制台输入grunt，运行完成后就可以完成对js文件的合并。

9. 安装 npm install grunt-contrib-uglify --save-dev
对js代码进行压缩

//默认暴露一个函数
//全局安装的grunt-cli，在控制台输入grunt后，Gruntfile.js会自动执行
module.exports = function(grunt){
    //1、初始化插件配置
    grunt.initConfig({
        concat: {
            //可选项配置
            options: {
                separator: ';', //使用;连接合并
              },
              build: {
                src: ['src/js/index.js', 'src/js/main.js'],  //要合并的js文件
                dest: 'dist/js/command.js', //输出的js文件
              },
        },
        uglify:{
            my_target:{ //随便命名
                files:[{
                    expand: true,  //表示下面选项启用
                    cwd: 'dist/js/',  //要处理的目录
                    src: ['*.js'],  //要处理的文件，数组
                    dest: 'dist/js/', //处理后的文件名或所在目录
                    ext: '.min.js'  //处理后的文件后缀名
                }]
            }
        }
    })

    //2、加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');
	
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //3、注册task构建任务，用来执行配置的任务。
    grunt.registerTask('default',['concat','uglify']);
}

其他的插件，可以在官网的插件文档找到并有配置的方法。