Grunt教程——初涉Grunt

作者:大漠 日期:2013-11-02 点击:498

前端自动化,这样的一个名词听起来非常的有吸引力,向往力。当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知,百度有FIS,腾讯有Modjs,360有燕尾服,还有很多团队在使用Ant,Shell等,而现在讨论较多的是Grunt。

出于对这方面的兴趣爱好,我也开始加入Grunt的使用大军,也开始在学习并尝试使用Grunt。那么从今天开始,我和大家将一起学习和使用Grunt。

Grunt是什么

Grunt是一个基于JavaScript上的一个很强大的任务管理器(task runner),或许这么一说让很多人觉得费解,简单来说就是你可以在你的终端机上,用JavaScript去执行一些程序来完成一些任务。比如说验证HTML、CSS、JavaScript的语法,压缩CSS、JavaScript、图像,Sass、LESS和Stylus编译成CSS等等,这些东西佛教徒吧很适合用Grunt来解决。

Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。

简单点来说,Grunt不仅仅是构建工具,实际上他只是任务运行器,管理每个子任务的自动化运行,我们还能使用他做更多东西。

为什么要用Grunt

或许有很多要都像我一样,会问“为什么要用Grunt”?其实用一句话可以概括出来:为了自动化。对于前端项目,为了明确模块分工,我们可以会将JavaScript、CSS代码拆解成很多个模块,他们都有独立的一个个文件,但这样一来用来页面上,增加了文件个数,同时也产生过多的Http请求,可从性能的角度来考虑,不利于页面优化。所以我们需要合并这些JavaScript和CSS文件。这样一来,也期望有一种工具能代替我们手工操作,去完成这些任务。

大家都非常清楚,在项目发布之前,我们都需要做一个步骤,那就是尽可能的将项目中的文件进行尽可能压缩,比如JavaScript、CSS、images甚至是HTML文件,主要目的是减小加载文件的带宽。另外,在很多情况为了安全性考虑,我们需要对我们项目的源代码做一些单元测试和回归测试。然而这些工作都是一些重复性的、乏味的工作。对于一个小型项目来说,或许没有太大的感觉,但对于一个大中型的项目,特别的参与人员过多的项目时,这些工作就显得更重要了。同时让大家更觉得自动化工具是多么的重要。

Grunt能做什么

Grunt就是一个工具箱,就像一个百宝箱,拥有非常丰富的任务插件,可以帮助开发人员实现各式各样的构建目标。

在Grunt工具箱中,按任务目标我们可以分为:

  • 编译文档型:比如编译LESS、Sass、Stylus、Coffeescript等;
  • 文件操作型:比如说合并、压缩JavaScript、CSS、图片等;
  • 质量保障型:比如JSHint、Jasmin、Mocha等;
  • 类库构建型:比如说Backbone.js、ember.js、angular.js等。

这些任务都依赖于给Grunt提供的插件来完成的,但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

运行Grunt需要什么?

前面也说过,Grunt是基于Node.js基础上运行的。需要能正常运行Grunt,必先在你的系统上正确安装Node.js和NPM。

如果你从未接触过node.js并不用太担心,只需要根据教程可以很容易帮助您在系统上安装Node.js。

环境好了之后,可以通过终端命令中安装grunt运行工具:

$ npm install -g grunt-cli

Grunt的运行工具具有两个版本,一个是服务器端的版本(grunt),另一个是客户端版本(grunt-cli)。而我们在项目中需要安装的是客户端版本。也就是上面所示的安装命令。这条命令将会把grunt命令植入到你的系统路径中,这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。

一个Grunt项目还有两个文件特别的重要:package.jsonGruntfile.js,前者用于Nodejs包管理,比如Grunt插件安装,后者是Grunt配置文件,配置任务或者自定义任务。

  • package.json:这个文件被用来存储已经作为npm模块发布的项目元数据(也就是依赖模块)。你将在这个文件中列出你的项目所依赖的Grunt(通常我们在这里配置Grunt版本)和Grunt插件(相应版本的插件)
  • Gruntfile.js:通常这个文件被命名为Gruntfile.js或者Gruntfile.coffee,它是用于配置或者定义Grunt任务和加载Grunt插件的。

值得注意的是,package.jsonGruntfile.js两个文件都放置在项目的根目录中,并且应该与项目的源代码一起被提交。

创建package.json的方式

package.json是一个JSON文件,而这个文件是每个Grunt项目必备的文件,因此在首要条件需要先创建这个文件。创建package.json文件方式有很多种:

  • 根据grunt-init模板自动创建一个特定的package.json文件;
  • 在命令终端通过npm init命令自动创建一个基本的package.json文件;
  • 从官网上复制或者下载一个package.json文件;
  • 手工创建一个package.json文件;
  • 在Grunt项目的根目录下运行npm install创建一个空的package.json文件(不过我没有成功过,一直有错误信息提示,不知道是不是我的系统还是node环境有问题,正在查找中)

