初探Grunt

2019-12-25 16:32:11 浏览数 (2)

最近打算学习一些web编程的知识,今天学习了Grunt这个工具的用法,这里简要地对学习的知识点进行个总结。

1. Grunt是什么

Grunt网站上的副标题是”The Javascript Task Runner”,是用来实现Javascript编程自动化的一个工具,类似make工具体系。只要设置好Gruntfile(类比Makefile),就可以使用grunt命令来自动执行javascript代码的清理、重新生成等任务。Grunt生态圈里面有大量的插件,Grunt工具就是使用这些插件来实现自动化。

2. 如何安装Grunt

Grunt通过npm命令来安装,所以需要首先安装npm。npm是nodejs package manager的缩写,是nodejs的包管理工具。在新版的nodejs里面默认包含了npm,所以只需要安装最新班的nodejs即可,访问nodejs官方网站下载最新版的nodejs。 之后通过npm安装grunt-cli,即Grunt command line interface。为了在所有目录下都可以使用grunt命令,需要加-g参数,指令如下:

代码语言:javascript复制
npm install -g grunt-cli

注意:有的发行版在使用npm命令时需要root权限,前面要加sudo命令。 其实安装完grunt-cli后,并没有安装grunt。这里面的原理大概是这样的:grunt-cli只用来寻找通过nodejs的require工具(或在package.json的dependencies)已经安装好的本地的grunt,然后执行之。可以看源代码查看工作原理。

3. 使用Grunt工具前需要准备哪些东西

按理来说,使用grunt命令,只需要有个Gruntfile就可以了,但是上文提到,grunt task runner需要在每个项目中单独安装,所以还得有个保存项目元数据的package.json文件。

在每个nodejs项目中,都有个package.json文件来保存这个项目的名称、版本、依赖库等元数据。

package.json可以使用命令npm init交互式地生成。在生成该文件后,可以使用npm install在当前项目目录下安装依赖库。

此外,在项目目录下安装工具库并使用--save-dev--save参数,可以将安装的工具自动加入到该项目的依赖库中。其中--save命令将安装的工具名称和版本号加入到dependencie部分,--save-dev则加到devDependencies部分。如下命令:

代码语言:javascript复制
npm install grunt --save-dev

将安装grunt task runner 并将其名称和版本号自动加入到devDependencies部分。

GruntfileGruntfile.js(Javascript语言格式)和Gruntfile.coffee(CoffeeScript格式)之一,类似Make工具体系中的Makefile,用来保存配置信息,是Grunt工具的最主要文件。 下面是一个Gruntfile的示例格式,详细格式和说明请参阅官方文档。

代码语言:javascript复制
module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint']);

};

4. 如何运行Grunt

Gruntfile写好之后,运行grunt命令,就会自动执行Gruntfile里面的语句了。so easy 是不是~

0 人点赞