yeoman简介与基础使用

Posted 2023-03-26

参考技术A 一、脚手架的概念

脚手架是前端工程化的集成，是前端工程化的发起者，其本质和作用是创建项目基础结构、提供项目规范和约定。

二、通用工具

Yeoman 通用型脚手架工具，容易拓展，比较灵活，可创建属于自己的脚手架。Plop项目开发过程中，创建特定类型的文件。

三、Yeoman 的基础使用

一、脚手架的概念

脚手架是前端工程化的集成，是前端工程化的发起者，其本质和作用是创建项目基础结构、提供项目规范和约定。

二、通用工具

Yeoman 通用型脚手架工具，容易拓展，比较灵活，可创建属于自己的脚手架。Plop项目开发过程中，创建特定类型的文件。

三、Yeoman 的基础使用

四、Yeoman Sub Generator

作用：在某些某些项目配置通用的的一些文件

在当前文件输入命令：yo node:cli  // yarn  // yarn link  // chen-module  --help

五、Yeoman 基本使用步骤

六、创建自定义的generator模块

本质： 自定义的generator本质上就是一个npm 模块

方法：1、yarn init 初始化package.json 文件

    2、 yarn add yeoman-generator 引入模块

    3、创建文件目录结构 generators/app/index.js 作为入口文件

    4、文件内容

5、yarn link 全局

6、新建文件夹，运行命令yo sample

注意事项：当时eoman-generator，为5.多的版本，报错 。requires yeoman-environment at least 3.0.0,current version is 2.10.3,try reinstalling latest version of "of

最好指定yeoman-generator 的版本为 4.0.1  "yeoman-generator": "^4.0.1" 版本号最好为这个

七、利用模版也可以在指定目录创建文件

this.fs.copyTpl(tmpl,output,context) 。 接受三个参数

八、接受用户指令，生成相关模版

九、批量生成多个项目文件的方法

创建文件路径的数组，循环依次写入文件

十、发布自定义的generator模块到npm

1、创建本地仓库一系列命令：

(1) 创建gitignore文件  echo node_module > .gitigonre

（2）git init

(3)git  add .

(4)git commit -m 'fistcomit'

(5)git remote add origin 远程仓库地址

（6）git push -u origin master

2、进行打包编译

（1）yarn pubilsh  此时会出现npm用的淘宝镜像的报错，改为制定到官方npm或者yarn 的地址

    改为 yarn publish --registry=https://registry.yarnpkg.com。

（2此时可能还会报错 Couldn't publish package:  .......invalid for new packages.

    红色框为小写，发布所有的npm 包都要求小写，不能有大写，故把项目改为 generator-chen-react-com

(3)可能还会报错 r Couldn't publish package: "https://registry.yarnpkg.com/generator-chen-react-com: Forbidden"

那去你的邮箱，激活npm 发来的邮件吧，点击一下按钮即可。

四、Yeoman Sub Generator

作用：在某些某些项目配置通用的的一些文件

在当前文件输入命令：yo node:cli  // yarn  // yarn link  // chen-module  --help

五、Yeoman 基本使用步骤

六、创建自定义的generator模块

本质： 自定义的generator本质上就是一个npm 模块

方法：1、yarn init 初始化package.json 文件

    2、 yarn add yeoman-generator 引入模块

    3、创建文件目录结构 generators/app/index.js 作为入口文件

    4、文件内容

5、yarn link 全局

6、新建文件夹，运行命令yo sample

注意事项：当时eoman-generator，为5.多的版本，报错 。requires yeoman-environment at least 3.0.0,current version is 2.10.3,try reinstalling latest version of "of

最好指定yeoman-generator 的版本为 4.0.1  "yeoman-generator": "^4.0.1" 版本号最好为这个

七、利用模版也可以在指定目录创建文件

this.fs.copyTpl(tmpl,output,context) 。 接受三个参数

八、接受用户指令，生成相关模版

九、批量生成多个项目文件的方法

创建文件路径的数组，循环依次写入文件

十、发布自定义的generator模块到npm

1、创建本地仓库一系列命令：

(1) 创建gitignore文件  echo node_module > .gitigonre

（2）git init

(3)git  add .

(4)git commit -m 'fistcomit'

(5)git remote add origin 远程仓库地址

（6）git push -u origin master

2、进行打包编译

（1）yarn pubilsh  此时会出现npm用的淘宝镜像的报错，改为制定到官方npm或者yarn 的地址

    改为 yarn publish --registry=https://registry.yarnpkg.com。

