初识yeoman

最近写Less,写着写着发现重复性的、繁琐的工作越来越多,less找软件编译,图片找软件压缩,文件找地方合并。。。于是搜索有一些前端自动化开发的工具,试了几天Grunt,几行命令一切搞定,果然是提高效率,节省体力的神器。

Grunt,一个javascript任务运行工具,可以帮助编译less,sass,压缩图片,合并js文件等等等等。现在有很多介绍Grunt的文章,比如: Grunt 入门教程一:开始使用Grunt(翻译自官方教程)Grunt教程——Gurnt任务的配置。当初接触的时候,也是这些文章一篇篇读下来的。

Grunt有很多实用插件,根据项目需要,其中的contrib-less、contrib-imagemin用得最多,因为写Less,contrib-less能迅速帮助编译并且压缩,再也不需要把编译软件打开,再把less文件选中然后点击编译了。当然,这还是小事,一个项目通常五六个到十多个页面,每次写less,html里面要写上style.less,并且加入编译less的js,可是less编译成css后,还得手动把html里面的style.less改成style.css。当然,DW里面批量修改,没问题,可是真心觉得活干多了!怎么办呢?yeoman!!

由于基础不好,yeoman也是研究了数个星期才弄到可以顺利开展项目。yeoman,前端开发自动化流程的利器,别的不说,至少能解决自己目前项目的所需。

前端项目可以更简单—Yeoman入门指南(1)这篇文章真心不错,不仅介绍了yeoman是什么,还有分享了安装教程。于是,我也想要分享一下自己的使用心得,因为刚开始时遇到真心不明白的问题。

1. “Yeoman其实是三个工具的集合:YOGRUNTBOWER” –前端项目可以更简单—Yeoman入门指南(1)

所以,要安装yo、grunt-cli、bower。在安装grunt-cli之前,先要安装node.js。因为Grunt和Grunt的插件都是通过Node.js的包管理器npm来安装和管理的。

下载安装好node.js后,可以查看node.js版本,

按住Win+R,输入命令:node -v

node

2. 接下来用npm安装yo、grunt-cli、bower。

命令:npm install -g yo grunt-cli bower

看到下面的提示,那就安装成功了:

yo

3. 上面的完成之后就可以安装工程模板。

webapp模板是基于sass的,由于个人是Less使用者,所以拿lessapp举例。

安装lessapp模板,输入命令: npm install -g generator-lessapp

less

 

完成!以上命令全部在根目录运行。

4. 模板安装好以后,需要进入项目目录(输入命令:cd “项目路径”),为你的项目创建一个less app模板。

项目目录而不是根目录下,输入命令:yo lessapp

选择项目中要用的工具、框架:

lessapp

去到项目文件夹,可以看到创建好的less app模板:

folder

终于完成啦!!看看是否成功,输入命令:grunt server,于是浏览器会自动弹出一个欢迎界面。

可是。。可是。。。为什么弹出来的页面没有样式!!百思不得其解啊!

后来才发现,在app这个文件夹下,应该有一个名为bower_components的文件夹,里面有bootstrap、jquery、modernizr(如果你勾选了的话)文件,而我的文件夹里面并没有!怎么回事呢?

在根目录下输入命令 bower -v,版本号为1.3.1,说明bower已经安装成功,可是它并没有为我安装bower_components文件。再用bower安装font-awesome试试,进入项目目录:bower install font-awesome,出现如下提示:

bower ENOGIT git is not installed or not in the PATH

原来如果用windows安装bower时,必须要正确安装msysgit,参考:A note for windows users

安装msysgit后,再一次 yo lessapp,查看app文件夹,如下:

app

输入命令 grunt server,欢迎界面有样式了!

welcome

立即进入coding状态!

 

参考:

Grunt:任务自动管理工具 

前端项目可以更简单—Yeoman入门指南(1)

Yeoman:Web 应用开发流程与工具

【Yeoman】热部署web前端开发环境

如何在 Windows 平台安裝與使用 Yeoman 1.0 相關工具

前端工程构建工具——Yeoman

Yeoman:强大的web构建工具

javascript 案例二(网页换肤)

今日案例,一个简单的网页换肤,即切换样式表。经过上一修改元素样式的案例,这个写得更为轻松了。

css:

<style>
#container{text-align:center;color: #333}
#nav li{display: inline-block; padding: 8px 20px;margin: 0 10px;cursor: pointer;border-radius: 10px;}
.green{background-color: #16977d;}
.blue{background-color: #3c999c;}
.white{background-color: #f4f4f4;}
.content{margin-top: 100px;font-size: 34px}
</style>

分别写了三个样式表:

green.css, blue.css, white.css

html:

<div id=”container”>
<ul id=”nav”>
<li class=”green”>Green</li>
<li class=”blue”>Blue</li>
<li class=”white”>White</li>
</ul>
<h1 class=”content”>Here is test page</h1>
</div>

js:

var themeList = [‘green’,’blue’,’white’]; //将样式表的名称写在数组里
var tarObj=document.getElementById(‘stylefile’); //获得页面中的样式表
var navName=document.getElementById(‘nav’);
var navList=navName.childNodes;//获得点击对象
window.onload = actFun;
function actFun() {
for(var i=0; i<navList.length; i++){
navList[i].onclick=function(){
tarObj[‘href’]=’css/’+this.className+’.css’
}
}

}

查看DEMO

javascript 案例一(控制元素属性)

改变元素样式

目标是修改div的宽度,高度,背景色,显示隐藏。

html:
<style>
#btn{text-align:center;}
#btn input{margin:10px;}
#div1{width:100px;background-color: #000;height:100px;margin:20px auto;}
</style>

<div id=”container”>
<div id=”btn”>
<input type=”button” value=”width” id=”width”>
<input type=”button” value=”height” id=”height”>
<input type=”button” value=”backgroundcolor” id=”backgroundcolor”>
<input type=”button” value=”hide” id=”hide”>
<input type=”button” value=”reset” id=”reset”>
</div>
<div id=”div1″></div>
</div>
以下为黑暗中摸索的js:

//获得每个按钮

var mainDiv = document.getElementById(‘div1’)
,cWidth = document.getElementById(‘width’)
,cHeight = document.getElementById(‘height’)
,cColor = document.getElementById(‘backgroundcolor’)
,cHide = document.getElementById(‘hide’)
,cReset = document.getElementById(‘reset’);
window.onload = actFun;
//绑定每个按钮的点击事件
function actFun() {
cWidth.onclick = function(){
mainDiv.style.width=’150px’;
}
cHeight.onclick = function(){
mainDiv.style.height=’200px’;
}
cColor.onclick = function(){
mainDiv.style.backgroundColor=’#ff0000′;
}
cHide.onclick = function(){
mainDiv.style.display=’none’;
}
cReset.onclick = function(){
mainDiv.style.width=’100px’;
mainDiv.style.height=’100px’;
mainDiv.style.backgroundColor=’#000′;
mainDiv.style.display=’block’;
}
}

很显然,如果再添加五个要修改的样式,还得再给5个按钮绑定事件。处于还没入门,刚找到门缝的我,也只能写成这样。

于是,借鉴别人的代码,重新写了一遍:

//既然要给按钮绑定事件,并且做的同一件事都是修改样式,那么就把它写成一个函数,若再需要绑定事件,则无需再写。

function actFun(tar,pro,value){
tar.style[pro]=value;
}
window.onload = function(){
var getButton=document.getElementsByTagName(‘input’);//获得所有按钮
var getTar=document.getElementById(‘div1’);//获得要修改的元素
var proArr=[‘width’,’height’,’background’,’display’,’display’];//把要修改的属性放在数组
var tarArr=[‘150px’,’200px’,’#ff0000′,’none’,’block’];//修改的值放在一起
for(var i=0; i<getButton.length; i++){//将按钮循环一遍
getButton[i].index=i;
getButton[i].onclick=function(){
if(this.index == getButton.length-1){
getTar.style.cssText=””;//如果是最后一个按钮,即reset,就把样式清除掉
};
actFun(getTar,proArr[this.index],tarArr[this.index]);//调用函数
}
}
}

查看DEMO

虽然很简单,很基础,但偶还是得花更多的时间去理解和练习并且掌握好它(怀着一颗迷茫又敬畏的心),原因你懂的。