`

yeoman

 
阅读更多

前言:
         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

 

 

 

 

 

分享到:
评论

相关推荐

    Node.js-Yeoman工程脚手架可以生成基础微服务项目CRUD代码

    Yeoman 是一个开源工具,用于帮助开发者快速搭建新的开发项目,它通过提供可复用的构建脚手架,使得创建项目结构、配置文件和基础代码变得更加便捷。 标题中的“Node.js - Yeoman 工程脚手架可以生成基础微服务...

    前端开源库-yeoman-handlebars-engine

    【前端开源库-yeoman-handlebars-engine】是一个用于前端开发的开源工具,它结合了Yeoman生成器和Handlebars模板引擎。Yeoman是构建现代Web应用程序的自动化工具,它可以帮助开发者快速搭建项目结构,自动执行常见...

    基于yeoman构建vuewebpackes6的项目

    本文将深入探讨如何基于Yeoman构建一个整合Vue.js、Webpack和ES6的项目。 Vue.js是一个轻量级的前端框架,以其易学易用、组件化开发、高性能和强大的生态系统而受到开发者喜爱。它提供了模板语法,使得HTML可以更加...

    Web前端自动化构建:Gulp、Bower和Yeoman开发指南

    资源名称:Web前端自动化构建:Gulp、Bower和Yeoman开发指南作者简介:Stefan Baumgartner是一个充满激情的网页开发者和演讲家,他在自己的家乡组织了技术会议。他的研究领域包括网络性能、自动化、体系结构和渐进...

    react-generatormaterialreact是yeoman脚手架的一个示例项目

    `React Generator Material React`是一个基于Yeoman工具的脚手架,旨在加速React应用程序的开发流程。这个项目为开发者提供了一个预配置的模板,包含了Material Design组件库,使得创建具有现代化用户界面的React...

    yeoman.github.io, Yeoman网站.zip

    yeoman.github.io, Yeoman网站 Yeoman.io Yeoman.io 电子邮件站点 !如果你对 Yeoman.io 网站有问题或者贡献,那么这里就是 ! 如果你想提交有关文书代码或者工作流的问题,请访问文书/文书库管理单元。这个站点是用...

    Yeoman生成器generator-nemo.zip

    generator-nemo 是一个增加 Nemo 自动化解决方案到浏览器测试工具 Kraken 中的 Yeoman 生成器 标签:generator 分享 window._bd_share_config = { ...

    yeoman 使用说明手册 中文

    ### Yeoman 使用说明手册知识点详解 #### 一、Yeoman 概述 - **定义**:Yeoman 是一个通用的脚手架系统,用于快速创建任何类型的应用程序。 - **功能**: - 快速启动新项目。 - 简化现有项目的维护工作。 - 支持...

    Laravel开发-yeoman

    在本文中,我们将深入探讨如何使用 Yeoman 配合 Laravel 进行开发,以及这个名为“yeoman”的项目。Yeoman 是一个现代化的开发工作流工具,它可以帮助开发者快速搭建应用的基础架构,而 Laravel 是一个广受欢迎的 ...

    yeoman generator for Angularjs 前端开发神器

    **AngularJS前端开发神器:yeoman generator for Angularjs** AngularJS,由Google维护的一个开源JavaScript框架,被广泛用于构建高效、可维护的单页应用程序(SPA)。它通过提供丰富的指令和依赖注入机制,极大地...

    项目中用Yeoman构建AngularJS

    本文将深入探讨如何利用Yeoman这一自动化工具来构建AngularJS项目,以提高开发效率。 首先,让我们了解什么是Yeoman。Yeoman是一个现代化的工作流工具,它可以帮助开发者快速搭建项目结构,自动配置各种构建工具,...

    generatorvueplugin生成vue插件的Yeoman生成器

    Yeoman则是一个用于自动化脚手架生成的工具,它可以帮助开发者快速搭建项目结构,减少重复工作。"generator-vue-plugin"是针对Vue.js生态的Yeoman生成器,专门用来创建Vue插件。下面我们将深入探讨这个生成器及其...

    工作流制作的网页程序Yeoman.zip

    Yeoman是一个强健的工具,库,及工作流程的组合,帮你网页开发者快速创建出漂亮而且引人入胜的网页程序 功能特性如下: 快速创建骨架应用程序——使用可自定义的模板(例如:HTML5、Boilerplate、Twitter ...

    基于yeoman快速搭建AngularJS框架的HTML5 app.zip

    使用Yeoman,开发者可以挑选适合的脚手架(或生成器),快速生成项目结构,例如这个例子中的AngularJS应用。 Yeoman的工作流程通常包括以下步骤: 1. 安装Yeoman和相关生成器(在这个例子中是AngularJS生成器)。 2...

    《Web前端自动化构建:Gulp、Bower和Yeoman开发指南》.pdf

    《Web前端自动化构建:Gulp、Bower和Yeoman开发指南》是一本深入探讨Web前端自动化构建流程的书籍,旨在帮助开发者提升工作效率,减少手动重复劳动。自动化构建是现代Web开发不可或缺的一部分,它通过一系列工具将...

    yeoman构建的bootstrapgulp的单页项目

    【标题】:“yeoman构建的bootstrap gulp的单页项目”是指使用Yeoman工具,结合Bootstrap框架和Gulp工作流来创建的一个单页面应用程序(SPA)项目。 Yeoman是Web开发中的一个自动化工具,旨在帮助开发者快速搭建应用...

    Node.js-generator-node-skeleton-用于node模块的yeoman发生器

    而 Yeoman 是一个现代化的工作流工具,它可以帮助开发者快速搭建项目骨架,节省时间,提高效率。在 Node.js 开发过程中,Yeoman 发生器(Generator)扮演着重要的角色。 "Node.js-generator-node-skeleton" 正是一...

    Node.js-yo-用来运行Yeoman生成器的CLI工具

    **Node.js-yo-用来运行Yeoman生成器的CLI工具** 在Node.js开发环境中,Yo(全称为yo-generator)是一个非常实用的命令行接口(CLI)工具,它用于运行Yeoman生成器。Yeoman是一个开源工作流框架,旨在简化软件开发的...

Global site tag (gtag.js) - Google Analytics