（2此时可能还会报错 Couldn't publish package:  .......invalid for new packages.

    红色框为小写，发布所有的npm 包都要求小写，不能有大写，故把项目改为 generator-chen-react-com

(3)可能还会报错 r Couldn't publish package: "https://registry.yarnpkg.com/generator-chen-react-com: Forbidden"

那去你的邮箱，激活npm 发来的邮件吧，点击一下按钮即可。

将 Yeoman/Brunch 工具与混合 Django/Backbone 应用程序一起使用？

【中文标题】将 Yeoman/Brunch 工具与混合 Django/Backbone 应用程序一起使用？

【英文标题】：Using Yeoman/Brunch tools with a hybrid Django/Backbone app?

【发布时间】：2013-02-05 18:54:18

【问题描述】：

我正在构建一个混合 Web 应用程序，其中 Django 在后端，Backbone 在前端。

结构如下：我在Django模板中生成所有HTML，使用request.is_ajax决定返回哪些模板，根据需要使用Backbone拉入HTML（我这样做是因为我想支持非JavaScript用户）。

无论如何，我的问题是这个。随着我的 JavaScript 代码变得越来越复杂，我希望能够自动执行以下操作：

异步 JavaScript 加载 连接和缩小 CSS 文件 连接和缩小 JavaScript 文件 JS-linting

我不太担心图像优化或包管理。这可能与我的设置有关吗？目前它是一个标准的 Django 应用程序：

/media
  /js
    main.js <-- Backbone code is in here
    /plugins
      backbone.js
      underscore.js
  /css
    main.css 
    results.css
  /img
/myapp
  admin.py
  models.py
  views.py
/templates
  /myapp
    index.html <-- references to all JS and CSS files here

我不确定我应该使用Yeoman（或只是grunt）还是Brunch，或者是否有更简单的方法。无论我使用什么，我不确定是否可以将其放入js 目录，或者模板的位置是否会使事情复杂化。

目前我知道如何使用 require.js 来异步加载 JS，但我不知道如何连接、lint 等 - 因此寻找一个工具。也许我应该只写一个shell脚本:)

【参考方案1】：

我可以建议从简单的早午餐开始。 Brunch 比 grunt 更简单，因为它的插件开箱即用，无需编写 500 行代码 grunt 文件。它也更快，您的应用程序的重新编译将立即完成。

你的设置应该是这样的

public/         # The directory with static files which is generated by brunch.
  app.js        # Ready to be served via webserver.
  app.css       # Don’t change it directly, just run `brunch watch --server`.
  assets/       # And then all changed files in your app dir will be compiled.
    images/

frontend/       # Main brunch application directory. Configurable, of course.
  app/          # Your code will reside here.
    assets/     # Static files that shall not be compiled
      images/   # will be just copied to `public` dir.
    views/      # Create any subdirectories inside `app` dir.
      file-1.js # JS files will be automatically concatenated to one file.
    file-2.js   # They will be also usable as modules, like require('file-2').
    file-1.css  # CSS files will be automatically concatenated to one file.
    stuff.css   # JS and CSS files may be linted before concatenation.
    tpl.jade    # You may have pre-compiled to JS templates. Also with `require`.
  vendor/       # All third-party libraries should be put here. JS, CSS, anything.
    scripts/    # They will be included BEFORE your scripts automatically.
      backbone.js
      underscore.js
  package.json  # Contains all brunch plugins, like jshint-brunch, css-brunch.
  config.coffee # All params (you can concat to 2, 5, 10 files etc.)
                # are set via this config. Just simple, 15 lines-of-code config.

要创建新应用，请查看brunch skeletons，它们类似于基本样板。选择任何一个，然后使用brunch new --skeleton <url>，使用brunch watch --server 启动brunch watcher，你就准备好了。当您想要部署您的应用程序时，只需使用 brunch build --optimize 构建内容即可自动缩小文件。

【参考方案2】：

我可以建议从简单的咕噜声开始。有满足您所有需求的繁重任务：

grunt-contrib-usemin 将用优化的版本替换对原始文件的引用 grunt-contrib-uglify 会缩小你的 JavaScript grunt-contrib-mincss 会缩小你的 CSS grunt-contrib-jshint 在你的 JavaScript 文件上运行 jshint 使用 requireJs 异步加载您的文件，并在需要时使用 grunt-contrib-requirejs 将文件编译成一个文件