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安装文件到本地安装。
2)安装grunt
grunt是一个对web前端进行打包的工具。
3)安装bower
bower管理的是前端css+javascript框架(如JQuery)
npm install -g bower
除开NodeJs由npm管理以外,其他的css/js模块引入都由bower管理:
4)安装Yoeman
5)安装compass
compass是对css打包的一个工具,用来编译scss。
这个东东需要ruby环境,一般可以用gem来安装。
如果gem不能在线安装,一个可能是国外的资源被墙了,要换taobao的源。
到目前为止,基本的环境已经配置安装好,下面解决如何运行脚手架架构项目工程。
PS[转载]http://www.tuicool.com/articles/IJbQFn
1)基于bower的前端资源依赖管理:这个的重要性无需强调,请回忆一下我们满头大汗就为了找到某个js文件,或因缺少某个依赖的js文件导致脚本出错的经历。
2)子模板:相当有用的特性。你可以用它完成子项目创建、子模块创建、资源更新等工作,给项目提供了更多的灵活性。
3)基于问题的项目骨架构建:这点其实grunt-init也有,但yeoman明显做得更好,如二选一、单选列表、多选列表等。grunt-init 的问答流程内部实现则相对费解。
package.json:项目依赖的插件,比如grunt任务依赖的插件等
bower.json:前端资源依赖声明
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:前端资源依赖声明
相关文章推荐
- 递归(图的遍历)3
- 安装系统更新时,强制断电导致之后安装更新,提示错误的解决方案
- VB6.0中提示:该部件的许可证信息没有找到,在设计环境中,没有合适的许可证使用该功能”的解决办法
- 深入理解windows 消息机制
- 【Android开发小记--12】同步歌词
- 线程和QObjects
- 深入理解windows 消息机制
- bzoj4010【HNOI2015】菜肴制作
- Windows消息机制概述
- 从CODES 到ICCV
- Windows消息机制概述
- 蓝桥杯P1103 复数运算问题
- NoSQL之Redis(二)---Java操作Redis存储自定义类型数据
- yarn的工作流程
- cxf拦截器
- Head First C (后半部分)读书笔记
- MacOS下Express安装过程中遇到的问题
- appjs desktop2
- VB程序使用管理员权限
- Linux系统编程重要细节记录(持续更新中)