使用Yeoman你必须要知道的

最新推荐文章于 2024-08-31 10:09:44 发布
最新推荐文章于 2024-08-31 10:09:44 发布
阅读量2.6k 收藏
点赞数
分类专栏： 学习笔记 文章标签： angularJs Grunt.js 框架 前端 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jennieji/article/details/39435947
版权

不得不说，这年头写JS程序变得越来越复杂了。虽然大家都为了让写JS变得更简单而创建框架、创建工具，但是感觉已经开始偏离了最初的目的。

今天来说说Yeoman，一帮人为了让写AngularJS程序更高端智能而创建的一个工具。可以利用简单的命令行操作帮你初始化一个Angular App，CSS、图片、View和JS应该放哪都帮你决定好了，连复杂的Grunt都帮你配好了。前端同志只要用”grunt serve“就可以预览你的Web App而不用配置Web服务器，用"grunt build"就可以导出经过压缩的CSS/HTML/JS甚至是图片，连路径都帮你改好了，岂不是很酷！

但是！决定用它就需要知道以下几点：

  1. 配置麻烦。新机需要装：
    • Node.js & NPM
    • Grunt Cli
    • Bower
    • Git Bash
    • 部分Mac需要全局装某个Karma的NPM包
      关于这个问题我已经忘了包的名字，但当时运行grunt test做单元测试的时候总是给我报找不到karma任务的错误，头疼的很，最终是在stackoverflow上找到一个老兄的建议而解决的。
    • Yeoman
    • 对应的generator包，如Angular用generator-angular包
    以上除了Node和Git之外其余都可用npm命令完成。很多npm包的源都在github上，所以碰到网不好的很容易杯具。
    装完之后用yo命令初始化项目，根据你的选项最后会运行bower install和npm intall命令来自动获取项目所以依赖的包。但根据我几次使用的经验，通常都会碰到奇怪的问题而导致失败，然后自己还得手动运行bower install和npm install命令……这配置过程真漫长

  2. 想要不根据Yeoman初始化给你的路径来，你就得好好改GruntFile了。根据GruntFile的内容，可以知道在grunt build压缩和导出文件时：
    • /app/styles/font里的文件会被拷到/dist/fonts，svg文件会被压缩，但是不认子目录下文件
    • /app/images里的图片文件会被压缩拷贝到/dist/images，但是对格式有所筛选
    • HTML是只压缩拷贝读取/app根目录和/app/views目录及其子目录下文件
    • CSS和JS则是根据你在index.html引用文件的代码和用注释配置的目标文件来压缩合并
    • 其中bower获取的包会由Grunt的一个任务根据你的bower.js来将对JS和css的引用写入index.html里
    改GruntFile的时候，再次对谷歌的同志五体投地，这思路……我之前还没写过这么长的Grunt配置文件

  3. 用复制黏贴的方式拷贝转移项目需要注意。
    拷贝项目文件夹到另一台机器内最好不要包括node_components文件夹，拷过去后再运行一遍npm install命令确保程序能运行。
    在windows机器中拷贝和删除node_components文件夹很有可能遇到因为路径过长或者文件名过长这种很微妙的问题。
    另外因为node_components文件夹真的比较大。本来要用十分钟去压缩的文件夹，删掉压缩瞬间就好了……

  4. 文件路径的问题：
    • 前面说到/app/styles/font里的文件会被拷到/dist/fonts，那就造成了字体文件路径的更改。
      Yeoman是用grunt-usemin来扫描更改文件里的路径，但默认的配置是将用<!--build:...--><!--endbuild-->标记包起来的文件们拷到指定路径后进行处理的。
      也就是说你把css和js的引用不放在该标记内，build时这文件既不会被导出到dist文件夹内，也不会被压缩进某个文件内，更不会自动更改文件内字体文件引用的路径。
    • 观察一下index.html就可以发现通过bower引用的文件，路径是以"bower_compoenents/"开头，而在/app/styles里的CSS文件路径是以"styles"开头，/app/scripts里的JS文件的路径是以"scripts"开头的。
      问题就来了。你在用grunt运行你的app是没有问题的，因为人家配置了很多grunt任务来对路径进行处理。那么如果说在前后端开发人员合作时，后端人员有必要在他的机器上添加修改你的代码源文件，那就麻烦了……

  5. 运行yo angular来初始化angular项目时会先问要不要用SASS，然后在问要不要用bootstrap。
    • 槽点一：好吧，虽然个人比较喜欢SASS，但是bootstrap对less的支持更好，SASS版本貌似没文档？
    • 槽点二：结果用bower智能下下来bootstrap的CSS版本，既不没有SASS也么有Less。
    • 槽点三：bootstrap的JS对angular支持性不好，真要用还得搞个angular-ui出的angular-bootstrap。
