grunt入门讲解6:grunt使用步骤和总结
Grunt是啥?
很火的前端自动化小工具,基于任务的命令行构建工具。
Grunt能帮我们干啥?
假设有这样一个场景:
编码完成后,你需要做以下工作
- HTML去掉注析、换行符 - HtmlMin
- CSS文件压缩合并 – CssMinify
- JS代码风格检查 – JsHint
- JS代码压缩 – Uglyfy
- image压缩 - imagemin
重复而枯燥的工作太多了,我们需要一个自动化的工作流程,让我们更专注于coding,而不是coding外的繁琐工作。于是Grunt应运而生。可以想像,如果在node环境下,一行命令就搞定了上面的所有工作,是不是节省了很多时间。
Grunt安装配置
安装 grunt-cli
1. 自备node环境(>0.8.0), npm包管理
2. 卸载旧版本grunt(<0.4.0) (没装过请忽略)
npm uninstall grunt -g
3. 安装grunt-cli
npm install grunt-cli -g
安装 grunt-init(可选)
npm install grunt-init -g
可选安装,grunt-init是个脚手架工具,它可以帮你完成项目的自动化创建,包括项目的目录结构,每个目录里的文件等。具体情况要看你运行grunt-init指定的模板,以及创建过程中你对问题的回答。由于篇幅且配置 grunt-init 模板较为复杂,本课暂不展开讨论,下一课将详细讲解。
配置 grunt
从官网下载package.json和Gruntfile.js 文件放到项目根目录,并对文件进行修改配置.
package.json
//项目自动化所依赖的相关插件。Gruntfile.js
//项目自动化工作流配置文件。
package.json 文件的基本内容:
Gruntfile.js 文件的基本内容:
在实际项目中的应用
1. 先配置好package.json、Gruntfile.js这两个文件,具体如何配置,请看前面的课程讲解。
2. 执行命令,自动下载依赖的Grunt插件
命令行执行:
npm install
3. 启动任务live的执行,这个任务,你可以用来监控你的源文件是否有变化。
命令行执行:
grunt live
4. 启动任务build的执行,这个任务,你可以用来合并所有的js源文件
命令行执行:
grunt build
Grunt使用总结
1. 配置简单。配置文件Gruntfile.js是JS格式的,比较贴近前端的知识点。相对Ant之类的是基于JAVA的,而且又是xml配置,相对来说学习成本低。
2. Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。
比如:haml less coffeeScript dataURI html2json
3. 每个人的具体需求不一样,可以按自己的习惯合理配置,组合成最适合自己项目的自动化工作流。
4. Grunt团队很勤劳,社区活跃,有兴趣可以持续关注。
加油
grunt入门讲解6:grunt使用步骤和总结的更多相关文章
- grunt入门讲解2:如何使用 Gruntfile 配置任务
Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要包括以任务名称命名的属性,和其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相 ...
- grunt入门讲解1:grunt的基本概念和使用
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...
- grunt入门讲解7:项目脚手架grunt-init
grunt-init是一个用于自动创建项目脚手架的工具.它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构.至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给 ...
- grunt入门讲解4:如何创建task(任务)
每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情. 如果你没有指定一个任务,并且你已经定义一个名为 "default" 的任务, ...
- grunt入门讲解5:创建插件,安装Grunt以及常见问题
创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.co ...
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify grunt-contrib-qunitgrunt-contrib-concatgrun ...
- Grunt 入门
转自:http://user.qzone.qq.com/174629171/blog/1404433906 Grunt被定义为:the javascript task runner. 什么算是Java ...
- Grunt入门学习之(1) -- 环境安装
Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...
- Grunt入门
Grunt 新手一日入门 2014.06.20 前端相关 TOC 1. 用途和使用场景 2. 开发一个任务自动处理器 3. 开始学习 Grunt 3.1. 安装 Grunt 3.2. 生成 packa ...
随机推荐
- go语言实战笔记(二)
码代码之前一定要安装go,哈哈哈哈,反正我只装goland然后写不了代码报错,卡在第一段代码哈哈哈哈哈哈 新建项目goproject 新建src文件夹 新建main文件夹 新建第一个go文件 开始写 ...
- 大数据入门第五天——离线计算之hadoop(上)概述与集群安装
一.概述 根据之前的凡技术必登其官网的原则,我们当然先得找到它的官网:http://hadoop.apache.org/ 1.什么是hadoop 先看官网介绍: The Apache™ Hadoop® ...
- C# 用QQ企业邮箱发邮件
问题System.Net.Mail下的SmtpClient来发送邮件,而System.Net.Mail only仅支持Explicit SSL 不要465端口,用25,不用EnableSsl = tr ...
- linux 监控文件变化
介绍 有时候我们常需要当文件变化的时候便触发某些脚本操作,比如说有文件更新了就同步文件到远程机器.在实现这个操作上,主要用到两个工具,一个是rsync,一个是inotifywait .inotifyw ...
- Java 中的extends 和 implements
初学Java语言, 代码中的extends和implements让我感到很迷惑,现在终于弄明白它们之间的区别和用法了. //定义一个Runner接口 public inerface Runner { ...
- Codeforces 862D. Mahmoud and Ehab and the binary string (二分)
题目链接:Mahmoud and Ehab and the binary string 题意: 一道交互题,首先给出一个字符串的长度l.现在让你进行提问(最多15次),每次提问提出一个字符串,会返回这 ...
- node.js学习笔记——前序
一.什么是node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一 ...
- day01_概念
1 网络分类: 1 按照范围: - 局域网:范围很小的网络,如一间办公室,一个公司 - 城域网:大致城市范围内的网络,半径几公里到几十公里 - 广域网:比城域网范围更大的 2 网络衡量标准 1 传输速 ...
- Android Service(下)
阅读本文需要先阅读Android Service(上) 一 为什么需要bindService() 绑定服务就是为了和服务进行通讯 可以调用服务里面的方法 二 bindService()调用服务里面方法 ...
- CentOS7上部署ASP.Net Core 2.2应用
前言 在CentOS7上部署ASP.Net Core应用是我的技术路线验证的一部分,下一个产品计划采用ASP.Net Boilerplate Framework开发.因此需要求提前进行一下技术验证,在 ...