zoukankan      html  css  js  c++  java
  • Grunt一辈子的好基友:yeoman

    yeoman是什么

    image

    yeoman主要包含了三个工具:yo、grunt、bower。我们先看下这三个工具分别是做什么的:

    • yo:脚手架工具,主要作用是创建项目骨架(跟grunt-init有点像)。
    • grunt:构建工具,主要用来运行各种任务,比如文件压缩、合并、打包等。
    • bower:主要用来做前端资源依赖管理,跟npm很像,区别在于:npm管理的是node模块的依赖,bower管理的是前端资源的依赖,如css、javascript文件等。

    yeoman是做什么的

    现在我们已经知道yeoman里面又什么东西了,那么它在我们的项目开发中扮演了一个什么样的角色呢?首先我们来看看官方对yeoman的定义:

    MODERN WORKFLOWS FOR MODERN WEBAPPS

    这句话其实比较抽象,很难一眼知道yeoman是做什么的。 我们注意里面的关键词 workflow ,也就是说yeoman贯穿了前端项目开发的始终。

    image

    在用到yeoman的项目中,我们的工作流程一般是:

    1. 创建项目骨架:运行yo工具,通过各种yeoman-generator(模板)创建项目骨架。
    2. 下载前端资源:运行bower install,下载项目中依赖的前端资源,比如jQuery、bootstrap、angularjs等(非必要)
    3. 运行构建任务:运行grunt跑自动化构建任务(非必要)

    入门例子:webapp

    首先安装yo、bower、grunt-cli工具

    npm install -g yo bower grunt-cli
    

    然后,现在yeoman模板,比如generator-webapp(yeoman的模板前端都是generator-

    npm install -g generator-webapp
    

    初始化webapp项目,在任意空目录下运行下面命令,然后回答几个简单的问题

    yo webapp 
    

    现在,项目骨架已经创建好了,运行下面命令安装依赖的前端资源

    bower install underscore 
    

    最后,安装grunt依赖的包,运行构建任务,搞定!

    npm install
    grunt
    

    为什么是yeoman,而不是grunt-init

    grunt-init的定位同样是前端脚手架。那 grunt + grunt-init 已经满足了我们从 项目创建 到 项目构建的需求,为什么又冒出个yeoman出来? 从yeoman的受欢迎程度来看,可能有以下两方面原因:

    1. 解决了一些grunt + grunt-init 没有帮我们解决的问题
    2. 具有一些grunt + grunt-init 所没有的有用特性

    答案是:两方面都有。

    1. 基于bower的前端资源依赖管理:这个的重要性无需强调,请回忆一下我们满头大汗就为了找到某个js文件,或因缺少某个依赖的js文件导致脚本出错的经历。具体可参考knight上周及本周分享 :)
    2. 子模板:相当有用的特性。你可以用它完成子项目创建、子模块创建、资源更新等工作,给项目提供了更多的灵活性。
    3. 基于问题的项目骨架构建:这点其实grunt-init也有,但yeoman明显做得更好,如二选一、单选列表、多选列表等。grunt-init 的问答流程内部实现则相对费解。。。

    yeoman项目下几个重要的文件

    主要就是下面几个文件,不赘述

    • Gruntfile.js:grunt任务声明的地方
    • package.json:项目依赖的插件,比如grunt任务依赖的插件等
    • bower.json:前端资源依赖声明

    创建自己的Generator(模板)

    什么是generator就略过了,模板。。。直接进入实操步骤

    首先安装generator-generator,名字比较诡异,意思是“模板的模板”

    npm install -g yo generator-generator
    

    创建一个叫做generator-blog的目录,命令行下进入这个目录,然后运行

    yo generator
    

    然后你会看到下面这坨东东

     _-----_
    | |
    |--(o)--| .--------------------------.
    `---------´ | Welcome to Yeoman, |
    ( _´U`_ ) | ladies and gentlemen! |
    /___A___ '__________________________'
    | ~ |
    __'.___.'__
    ´ ` |° ´ Y `
    

    回答下面两个简单问题,搞定

    [?] Would you mind telling me your username on Github? chyingp@gmail.com
    [?] What's the base name of your generator? blog
    

    在目录下运行如下命令,让当前创建的模板成为全局的模块

    npm link
    

    在其他任意目录运行如下命令,创建项目

    yo blog
    

    稍微看下generator-blog的细节

    进入generator-blog目录,看看里面都有什么,bower.json、package.json不赘述,我们需要关注的点:app目录是模板的核心目录

    其中,index.js 是项目骨架创建的主要逻辑,里面包含了问答设置以及处理、各种目录、文件操作等(从模板目录到目标目录)。根目录下的package.json主要声明了模板的名字、版本、git地址等。。。

    ├── app
    │ ├── index.js
    │ └── templates
    │ ├── _bower.json
    │ ├── _package.json
    │ ├── editorconfig
    │ ├── jshintrc
    │ └── travis.yml
    ├── test
    │ ├── test-creation.js
    │ └── test-load.js
    ├── .editorconfig
    ├── .gitattributes
    ├── .gitignore
    ├── .jshintrc
    ├── .travis.yml
    ├── LICENSE
    ├── package.json
    └── README.md
    

    generator细节深入

    @todo

    generator子模板创建

    @todo

  • 相关阅读:
    使用 kubeadm 部署 v1.18.5 版本 Kubernetes 集群
    MHA高可用主从复制实现
    基于Keepalived高可用集群的MariaDB读写分离机制实现
    MariaDB主从半同步复制详解
    postman学习网址
    程序员的脑子是更新换代最快的
    带组装3ROS_1节点_192通道
    带组装4ROS_1节点_256通道
    带组装5ROS_1node_320Chan
    带组装7ROS_1节点_448通道
  • 原文地址:https://www.cnblogs.com/chyingp/p/what-is-yeoman.html
Copyright © 2011-2022 走看看