前端工程化开发之yeoman、bower、grunt
上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见:
http://www.cnblogs.com/luozhihao/p/4818782.html (前端模块化开发)
http://www.cnblogs.com/luozhihao/p/4848709.html (前端自动化开发)
今天咱们来谈谈前端工程化,
谈到前端工程化,它的概念可能有些似懂非懂,什么是前端工程化?前端工程化又该如何实现呢?
下面我就结合自己的一些实践经验及总结,以yeoman、bower、grunt为例来介绍。
首先先介绍下前端工程化的概念,我个人认为前端工程化就是将前端无序、繁杂的操作组织起来,利用工具简化、规范前端流程,实现项目构建、开发、维护的一体化。大致如下图所示:
ok,下面我们进去第二个问题,如何实现前端工程化?
那么,这里我就要利用工具来介绍了,利用工具(yeoman、bower、grunt)来实现从一个项目的前端构建的流程,从资源配置到本地服务器的搭建运行。
关于这三个工具这里就不做介绍了,没有用过的童鞋可以访问各自的官网进行了解。
yeoman(脚手架工具):http://yeoman.io/
bower(包管理工具): http://bower.io/
grunt(构建工具): http://www.gruntjs.net/
一、准备工作
(1)首先得安装nodejs,从NodeJs官网下载安装包 http://nodejs.org/ 直接进行安装,相信很快就能完成安装
(2)安装Yo、Grunt、Bower
打开终端输入全局安装命令并执行:npm install -g yo grunt-cli bower
安装完成后便可以开始构建项目了。
二、项目构建
(1)在F盘下新建test文件夹,执行命令:md test
(2)生成项目目录及文件,执行命令:yo webapp
在这一步的时候会出现自定义安装的选项(bootstrap、Sass、Modernizr),如果项目需要则选上,按“空格”键切换选择模式,按“回车”继续,继续安装后会等待一段时间。
(3)安装局部bower和npm,执行命令:npm install && bower install
耐心等待其安装完成:
(4)利用bower安装项目其他文件,如jquery等,执行命令:bower install jquery
至此整个项目的目录如下所示:
(5)建立本地测试服务器,执行命令:grunt server
这时候浏览器会自动为我们打开项目首页的页面,记住不要关闭当前cmd窗口,grunt会自动检测本地文件是否被修改,这样我们一旦保存修改了的项目文件,浏览器便可以自动为我们刷新页面,无需我们手动刷新页面了。
三、总结
当我们通过浏览器看到'Allo, 'Allo!界面提示时说明我们的项目构建流程至此结束了,通过以上步骤可以看出我们并没有手动建立任何文件夹及文件,同时也没有去官网下载任何插件及库,如bootstrap、jquery等,所有的流程都是通过终端命令行实现的,大大简化了前端的工作复杂度,前端工程化的思想也体现的淋漓尽致了。
当然通过yeoman,bower,grunt还可以做很多事情,比如我们不再需要去yui compressor上压缩代码,不再需要去tinypng.com上压缩图片,不再需要到jshint上校验代码,不再需要手动刷新页面等......
那么关于前端工程化的思想就介绍到此,over~
前端工程化开发之yeoman、bower、grunt的更多相关文章
- 前端工程化系列[06]-Yeoman脚手架核心机制
在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoma ...
- 前端自动化开发之grunt
上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...
- 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装
最近看视频学习了前端自动化的一些知识,确实让我大开眼界.感觉前端越来越神器了.同时跟着视频自己也尝试运用了一些工具去构建前端项目,但是中间遇见了很多坑,磕磕绊绊的才实现了一点功能,所以打算记录一下学习 ...
- windows下前端开发工具遇到的问题总结(yeoman bower grunt)
我用的是windows环境 一毕要环境: 1:nodejs 官网:https://nodejs.org/en/ 2:由于很多国外网站国内都访问不了(如果没有设置会出现很多奇怪的错误),所有必需FQ 我 ...
- yeoman bower grunt等安装
grunt-beginner前端自动化工具:http://www.imooc.com/learn/30 grunt的安装 官方站点:http://gruntjs.com/ 安装指令: sudo npm ...
- node,Yeoman,Bower,Grunt的简介及安装
作为前端,基本的html,css,js已经不太够用了,所以要学习一些前端自动化工具,来提高我们的生产力 1.NodeJS 先安装NodeJS,直接去官网,下载最新的版本,一定要最新的版本,这样会避免很 ...
- 前端工程化系列[05] Yeoman脚手架使用入门
Yeoman是一款流行的前端的脚手架工具. 脚手架工具可以用来快速的自动生成项目的必要文件和基础文件结构.Yeoman使用的内建命令为yo,同时它自己也是一个包管理工具和自动化任务工具,它基于特定的模 ...
- 前端模块化开发之seaJs
了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开 ...
- 前端移动开发之rem
前言 作为一名前端工程师,我们不仅要会PC端开发,还要会移动端开发,而且现在移动端占据主要流量,所以掌握移动端开发的技能更是必须的. 那么进行移动端的开发,什么是必须,我们想要的效果是什么? 自适应. ...
随机推荐
- Web Essentials之通用功能
返回Web Essentials功能目录 本篇目录 功能 快捷方式 WEIgnore 功能 通用功能应用于很多方面. 设置 所有的设置都可以在VS选择工具 -> 选项 -> Web Ess ...
- 第三波假期干货——webstrom工具栏图标
在WS中使用工具栏上的快捷图标来配合工作可以有效提高效率,因为你不用去记住一些快捷键,只要点一下鼠标即可.不过在WS中有很多实用功能却是没有自带个性图标的,导致自定义工具栏后可能就是好几个一模一样的绿 ...
- 团队项目——站立会议DAY13
第十三次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:在完成各项功能的基础上继续进行扩展完善 2.钟灵毓秀:进行模块分类的整合与纠错修改,整理错误向队友提出 ...
- 5天玩转C#并行和多线程编程 —— 第三天 认识和使用Task
5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...
- [蓝牙] 2、蓝牙BLE协议及架构浅析&&基于广播超时待机说广播事件
第一章 BLE基本概念了解 一.蓝牙4.0和BLE区别 蓝牙4.0是一种应用非常广泛.基于2.4G射频的低功耗无线通讯技术.蓝牙低功耗(Bluetooth Low Energy ),人们又常称之为 ...
- STSdb,最强纯C#开源NoSQL和虚拟文件系统 4.0 RC2 支持C/S架构
STSdb是什么 再来说明一下STSdb是什么:STSdb是C#写的开源嵌入式数据库和虚拟文件系统,支持实时索引,性能是同类产品的几倍到几十倍,访问官方网站. 温故知新 之前发了文章<STSdb ...
- easy-ui 小白进阶史(一):加载数据,easy-ui显示
作为一个没上过大学,没经过正规培训的96年的小白来说,找工作就没报特别大的希望,大不了找不到在回炉重造,继续学... 终于在海投了200份的简历之后...终于找到了...面试也挺简单的,,,第二天就去 ...
- 自已写的Json序列化方法,可以序列话对象的只读属性
/* * by zhangguozhan 2015/1/5 * P2B.Common.CJson.ConvertJson.ObjectToJson<SenderDomainModel>方法 ...
- 纯js 判断手势滑动方向
$('body').on('touchstart', '#gallerySlider img', function(e) { var touch = e.originalEvent, startX = ...
- 06- Shell脚本学习--其它
Shell输入输出重定向 Unix 命令默认从标准输入设备(stdin)获取输入,将结果输出到标准输出设备(stdout)显示.一般情况下,标准输入设备就是键盘,标准输出设备就是终端,即显示器. 输出 ...