您的位置:首页 > 其它

Yeoman快速搭建Web开发框架

2016-02-07 11:40 483 查看
Yeoman是一个脚手架工具,可以自动化整合NodeJs/AngularJs/css/html等Web开发环境。

Yeoman主要包含了三个工具:yo、grunt、bower:

yo:脚手架工具,主要作用是创建项目骨架(跟grunt-init有点像)。
grunt:构建工具,主要用来运行各种任务,比如文件压缩、合并、打包等。
bower:主要用来做前端资源依赖管理,跟npm很像,区别在于:npm管理的是node模块的依赖,bower管理的是前端资源的依赖,如css、javascript文件等。

1)安装node(同时安装npm)

CentOS等Linux操作系统可以从官方网站上下载node安装文件到本地安装。

1.1 下载安装nodejs
yum install gcc-c++ openssl-devel
wget http://nodejs.org/dist/v*.*.*/node-v*.*.*.tar.gz tar –xvf node-v*.*.*.tar.gz
cd node-v*.*.*
./configure
make & make install
cp -f node /usr/bin/node

1.2 安装npm(npm是Node.js的包管理工具)
curl https://npmjs.org/install.sh | sh


2)安装grunt

grunt是一个对web前端进行打包的工具。

npm install grunt -g
npm install grunt-cli -g


3)安装bower
bower管理的是前端css+javascript框架(如JQuery)

npm install -g bower

除开NodeJs由npm管理以外,其他的css/js模块引入都由bower管理:

bower install jquery


4)安装Yoeman
npm install -g yo


5)安装compass
compass是对css打包的一个工具,用来编译scss。

这个东东需要ruby环境,一般可以用gem来安装。

gem update --system
gem install compass

如果gem不能在线安装,一个可能是国外的资源被墙了,要换taobao的源。

到目前为止,基本的环境已经配置安装好,下面解决如何运行脚手架架构项目工程。

比如我们要创建一个angularjs的项目:
1> mkdir yeoman-web
2> cd yeoman-web
3> sudo npm install -g generator-angular
4> yo webapp
5> npm install -g grunt && npm install -g grunt-cli
6> bower install && npm install(在你yeoman-web目录下安装js包)


PS[转载]http://www.tuicool.com/articles/IJbQFn

同样是前端脚手架,其实grunt已经满足了我们从项目创建到项目构建的需求,为什么要用yeoman?

简单来说就是yeoman比grunt好用。
1)基于bower的前端资源依赖管理:这个的重要性无需强调,请回忆一下我们满头大汗就为了找到某个js文件,或因缺少某个依赖的js文件导致脚本出错的经历。
2)子模板:相当有用的特性。你可以用它完成子项目创建、子模块创建、资源更新等工作,给项目提供了更多的灵活性。
3)基于问题的项目骨架构建:这点其实grunt-init也有,但yeoman明显做得更好,如二选一、单选列表、多选列表等。grunt-init 的问答流程内部实现则相对费解。

Yeoman项目下几个重要的文件

Gruntfile.js:grunt任务声明的地方
package.json:项目依赖的插件,比如grunt任务依赖的插件等
bower.json:前端资源依赖声明
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: