初识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构建工具



2 thoughts on “初识yeoman

  1. 戈饭 says:

    我安装lessapp后,grunt serve一开始没问题。可是一新建,删除css文件就报错退出。
    你会不会啊。
    而且,新建了less文件,修改less样式,网页也不会变化,build后网页也不变化?
    要怎么调啊。

  2. 戈饭 says:

    安装了webapp生成器,完全没问题。
    打开lessapp的grunt.js对比一看,发现里面的copy竟然少了一段关于style的配置。
    怎么这么蛋疼呢

Leave a Reply

Your email address will not be published. Required fields are marked *

*