package.json文件模板

我采用了一种最简单的方式——手工创建package.json文件。而这个文件又是Grunt项目中必备文件之一,因此如何创建package.json文件内容就非常的重要,那么这里,向大家显示一个最简单的package.json文件模板:

{"name":"项目名称","version":"项目版本号","description":"项目描述","author":"项目创建者","license":"项目版权","devDependencies": {//项目依赖插件}
}

我们来看看一个测试项目的package.json文件中的真正内容:

{"name": "testGrunt","version": "0.1.0","description": "this is test project with grunt.","author": "airen","license": "BSD","devDependencies": {"grunt": "~0.4.1"}
}

可以手动在package.json中添加Grunt的插件,也可以通过以下命令的方式向package.json文件中添加:

$ npm install grunt插件名 --save-dev

这不仅会在本地安装Grunt插件,它还会使用一个波浪形字符的版本范围自动将所安装的Grunt插件添加到项目依赖中。

例如使用下面的命令可以把最新版本的Grunt安装到你的项目中,并自动将它添加到你的项目依赖中:

$ npm install grunt --save-dev

特别声明:使用这个命令,在我的环境中没有成功过,希望有知道原因的朋友能告诉我,下面是报错信息:

npm ERR! Error: Invalid name: "testGrunt"
npm ERR!     at ensureValidName (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/fixer.js:281:15)
npm ERR!     at Object.module.exports.fixNameField (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/fixer.js:196:5)
npm ERR!     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/normalize.js:29:38
npm ERR!     at Array.forEach (native)
npm ERR!     at normalize (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/normalize.js:28:15)
npm ERR!     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:310:33)
npm ERR!     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:124:33)
npm ERR!     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:284:48
npm ERR!     at fs.js:207:20
npm ERR!     at Object.oncomplete (fs.js:107:15)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <npm-@googlegroups.com>npm ERR! System Darwin 13.0.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "grunt" "--save-dev"
npm ERR! cwd /Users/airen/Sites/grunt/testGrunt
npm ERR! node -v v0.10.13
npm ERR! npm -v 1.3.2
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/airen/Sites/grunt/testGrunt/npm-debug.log
npm ERR! not ok code 0

创建Gruntfile.js文件

package.json文件搞定之后,就可以在项目根目下创建Gruntfile.js文件,这个时候你可以使用grunt-init或者直接手工创建一个。我们先来看一个Gruntfile.js的文件模板:

module.exports = function(grunt){// 构建任务配置grunt.initConfig({//读取package.json的内容,形成个json数据pkg: grunt.file.readJSON('package.json'),//Grunt 任务配置});//加载Grunt插件grunt.loadNpmTasks('Grunt插件名');//默认的Grunt任务grunt.registerTask('default',['Grunt任务']);
};

我们来看一个简单的示例:

module.exports = function(grunt) {// 构建任务配置grunt.initConfig({//读取package.json的内容,形成个json数据pkg: grunt.file.readJSON('package.json'),uglify: {//文件头部输出信息options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},//具体任务配置build: {//源文件src: 'src/hello-grunt.js',//目标文件dest: 'build/hello-grunt-min.js'}}});// 加载指定插件任务grunt.loadNpmTasks('grunt-contrib-uglify');// 默认执行的任务grunt.registerTask('default', ['uglify']);
};

到此,Grunt项目所需的package.jsonGruntfile.js文件都算是创建完成。有了这两个文件之后,Grunt项目算是万事具备,只欠东风了。你只需要在你的Grunt项目下运行:

$ npm install

执行完后,你将会在你的命令终端看到一大串类似于下面的一些信息:

...
npm http 200 https://registry.npmjs.org/source-map/-/source-map-0.1.31.tgz
npm http GET https://registry.npmjs.org/wordwrap
npm http GET https://registry.npmjs.org/amdefine
npm http 304 https://registry.npmjs.org/amdefine
npm http 304 https://registry.npmjs.org/wordwrap
grunt@0.4.1 node_modules/grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.13
├── colors@0.6.2
├── hooker@0.2.3
├── async@0.1.22
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── findup-sync@0.1.2 (lodash@1.0.1)
├── iconv-lite@0.2.11
├── lodash@0.9.2
├── nopt@1.0.10 (abbrev@1.0.4)
├── rimraf@2.0.3 (graceful-fs@1.1.14)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── minimatch@0.2.12 (lru-cache@2.3.1, sigmund@1.0.0)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)grunt-contrib-uglify@0.2.5 node_modules/grunt-contrib-uglify
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── uglify-js@2.4.1 (uglify-to-browserify@1.0.1, async@0.2.9, source-map@0.1.31, optimist@0.3.7)

