前言:
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
相关推荐
Yeoman 是一个开源工具,用于帮助开发者快速搭建新的开发项目,它通过提供可复用的构建脚手架,使得创建项目结构、配置文件和基础代码变得更加便捷。 标题中的“Node.js - Yeoman 工程脚手架可以生成基础微服务...
【前端开源库-yeoman-handlebars-engine】是一个用于前端开发的开源工具,它结合了Yeoman生成器和Handlebars模板引擎。Yeoman是构建现代Web应用程序的自动化工具,它可以帮助开发者快速搭建项目结构,自动执行常见...
本文将深入探讨如何基于Yeoman构建一个整合Vue.js、Webpack和ES6的项目。 Vue.js是一个轻量级的前端框架,以其易学易用、组件化开发、高性能和强大的生态系统而受到开发者喜爱。它提供了模板语法,使得HTML可以更加...
资源名称:Web前端自动化构建:Gulp、Bower和Yeoman开发指南作者简介:Stefan Baumgartner是一个充满激情的网页开发者和演讲家,他在自己的家乡组织了技术会议。他的研究领域包括网络性能、自动化、体系结构和渐进...
`React Generator Material React`是一个基于Yeoman工具的脚手架,旨在加速React应用程序的开发流程。这个项目为开发者提供了一个预配置的模板,包含了Material Design组件库,使得创建具有现代化用户界面的React...
yeoman.github.io, Yeoman网站 Yeoman.io Yeoman.io 电子邮件站点 !如果你对 Yeoman.io 网站有问题或者贡献,那么这里就是 ! 如果你想提交有关文书代码或者工作流的问题,请访问文书/文书库管理单元。这个站点是用...
generator-nemo 是一个增加 Nemo 自动化解决方案到浏览器测试工具 Kraken 中的 Yeoman 生成器 标签:generator 分享 window._bd_share_config = { ...
### Yeoman 使用说明手册知识点详解 #### 一、Yeoman 概述 - **定义**:Yeoman 是一个通用的脚手架系统,用于快速创建任何类型的应用程序。 - **功能**: - 快速启动新项目。 - 简化现有项目的维护工作。 - 支持...
在本文中,我们将深入探讨如何使用 Yeoman 配合 Laravel 进行开发,以及这个名为“yeoman”的项目。Yeoman 是一个现代化的开发工作流工具,它可以帮助开发者快速搭建应用的基础架构,而 Laravel 是一个广受欢迎的 ...
**AngularJS前端开发神器:yeoman generator for Angularjs** AngularJS,由Google维护的一个开源JavaScript框架,被广泛用于构建高效、可维护的单页应用程序(SPA)。它通过提供丰富的指令和依赖注入机制,极大地...
本文将深入探讨如何利用Yeoman这一自动化工具来构建AngularJS项目,以提高开发效率。 首先,让我们了解什么是Yeoman。Yeoman是一个现代化的工作流工具,它可以帮助开发者快速搭建项目结构,自动配置各种构建工具,...
Yeoman则是一个用于自动化脚手架生成的工具,它可以帮助开发者快速搭建项目结构,减少重复工作。"generator-vue-plugin"是针对Vue.js生态的Yeoman生成器,专门用来创建Vue插件。下面我们将深入探讨这个生成器及其...
Yeoman是一个强健的工具,库,及工作流程的组合,帮你网页开发者快速创建出漂亮而且引人入胜的网页程序 功能特性如下: 快速创建骨架应用程序——使用可自定义的模板(例如:HTML5、Boilerplate、Twitter ...
使用Yeoman,开发者可以挑选适合的脚手架(或生成器),快速生成项目结构,例如这个例子中的AngularJS应用。 Yeoman的工作流程通常包括以下步骤: 1. 安装Yeoman和相关生成器(在这个例子中是AngularJS生成器)。 2...
《Web前端自动化构建:Gulp、Bower和Yeoman开发指南》是一本深入探讨Web前端自动化构建流程的书籍,旨在帮助开发者提升工作效率,减少手动重复劳动。自动化构建是现代Web开发不可或缺的一部分,它通过一系列工具将...
【标题】:“yeoman构建的bootstrap gulp的单页项目”是指使用Yeoman工具,结合Bootstrap框架和Gulp工作流来创建的一个单页面应用程序(SPA)项目。 Yeoman是Web开发中的一个自动化工具,旨在帮助开发者快速搭建应用...
而 Yeoman 是一个现代化的工作流工具,它可以帮助开发者快速搭建项目骨架,节省时间,提高效率。在 Node.js 开发过程中,Yeoman 发生器(Generator)扮演着重要的角色。 "Node.js-generator-node-skeleton" 正是一...
**Node.js-yo-用来运行Yeoman生成器的CLI工具** 在Node.js开发环境中,Yo(全称为yo-generator)是一个非常实用的命令行接口(CLI)工具,它用于运行Yeoman生成器。Yeoman是一个开源工作流框架,旨在简化软件开发的...