grunt构建化之路——基础篇
初衷
接触grunt
已经有段时间了,并且成功运用到了实际项目上了。这篇文章以及后面一些列的文章都是记录自己学习grunt这个构建工具以及使用的一个过程。为了自己以后技能点的巩固和避免采坑,所以就成就了这边文章。
grunt是什么
grunt是什么呢?概括来说:grunt是一个依赖于node平台的构建工具。那什么是构建工具呢?这个概念对于java开发者来说,一定不那么陌生,对于他们来说,java构建工具也是他们经常使用的辅助工具,像早期的ant到现在大红大紫的maven,都是java开发者常用的构建工具,他们被用来解决java文件的依赖,压缩、打包等任务。
grunt也是ant、maven性质类似的工具,不过它主要服务于前端的,主要被用来处理文件(包括html、css、js)的合并、压缩、依赖等问题,不过这并不是它本身的功能,grunt本身是一个构建平台,他的强大来自于其社区插件不断的增加和更新,grunt构建平台提供了成千上万插件来实现我们不同的构建需求,且由于开源,不断的开发人员贡献他们的一份力量。
gurnt的logo是一个牛头,看起来是不是很猛很萌的。
为什么选择grunt?是否还有其他的代替方案?
在讲这个标题之前,先讲一下前端构建工具的苦逼历史吧,首先在刀耕火种的时代,那时的页面相对简单,基本上都是table嵌套结构,js也是一些简单的交互,css还没发展成熟,项目占的时间比也集中在后台,后来随着web的发展,前端页面变得也相对复杂了,这时候前端主要通过手动或者使用java的ant工具来达到目的,但是一方面手动还是比较繁琐,而使用ant局限性也很大,比如不能处理脚本之间的依赖关系等,所以这段时间前端还是想当苦逼的。grunt的发展,得益于node的快速发展,gurnt的出现也是最近几年才发生的。除了grunt之外,现在还有一个冉冉的新星gulp也在发展壮大,除了这两个很典型的,npm本身也可以用来处理构建,不过这也算是后话了。(ps:构建工具不只本文提到的),真是构建一小步,前端一大步。
也许你会问,有了这么多构建工具,在技术选型的时候,那该选择哪个呢?至少从目前来看,还是选择grunt比较好,主要因素在一下方面:
- 社区活跃度高,插件最丰富(选择权重最高)
- 语法简单,易于编写
- 中文文档丰富,在后面帮助标题,提供了两个中文翻译连接。(英语渣的福音)
- 线下交流频繁(16613475,你懂得)
grunt环境的配置
grunt环境的搭建可以参考http://www.gruntjs.org/docs/getting-started.html
其步骤流程如下:
- 安装node,具体安装方法可以参考我前面写的文章。
- 安装gurnt-cli。具体可参考上面的链接。
- 在项目的根目录下,新建package.json和Gruntfile.js。
- 在项目的根目录下,运行
npm install grunt --save-dev
如果安装上面的连接一步步来的话,应该不会出什么差错了。通过这基本,grunt基本上就配置完毕了。(ps:注意加粗的部分)
使用grunt向控制台输出Hello World
加入上面的环境配置好了,那怎么知道grunt是否能跑起来呢,很简单,我们跑一个构建任务,其作用是像控制台输出“Hello World”,其流程如下,首先在Gruntfile.js添加以下的代码:
module.exports = function (grunt) {
grunt.registerTask('default', function() {
grunt.log.write('Hello World!');
});
};
然后切换到项目的根目录下,运行gurnt default
或者 grunt
命令,如果命令控制台能输出Hello World!,那就说明配置没什么问题了。
文章总结
之所以推荐grunt,是因为好的工具,能提高工作效率,怎么我们就能省下大把时间泡妹子了,呵呵!后起之秀gulp大有赶超grunt之势,不过现阶段不是我们考虑的。有时间也可以学习的。
后面会陆续发表一些grunt插件的文章,这些才是重中之重。希望大家能持续关注。
相关链接
官网地址 :http://gruntjs.com/
中文站点1:http://www.gruntjs.org/
中文站点2:http://www.gruntjs.net/
拓展阅读
30分钟学会使用grunt打包前端代码
grunt快速学习小记
Grunt教程——初涉Grunt
使用Grunt构建任务管理脚本
grunt让Nodejs规范起来
grunt从入门到自定义项目模板
Grunt:任务自动管理工具
grunt构建化之路——基础篇相关推荐
- JAVA学习之路--基础篇三
目录 关于Java中从键盘输入的语句 nextxxx().next().nextLine()的区别 语句 if和if else语句 Switch语句 for语句 while和do..while bre ...
- Ps高手之路基础篇视频教程
课程介绍 Photoshop高手之路的基础篇,全面覆盖了Photoshop的基础知识,使用方法及其在相关行业中的应用技术.非常适合平面设计初学者或有一定基础的平面设计爱好者. 学习地址 百度:http ...
- protege5.0构建知识图谱(基础篇)
protege5.0的基本使用介绍 今天新学习了利用protege5.0构建知识图谱,和大家分享下学习经历. protege的安装以及可视化插件graphviz的安装参照了前辈的博客,这里表示一下感谢 ...
- 顶级c程序员之路 基础篇 - 第一章 关键字的深度理解 number-1
c语言有32个关键字,每个关键字你都理解吗? 今天出场的是: auto , register, static, extern 为什么他们会一起呢,说到这里不得不谈到c语言对变量的描述. c给每 ...
- Django学习之路-基础篇
Django 学习之路 一.Django项目创建 1.项目结构 1.1. settings.py 文件 1.2 URL 1.3 视图函数 1.4 路由配置-path 二.请求与响应 2.1.请求和响应 ...
- python学习之路基础篇(第四篇)
一.课程内容回顾 1.python基础 2.基本数据类型 (str|list|dict|tuple) 3.将字符串"老男人"转换成utf-8 s = "老男人" ...
- 桐花万里python路-基础篇-01-历史及进制
历史及版本 作者:吉多·范罗苏姆(龟叔) 时间:1989年 重要版本: 2.4 2004年 同年Django诞生 2.6 2008 3.0 2008 2.7 2010 3.6 2016.12 ...
- python学习之路基础篇(第八篇)
一.作业(对象的封装) 要点分析 1.封装,对象中嵌套对象 2.pickle,load,切记,一定要先导入相关的类二.上节内容回顾和补充 面向对象基本知识: 1.类和对象的关系 2.三大特性: 封装 ...
- Java修炼之路——基础篇——数据类型
基础数据类型: 整型(byte short int long ).浮点型.布尔型.字符型boolean:只表示一位的信息,true,false.默认为false,基本上占一字节char: 16位,2字 ...
最新文章
- Centos7搭建k8s环境教程,一次性成功,收藏了!
- 【Netty】mmap 和 sendFile 零拷贝原理
- 天气小工具新增风格-默认无背景,感谢欧阳兄制作
- arcgis9.2的安装方法
- 第三十四天 how can I 坚持
- 【计算机科学基础】数据运算
- 无人机官方网站_用上5G和无人机,你家高楼也可以做 体检
- Springboot整合netty实战
- 边缘设备上的实时AI人员检测:以实时模式检测视频中的人员
- 父组件向子组件传递数据
- java与android https,Java-Android SSL https发布
- android实例教程_Android共享首选项示例教程
- Themida/WinLicense V1.8.2.0 +脱壳 FOR PcShare远程控制会员版本20070826
- 浏览器打开exe(IE和谷歌)
- 数据结构课设 (快餐店 POS 机计费系统、成绩分析、算术表达式)
- nginx proxy_pass 502 这是什么错误?
- 《保卫萝卜》项目实践(2)
- DQN笔记:高估问题 target network Double DQN
- VB程序安装时,提示acmboot.exe发送错误
- Low-cost Sensor-enabled Freehand 3D Ultrasound
热门文章
- java连接智能电表_智能电表数据读写心得
- Mix-Editor图文编辑器v1.1----Android图文编辑器
- uniapp使用微信小程序提供的原生插件(组件)
- 搭建hexo+Github博客
- Permission denied: user=dr.who, access=READ_EXECUTE, inode=“/tmp“:root:super
- 使用Markdown 写邮件
- JMeter测试工具使用基础教程
- FL Studio 2022最新mac水果编曲制作音乐
- 解决迅雷下载会卡的问题
- 【安全用妆周】2021年全国化妆品安全科普宣传周网络知识竞赛开启