初学Grunt不得不知道的几个组件

先来一个小分享：

不知道大家是不是有很多人都有这样的体验：很想读书，很想多学习一下书里的知识，但是平常太忙根本没时间。

大家可以关注一下博主新建的微信公众平台或者加入QQ群，主要目的是定期更新一些我们大家的读书笔记和感悟，互相交流，这样就能短时间内汲取更多书的精华知识了～群号303238741，或者扫描文章最下方的二维码，在微信号中给我发一下QQ号～

Grunt是现在非常实用的前端构建工具。所谓前端构建工具，就是可以帮助我们自动完成一些需要经常重复性的操作。比如代码压缩、代码合并等。除此之外，Grunt还有很多非常强大的功能，这些功能都得益于Grunt丰富的组件。

1.常用组件介绍

(1)grunt-contrib-watch

这个组件的作用是，每次修改某些文件的代码并保存时时，都会自动执行grunt命令进行重新构建。这样就省去了我们每次更新文件后都需要手动执行grunt构建的重复性工作。可以在任务内部指定需要监听哪些文件，当这些文件变化时就重新进行自动构建：

    watch: {
      scripts: {
        files: ["src/**/*.js"],
        tasks: ["concat"]
      }
    }

这部分代码表示，监听src目录下的所有js文件，他们如果发生变化的话，就执行concat任务。files字段指定要监听的文件，tasks字段执行这些文件变化后执行哪个grunt任务。

(2)grunt-contrib-concat

这个组件可以指定多个文件，执行该任务后会将这些文件自动连接在一起。连接的方式默认是使用;分进行连接。

grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js',
    },
  },
});

这个组件中，options中的separator字段指定了连接所使用的分隔符，每一个dist字段就包含了一个任务块。这里面将src字段中指定的三个文件进行连接，合并成的文件所在的目录和文件名通过dest字段进行定义。

(3)grunt-contrib-connect

该组件非常常用，可以用来创建一个小型的服务器，把项目部署到本地服务器上。使用的代码如下：

grunt.initConfig({
  connect: {
    server: {  //设定server
      options: {
        port: 8000,   //设定端口
        hostname: '*',   //URL名，设置成*即表示localhost
	 keepalive: true  //如不设定，建立的服务器只在grunt任务执行时才有效，结束之后就停止
      }
    }
  }
});

这里面各个端口的意义很明显，包括端口号、hostname等。注意，这里一定要指定keepalive字段位true。如果不指定该字段的话，服务器只会启动一小会，即grunt构建任务执行的过程中服务器才开启，任务结束后服务器自动关闭。

(4)grunt-contrib-uglify

该组件非常常用，它就是用来对文件进行压缩的。它的使用方法和concat很类似，具体如下：

   uglify: {
      options: {   //banner字段配置了压缩后文件的标题注释
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },  //pkg.name获取到了package.json文件中的name字段的值
      build: {
        src: 'src/<%= pkg.name %>.js',    //要压缩的文件
        dest: 'build/<%= pkg.name %>.min.js'   //压缩成的文件名和存放路径
      }

以上介绍的四个组件，几本没个项目都会用到，属于最基本最常用的grunt组件。

2.组件的使用方法

总结了一些各种组件的使用方法，步骤如下：

(1)到grunt的官网上搜索自己想要的组件，注意其中contrib开头的是grunt官方团队提供的组件，其他的组件是民间的。

(2)选择好想用的组件后，要通过npm安装到项目中，注意每一个grunt模块如果想使用的话都是需要提前npm安装的。

(3)安装好组件后，需要在grunt.initConfig中进行配置，这就是任务的配置了，属于基本grunt知识，这里不做过多讲解。上面的代码都属于这一部分的内容。

(4)在Gruntfile.js文件中引入组件，方法为：grunt.loadNpm.Tasks('grunt-contrib-uglify')。

完成以上步骤，就可以正确使用grunt的各个组件了！

微信二维码：

                     

欢迎志同道合的小伙伴加入哦～