总结：有利有弊，关键还是看你自己的需求，如果只是简单的项目没有必要，大可不去使用。若有说错之处，欢迎指正！

杰尼js
关注
专栏目录
yeoman-app：一个使用Yeoman支撑项目的桌面应用程序
02-25
Yeoman App 一个使用项目的桌面应用程序。 哟，我的朋友。 这是自2015年以来第一款具有全新用户界面的Yeoman正式应用程序。很遗憾，该应用程序仍在大量开发中，我们正在寻求帮助！ 通过提出问题或立即通过PR来解决...
Yeoman自定义脚手架工具的介绍以及基本使用
qq_42531108的博客
05-31 408
Yeoman（官网：https://yeoman.io/）作为最老牌，最强大，最通用的脚手架工具，它有很多值得我们借鉴和学习的地方。Yeoman 官方的定义是它是一款用于创造现代化 web 应用的脚手架工具。不同于 vue-cli 这样的工具，Yeoman 更像是一个脚手架的运行平台，我们可以通过 yeoman 搭配不同的 Generator 去创建任何类型的项目。##使用步骤：1.明确你的需求2.找到合适的Generator3.全局范围安装找到的Generator。
Yeoman学习01-安装与基础使用
weixin_45855469的博客
03-29 564
在前端工程化的实践中，我们需要创建很多重复结构的文件，有很多页面拥有同一个格式，使用Yeoman提供的生成器，我们可以构建一个自己的脚手架，通过运行一条命令在项目中创建一个固定格式的文件或者文件夹。
Yeoman Maven 插件使用教程
最新发布
gitblog_00968的博客
08-31 650
Yeoman Maven 插件使用教程 yeoman-maven-pluginMaven plugin for npm / bower / grunt-gulp build项目地址:https://gitcode.com/gh_mirrors/ye/yeoman-maven-plugin 1、项目介绍 Yeoman Maven 插件是一个用于将 Yeoman 构建集成到 Maven 构建过程中的...
【前端工程化】一：脚手架工具yeoman以及plop的使用
Whoopsina的博客
01-05 911
脚手架的作用是创建项目基础结构，提供项目规范和约定，我们常用的三大框架也是有各自的脚手架生态
9、Yeoman 单元测试
Darion的博客
11-21 249
继续阅读以了解有关Yeoman添加的测试助手的更多信息，以减轻对Generator进行单元测试的痛苦。 以下示例假定您在BDD模式下使用Mocha。 全局概念应轻松应用于您选择的单元测试框架。 9.1 组织测试 很重要的一点是，要保持测试简单且易于编辑。 通常，组织测试的最佳方法是： 将每个Generator和子Generator分离到其自己的describe块中。 为Generator接受的每个选项添加一个describe块。 对每个声明（或相关声明）使用it块。 在代码中，您应该以类似于以
generator-exist：用于现有应用样板的yeoman生成器
02-11
安装首先，使用安装和generator-exist（我们假设您已经预安装了 ）。来自GitHub 要安装预发行版本： npm i -g yonpm i -g git://github.com/eXist-db/generator-exist.git正式发布要安装发布到npm的版本： npm i -g ...
generator-an2:只是一个简单的AngularJS 2 Yeoman Generator
04-28
或按照以下步骤操作： 1-安装Yo ， Bower ， Grunt-Cli ，对于我们的案例，我们将使用Gulp您将找到与最终结果捆绑在一起的开发版本，但必须在您的开发机器中安装它： $ npm install -g bower grunt-cli gulp yo2-将...
generator-dnn-spa-gulp-react:使用Gulp和React的DNN SPA模块的Yeoman生成器
04-29
（如果您知道Yeoman并已安装，请跳过） 请访问以获取详细信息。 基本上，它是基于称为“生成器”的模板的代码生成器。 您可以使用npm安装Yeoman（即，您还需要先安装Node js！），如下所示： npm install -g yo安装...
generator-costjabrify:Yeoman CoStJaBrIfy 生成器。 CoStJaBrIfy 代表
07-10
如果你不知道 Yeoman 是什么，你可能想先看看：快速开始如果你还没有见过 Yeoman，你可能想邀请他加入你的开发环境： npm install -g yo 之后，邀请 CoStJaBrIfy 参加派对： npm install -g generator-costjabrify ...
generator-jade-preview:一个 Yeoman 生成器，用于为显示源和优化的 dist 的静态创建预览环境
07-13
发电机-玉-预览 生成器 入门 什么是约曼？ 套路问题。 这不是一回事。 是这个人： 基本上，他戴着大礼帽，住在你的电脑里，等着你告诉他你想创建什么样的应用程序。 并非每台新计算机都预装了 Yeoman。 他住在包存储库中。 你只需要问他一次，然后他就收拾东西搬进你的硬盘。 确保你清理干净，他喜欢新的和闪亮的东西。 npm install -g yo 自耕农发电机 约曼轻装上阵。 他搬进来的时候没有打包任何发电机。你可以把发电机想象成一个插件。 您可以选择要创建的应用程序类型，例如 Backbone 应用程序甚至 Chrome 扩展程序。 要从 npm 安装 generator-jade-preview，请运行： npm install -g generator-jade-preview 最后，启动生成器： yo jade-preview 认识约曼 约曼有一颗金子般的心。
Yeoman 使用教程
gitblog_01059的博客
08-25 290
Yeoman 使用教程 yoCLI tool for running Yeoman generators项目地址:https://gitcode.com/gh_mirrors/yo/yo 项目介绍 Yeoman（简称 Yo）是一个用于快速构建现代化 Web 应用的脚手架工具。它结合了 Grunt（任务运行器）和 Bower（包管理器），帮助开发者快速搭建项目结构、安装必要的依赖，并提供一系列的生...
从Yeoman开始学习前端工程化工具
CS_DGD的博客
01-10 184
脚手架工具 前端工程化的发起者 脚手架的作用 创建项目基础结构、提供项目规范和约定 脚手架的分类 通用脚手架 yeoman 专用脚手架 create-react-app vue-cli angular-cli Yeoman The web’s scaffolding tool for modern webapps Yeoman 的基本概念 Yeoman 是一款脚手架工具 可以帮助开发人员创建项目的基础结构代码 yo 是 Yeoman 的命令行管理工具 可以再命令行运行 ye
Yeoman的使用
qq_45487080的博客
08-01 652
Yeoman是什么 Yeoman是创建现代化web应用的脚手架工具（最老牌、最通用、最强大） 对比vue-cli他更像是一个脚手架的运行平台，我们可以通过Yeoman搭配不同的Generator去创建任何类型的项目 我们也可以通过创建自己的Generator，从而来定制属于我们自己的前端脚手架 缺点：在很多专注于框架开发人的眼中Yeoman过于通用，而不够专注 安装Yeoman npm安装: npm i -g yo yarn安装: yarn global add yo 安装对应的generator（根
一、yeoman 的基本使用
震撼着
04-01 533
工具链 为 JS 生产环境制作工具链，覆盖前端开发各个环节； 1、脚手架 所有工具的开端都是脚手架（generator）； yeoman 是社区较流行的脚手架生成器； 2、yeoman 的基本使用 2.1、创建脚手架（generator） 创建一个文件夹 toolchain ，在其中编写生成器； 该文件夹下通过命令行运行 npm init ，生成 packge.json 如下： Name 属性必须以 generator- 为前缀； 运行：npm install -- save yeoman
推荐开源项目：Yeoman - Node.js 应用生成器
gitblog_00052的博客
04-15 524
推荐开源项目：Yeoman - Node.js 应用生成器 generator-node Create a Node.js module 项目地址: https://gitcode.com/gh_mirrors/ge/generator-node ...
YEOMAN官方文档非官方翻译～创造自己的Generator(一)
kobetmacone的专栏
01-08 500
Generators 是Yeoman 生态系统构建模块。它们是通过yo 命令运行的插件，用来为最终用户产生项目文件。通过阅读这个章节，您将学到如何 创建 和 发布 您自己的generator。 注：我们创建了一个 generator-generator工程来帮助用户创建他们自己的 generator。一旦您理解了下面的这些概念，您将可以快速用它来构建您自己的 generator 了 组建您自己的
Yeoman
m0_51281306的博客
04-09 267
Yeoman 的基本概念 • Yeoman 是一款脚手架工具 • 可以帮助开发人员创建项目的基础结构代码 • yo 是 Yeoman 的命令行管理工具 • 可以在命令行运行 yeoman 的命令 • 生成器：Yeoman 中具体的脚手架 • 针对不同项目有不同的脚手架（例如：网站，APP，小程序等） Yeoman 使用说明 • 全局安装 yo • 安装 generator • 通过 yo...
使用Yeoman-flask生成器创建Flask应用
3. Yeoman-Flask生成器安装：要开始使用Yeoman-Flask，首先需要安装Node.js环境，然后通过npm（Node.js包管理器）全局安装generator-flask包。命令为“npm install -g generator-flask”。这样，开发者就可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值