前端自动化构建工具-yoman浅谈

Posted 2020-09-04 陈立扬

如今随着前端技术的飞速发展，前端项目也变得越来越复杂。
快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求。
当然如果你要自己从0开始完全自己diy，绝对可以，只不过需要耗费一些不少的时间。
既然如此要是有自动化的项目构建工具，帮你生成各种必须的配置项，你只需愉快的写代码该多方便呀。
嗯，是的这样的工具或者说脚手架确实是有的，就是下面要提到的eoman。来吧，一起看一下如何使用这个工具让你的项目秒建吧。

初识yeoman

yeoman是什么

yeoman是Google领头开发的一个前端构建工具，它的目的是为了给新项目建立一个完整的工作流，让开发人员可以专注于解决问题而不是担心那些不必要的小事情。

yeoman的构成

首先yeoman由三部分构成:脚手架工具yo、构建工具gulp/grunt、包管理工具npm／bower。在yeoman的基础上还需要配置对应的项目生成器(generators)才能愉快的生成一个项目。
形象来说，yeoman及三部分组成是印钞机，但具体要印出来是什么样是美刀还是日元，还是要自己输入指令的吧，这些指令之类的配置信息就是生成器。下面分别来说一下工具和generator

• yo
  yo是生成项目的脚手架，做了以下工作：
  生成项目相关文件
  生成编译配置文件(例如gulpfile)
  引入相关的编译任务和包管理器等一系列build相关的东西
  一句话总结：负责根据generator的配置信息生成相关你文件，并且把相关的相关的build任务和用到的包管理器加入项目里。
• gulp
  上文提到build工具主要是gulp和grunt，这里就以gulp为例来介绍。作为构建工具，主要是用来执行一些自动化的任务，例如copy图片，编译less等。关于gulp的详细介绍请转向gulp中文网查看详细的介绍。这里简单提一下gulp的安装步骤以及如何使用。

  • 安装gulp
    这里就不得不提前面说到的npm了，直接npm全局安装即可:
    ```
    sudo npm install gulp -g

    gulp -v 

    ```

  • 使用gulp
    需要在项目根目录下创建一个名为 gulpfile.js 的文件，内容类下：

    ```
    var gulp = require(‘gulp‘);

    gulp.task(‘default‘,function(){   
    
      //默认的任务    
    
    })

    ```

    然后运行gulp即可：

    gulp
    默认的名为 default 的任务（task）将会被运行，当然这个任务并未做任何事情。

• npm 这里就不再多说了，前面提到过的，前端开发必备。

  generator

  generator可以叫构造器，简单来说就是可以使用yo的命令来生成完整项目的基础插件。yeoman官方提供了一些基础的构造器供我们选择，如果不满足需求可以自己开发构造器。
  这里介绍一下我们团队的构造器项目generator-future-static至于如何开发构造器，大家可以下来自己研究一下这里就不在详细介绍。
• 关于generator-future-static
  为了满足当前对react、react、webpack配置的需要，generator-future-static提供了四种项目模板，下面在详细介绍。无论是不是我们公司内部人员都可以借助它愉快的进行搭建项目。
  #### 安装并使用yeoman构建项目
  下面将一步步介绍一下如何使用从0开始使用yeoman搭建一个项目：

• 安装yo和generator-future-static
  还是通过我们的npm来安装，ps：generator-future-static作为一个插件当然也是要单独安装的

     sudo npm install yo -g   
  
     sudo npm install generator-future-static -g  

  这里需要加上sudo，毕竟是全局安装，避免出现权限问题。
• 新建工程目录
  新建自己的工程目录，可以在git或者自己公司内部的仓库新建一个空项目，拉到本地就行了。或者就是一个本地新建的文件夹也是可以的。这样就是给脚手架
  一个安装路径。
• 生成工程目录
  目录已经建好，下面就是让工具去忙活了，上面提到过你可以不担心它随便乱建的保证在于generator里已经配置了指令。
  在执行指令之前还是先说一句，前面也提到过，因为npm服务器是境外的，所以npm安装以来会慢的飞起，针对这种情况有两种解决方法:
  1. 更改npm的源地址，建议指向cnpm。方式如下：

  ```
  //指向cnpm

    npm config set registry="http://r.cnpmjs.org"

  ```

  1. 后面会提到，等到安装的步骤时。手动使用cnpm或者其他镜像来安装。
     然后只需执行下面的命令:

     yo future-static

• 选择对应的项目模板
  为了满足多种需求我们的构造器里面包含了四种不同的项目类型，足以满足react+redux,jquery,开发组件，typescript等需求。当然既然种类多，就需
  要你选择了，我这里就不上图了，从上到下依次对应的项目种类如下:
  1. react＋redux+es6项目适用
  2. es6+jquery项目适用
  3. 开发组件适用(jq,react均可)
  4. typescript 适用

  ps：温馨提示，如果提示自动更新失败，然后报错的话，请手动更新一下generator-future-static,这个更新失败的锅请扔给yo及npm。

     sudo npm install generator-future-static -g

  另：公司外的同学如果要使用的话，请直接把cortex相关内容忽略掉或者删除

• 选择项目信息
  当你选择某种模板之后，就是愉快的生成过程了。会进行一下npm的init，提示你输入相关信息，如果你感觉不用更改就一路enter下去吧，如果要修改直接输入即可。
  然后你会看到一系列的create和install命令，过程稍微有点慢，因为是用的npm来install，等不了的同学control+c关掉，然后用cnpm来install依赖即可如下:

     cnpm install

• 预览示例
  安装完成之后，可以看到实例的：
  1. 如果你是安安静静等它自己装完的小伙伴，什么也不用做就会看到浏览器上locahost:8081端口的demo页面

  2. 如果你自己用cnpm来instal的，还是要自己来输入一下的:
     npm run demo
     对于npm的指令，如果不对的话，请去项目根目录下查看package.json中scripts的对象，看里面都定义了什么就run什么：
     ```
     "scripts": {

       "build": "node_modules/.bin/gulp && node_modules/.bin/gulp min",    
     
       "test": "karma start",    
     
       "dev": "node_modules/.bin/gulp demo",    
     
       "doc": "smartDoc ||node_modules/.bin/smartDoc"
     }

     ```
     例如这里就应该是 npm run dev 了。具体要看配置。