Grunt学习笔记001---grunt使用步骤和总结
https://www.cnblogs.com/chaojidan/p/4239675.html
https://www.cnblogs.com/chaojidan/category/652416.html
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学习笔记001---grunt使用步骤和总结相关推荐
- DataCamp的intermediate python学习笔记(001)
DataCamp DataScientist系列之intermediate python的学习笔记(001) 个人感悟:接触python是从2017年1月开始的,中间的学习之路也是断断续续的,学了忘, ...
- Linux学习笔记---移植官方linux步骤(二)
目录 修改网络驱动 修改 LAN8720 的复位 以及网络时钟 引脚驱动 修改fec1和fec2节点pinctrl-0属性 修改LAN8720A的PHY地址 修改 fec_main.c 文件 配置 L ...
- Linux学习笔记---移植官方linux步骤(一)
使用的开发板是正点原子IMX6U-MINI EMMC512M的开发板,这个板子也是移植的NXP官方linux,所以这里就直接从NXP官方的linux移植. 这里所说的移植,其实不是自己编写驱动文件等 ...
- Linux学习笔记---移植官方uboot步骤(二)
在上一篇 Linux学习笔记---移植官方uboot步骤(一) 自己的uboot已经编译成功了,接下来继续移植LCD驱动和网络驱动. 修改LCD驱动 修改配置参数 打开my_uboot/board/f ...
- Linux学习笔记---移植官方uboot步骤(一)
目录 编写shell脚本 修改MakeFile文件 重命名shell脚本 添加默认配置文件 修改默认配置文件 准备需要的板级文件夹 重命名.C文件 修改Makefile 修改imximage.cfg配 ...
- MATLAB学习笔记#001 获取矩阵大小
MATLAB学习笔记#001 获取矩阵大小 size 函数 语法 说明 示例 参考链接 size 函数 语法 [sz1,...,szN] = size(___) 说明 返回矩阵各个维度的长度 示例 [ ...
- Grunt学习笔记002---Gruntfile.js详解
Gruntfile.js详解 使用yeomen新建一个项目,里面会自动帮你创建一个完整项目的全部目录,这里针对新建出来的Gruntfile.js做一下简单说明,用作以后参考使用,由于还是菜鸟,很多东西 ...
- 人工智能必备数学知识· 学习笔记 ·001【线性回归,最小二乘法梯度下降法】
注:笔记 来自课程 人工智能必备数学知识 Tips①:只是记录从这个课程学到的东西,不是推广.没有安利 Tips②:本笔记主要目的是为了方便自己遗忘查阅,或过于冗长.或有所缺省.或杂乱无章,见谅 Ti ...
- PYTHON 100days学习笔记001:初识python
现在学习这个确实时间很紧,但是迟早得学,以后PYTHON自动化运维,PYTHON自动测试都需要用的到,甚至可以往数据分析方向发展,刚好最近有数据观组织的python100天计划,就参加了,做好笔记,一 ...
最新文章
- 一种NVMe SSD友好的数据存储系统设计
- 万门大学倒闭了,童哲连夜跑路了
- 不同数据库中查询前几条记录的用法(SQL Server/Oracle/Postgresql)
- 【Python】torrentParser1.00
- c51倒计时程序汇编语言,51单片机汇编程序:倒计时交通灯
- spark SQL学习(认识spark SQL)
- 【爬虫剑谱】二卷7章 实战篇-搭建IP代理池绕过反爬检测
- Codeforces比赛规则梳理
- 大数据分析给企业带来哪些挑战
- 免杀工具BypassAv-web使用教程
- 回首2021,展望2022 | 观成科技步履不停,刻画安全图腾
- html访问域名跳转,根据访问的域名跳转到指定目录的代码
- JNLP的使用及碰到的一些问题
- 快看看——刚出生的小刺猬,超可爱{图}
- 【Excel】给Excel生成工作表目录
- 2.SSM之Spring整合、AOP及Spring事务
- python unpacking_python packing unpacking 组包解包
- signature=8b820b86ff12c7f8de8612d678cc5b32,天国拯救控制台秘籍 天国拯救控制台代码一览...
- python爬取头条视频_python 爬取头条视频
- mysql into loadfile_mysql load_file()和 into outfile
热门文章
- DSB2017第一名代码尝试运行(记录自用)(四)
- MATLAB:虹膜识别的图像灰度化处理,直方图均衡化
- 淘宝开源Key/Value结构数据存储系统Tair技术剖析
- Hadoop系列之DistributedCache用法
- 吴恩达深度学习1.4练习_Neural Networks and Deep Learning
- ASP.Net Web 服务 – 如何使用会话状态
- EasyUI-dialog
- 使用WindowsXP中的网桥功能
- VS.左侧_蓝黄绿_竖线
- JQUERY1.9学习笔记 之内容过滤器(三) has选择器