前言:
Yeoman 1.0版本不仅仅是一个工具,它还是一个工作流;一个让web开发和谐甚至变得更好的工具和最佳实践的集合。
致力于提高你在构建web应用时的生产力和舒适度,由三种核心工具构成:yo(脚手架工具),bower(包管理工具),grunt(构建工具)。
Yo 搭建新应用的脚手架,编写你的Grunt配置并且安装你有可能在构建中需要的相关的Grunt任务。
Grunt 被用来构建,预览以及测试你的项目
Bower 被用来进行依赖管理,所以你不再需要手动的下载和管理你的脚本了。
一,安装(前提是已安装过Node.js):
npm install -g yo //它将自动安装Grunt和Bower。
1.这时候可能会出现权限错误
sudo chown -R $USER /usr/local
2.由于网络问题,还可能遇到一个错误(Saving to /tmp/phantomjs/phantomjs-1.9.7-linux-x86_64.tar.bz2),只要网上另找地方下载 phantomjs-1.9.7-linux-x86_64.tar.bz2就可以了(可能需要fanqiang),下载后把压缩包copy到 /tmp/phantomjs/(可以从这里下载http://phantomjs.org/download.htmlr.bz2)
3.安装AngularJS生成器,可以通过npm安装其他的生成器,运行yo可以得到更多详细信息。
npm install -g generator-angular
二,用生成器构建一个工程:
cd mkdir project //新建一个文件夹放你的项目 cd project yo angular
三,用grunt工具运作工程:
grunt serve //预览工程的运行效果 grunt test //跑单元测试 grunt //构建用于发布的正式版应用
四,工程中引入其他类库:
1.underscore
bower install underscore //使用bower从在线包管理器中拉取underscore代码 grunt
2.grunt-haml
安装:
npm install grunt-haml
在module.exports中添加:
grunt.loadNpmTasks('grunt-haml');
在grunt.initConfig:
haml: { options: { language: "ruby" }, dist: { files: [{ expand: true, cwd: '<%= yeoman.app %>', src: '{,*/}*.haml', dest: '.tmp', ext: '.html' }] } },
在watch中:
haml: { files: ['<%= yeoman.app %>/views/*'], tasks: ['haml'] },
然而这种情况下,我每次重启服务器后网页加载不上,必须修改以下网页的内容才可以加载上,于是我在grunt.initConfig中给每个haml文件都手动转换为html文件,成功运行
haml: { index: { src: "app/views/main.haml", dest: "app/views/main.html" }, main: { src: "app/views/order_details.haml", dest: "app/views/order_details.html" } },
五,其他问题
1.Loading "cdnify.js" tasks...ERROR
>> Error: Unable to create git_template directory: Arguments to path.resolve must be strings
npm install grunt-google-cdn
相关推荐
资源名称:Web前端自动化构建:Gulp、Bower和Yeoman开发指南作者简介:Stefan Baumgartner是一个充满激情的网页开发者和演讲家,他在自己的家乡组织了技术会议。他的研究领域包括网络性能、自动化、体系结构和渐进...
Yeoman 工程脚手架,可以生成基础微服务项目,CRUD 代码
yeoman.github.io, Yeoman网站 Yeoman.io Yeoman.io 电子邮件站点 !如果你对 Yeoman.io 网站有问题或者贡献,那么这里就是 ! 如果你想提交有关文书代码或者工作流的问题,请访问文书/文书库管理单元。这个站点是用...
generator-nemo 是一个增加 Nemo 自动化解决方案到浏览器测试工具 Kraken 中的 Yeoman 生成器 标签:generator 分享 window._bd_share_config = { ...
基于yeoman构建 vue webpack es6 的项目
前端开源库-yeoman-handlebars-engineyeoman车把引擎,在车把中编写yeoman生成器模板
generator-material-react 是yeoman脚手架的一个示例项目
Yeoman是一个强健的工具,库,及工作流程的组合,帮你网页开发者快速创建出漂亮而且引人入胜的网页程序 功能特性如下: 快速创建骨架应用程序——使用可自定义的模板(例如:HTML5、Boilerplate、Twitter ...
NULL 博文链接:https://damoqiongqiu.iteye.com/blog/1885371
yeoman 使用说明手册 中文
更新生成器 用样式更新您的Yeoman生成器 该脚本可帮助使用Yeoman生成器将存储库更新到最新版本。要求要使用此软件包,生成器应: 创建一个.yo-rc.json存储您的应用程序的版本。 它应遵循。 // .yo-rc.json{ " ...
Laravel开发-yeoman 约曼是一个用Laravel5.3编写的友好的管理员管理系统。
关于 yeoman 的最佳知识库在他们的网站上: generator 快速安装yeoman 如果你没有 npm 然后去: 安装 npm sudo npm install npm -g 安装 yeoman npm install -g yo Yeoman 生成器前端样板 要运行“ generator-...
#yeoman-gradle-plugin 用于将 yeoman 构建集成到您的 gradle 构建中 - 受启发。 查看 [yeoman-gradle-plugin-example] 说明:查看 [yeoman-gradle-plugin-example]。 执行 gradle jettyEclipseRun 如果它坏了,请...
const yeoman = require ( 'yeoman-environment' ) ;const env = yeoman . createEnv ( ) ;// The #lookup() method will search the user computer for installed generators// The search if done from the ...
《Web前端自动化构建:Gulp、Bower和Yeoman开发指南》.pdf
yeoman构建的bootstrap gulp的单页项目
Yeoman学习指南中文版 原文作者: Addy Osmani, James Cryer, Pearl Chen 翻译: @WalkerBe 官方原文: GitBook: 摘要 这本学习指南介绍了如何使用Yeoman从头开始构建一个Todo应用程序,从而了解如何搭建一个项目的...
YoYoMERN 这是一个YeoMan生成器,它创建了Mongo,Express,React,Redux和Node堆栈应用程序。安装首先,使用安装和generator-mern-stack-generator(我们假设您已经预装了 )。 npm install -g yonpm install -g ...