前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >初探Grunt

初探Grunt

作者头像
王云峰
发布2019-12-25 16:32:11
8640
发布2019-12-25 16:32:11
举报
文章被收录于专栏:Yunfeng's Simple Blog

最近打算学习一些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 是不是~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-07-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. Grunt是什么
  • 2. 如何安装Grunt
  • 3. 使用Grunt工具前需要准备哪些东西
  • 4. 如何运行Grunt
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档