Blog

Blog

PHODAL

Yeoman 快速上手

Yeoman致力于提高你在构建web应用时的生产力和舒适度 由三种核心工具构成:

  • Yo 脚手架工具。编写你的Grunt配置并且安装你有可能在构建中需要的相关的Grunt任务。
  • Grunt 构建工具。预览以及测试你的项目,感谢来自那些由Yeoman团队和grunt-contrib所管理的任务的帮助。
  • Bower 包管理工具。所以你不再需要手动的下载和管理你的脚本了。

安装yo以及一些生成器

需要用Npm安装

sudo npm install -g yo

如果npm版本大于1.2.10 会自动安装grunt和bower,如果没有是小于1.2.10版本的话,需要手动安装

npm install -g grunt-cli bower

如果之前全局安装过Grunt的话,需要先删除

npm uninstall -g grunt

Windows下建议使用Console或者PowerShell

基本的脚手架

安装generator-webapp

npm install -g generator-webapp

这个生成器里面包含了HTML5 Boilerplate,jQuery,Modernizr,以及Bootstrap

创建一个目录

 mkdir project 
 cd project

生成开发环境

 yo webapp

yeoman webapp分析

默认安装的JS库有jQuery 默认的CSS前端库是Bootstrap 包管理用的是bower 测试用的是Karma

Execution Time (2014-05-12 09:22:14 UTC) jshint:all 88ms ▇▇▇ 1%

concurrent:test 1.1s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 18%

autoprefixer:dist 62ms ▇▇ 1%

mocha:all 1.5s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 26%

concurrent:dist 1.3s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 21%

cssmin:generated 69ms ▇▇ 1%

uglify:generated 1.6s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 28%

Total 6s


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签