这个时候表示你的Grunt项目创建完成。你的项目结构也将变化成:

|--testGrunt
|----Gruntfile.js
|----node_modules
|--------grunt
|--------grunt-contrib-uglify
|----package.json

这里演示的仅仅是一个简单的示例,给大家对Grunt有一个初步的认识,在接下来,我将和大家一起探讨有关于Grunt更多的应用,希望对大家有所帮助。

如需转载,烦请注明出处:http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html

grunt教程--初涉grunt相关推荐

  1. Grunt教程——初涉Grunt

    前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也 变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误 ...

  2. Grunt教程——安装Grunt

    Grunt教程--安装Grunt 作者:大漠 日期:2013-11-04 点击:3124 tools grunt 在上一节<Grunt教程--初涉Grunt>一文中介绍了Grunt是什么, ...

  3. 安装好grunt,cmd 提示grunt不是内部或外部命令 怎么办?

    Grunt和所有grunt插件都是基于nodejs来运行的,因此,必须安装node.js. (一) 去官网http://nodejs.org/ 下载安装包 node-v6.9.2.msi,直接点击安装 ...

  4. linux grunt环境,安装 Grunt - Grunt: JavaScript 世界的构建工具 | Grunt 中文网

    安装 Grunt 这份文档详细解释了如何安装指定版本的 Grunt 和 Grunt 插件.如果你还没有阅读 快速入门 指南,请先将其看一遍. 概述 Grunt 和 Grunt 插件应当在项目的pack ...

  5. grunt构建化之路——基础篇

    初衷 接触grunt已经有段时间了,并且成功运用到了实际项目上了.这篇文章以及后面一些列的文章都是记录自己学习grunt这个构建工具以及使用的一个过程.为了自己以后技能点的巩固和避免采坑,所以就成就了 ...

  6. 目标检测之三 Win10 +VS2015+双gtx Titan X使用YOLO v2训练VOC数据

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/baolinq/article/deta ...

  7. 语音通话视频通话前端_新的视频通话

    语音通话视频通话前端 For the class of people referred to as " 对于被称为" knowledge workers", the co ...

  8. Grunt-- JavaScript世界的构建工具

    2019独角兽企业重金招聘Python工程师标准>>> 简介 Grunt是一个自动化软件,可以帮助我们完成比如压缩,编译,单元测试,代码校验等重复且与业务无关的工具,减轻劳动简化工作 ...

  9. 使用Grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...

最新文章

  1. Vaughn Vernon谈当今软件开发所面临的挑战
  2. poj1988(判断一个结点下面有多少个结点,推荐)
  3. Greg and Array CodeForces - 296C(差分数组+线段树)
  4. 2019最佳年会,新东方6名员工冒着离职的风险,在年会上怒怼老板
  5. Android(Fragment和Activity之间通信)
  6. SQLite 插入大量数据慢的解决方法
  7. JavaWeb文件上传(2)--使用fileupload组件
  8. SQL截取字符串和替换字段
  9. Java连接SAP ————JCO 3.0技术详解
  10. 贵州大学计算机网络试题,贵州大学计算机基础考试题库.doc
  11. (转)司徒正美:如何挑选适合的前端框架?
  12. 修改gitlab 去掉双重认证 Two-Factor Authentication
  13. 使用three建立一个正方体
  14. 力扣575. 分糖果
  15. 【C#】如何给变量取一个好的名字
  16. 电子量产工具:输入系统-输入管理单元测试
  17. 多易教育KAFKA实战(3)-java消费者客户端API示例代码
  18. 二项分布期望和方差的推导及推广
  19. html生成日期表,如何从此HTML表格提取日期?
  20. vue-router路由的安装、配置、具体用法和Vue-router学习笔记

热门文章

  1. 整数分解成若干项之和(DFS)拓展延伸
  2. 企业数字化不是各自发展,而是全面SaaS化推进
  3. Android 雷达图(蜘蛛网状图)
  4. 为什么需要云计算机,为什么需要云计算
  5. 有关于微信公众号网页开发的流程(自己的看法)
  6. 芯片制造系列全流程:设计、制造、封测
  7. XFS-新一代分布式文件系统-白皮书
  8. 百度地图锚点居中显示
  9. c语言无符号数最大值和最小值,微机原理中设计一个程序,求10个无符号数的最大值...
  10. C#,图像二值化(18)——全局阈值的模糊集理论算法(Huang Thresholding)与源程序