gulp-cli-demo v1.0.1

1. 脚手架工具
2. 自动化构建系统
3. 模块化打包
4. 项目代码规范化
5. 自动化部署

yo 可以 yo 出 全局根目录 node_modules(需要 npm link) 下的叫 generator-的项目

yo node

利用 yeoman-generator 创建 generator: 基本结构

名称必须是 generator-

mkdir generator-cmnx yarn init -y yarn add yeoman-generator 书写结构和 index.js 文件 yarn link 到全局 yo

yo 中提供了任务执行事务优先级。

initializing - 您的初始化方法（检查当前项目状态，问候语，读取配置等） prompting- 你提示用户选择的地方（输入，单选，多选等） configuring- 保存配置并配置项目（创建.editorconfig 文件和其他元数据文件，创建.yo-rc.json 文件保存配置参数） default - 如果方法名称与优先级不匹配，它将被推送到该组。 writing - 您在哪里编写生成器特定文件（路由，控制器等） conflicts - 处理冲突（内部使用） install - 安装（npm，bower） end- 结束语

模板

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  writing() {
    // join了templates目录
    const template = this.templatePath('foo.html')
    const output = this.destinationPath('foo.txt')
    const context = { title: 'Hello zce~', success: false }
    this.fs.copyTpl(template, output, context)
  }
}

发布 generator 先提交到 github keywords 里需要添加 yeoman-generator 才会出现在 yeoman 官方

plop:相当于 vscode 模板生成插件

原理: 添加 package.json 的 bin 字段 cli.js 写 npm link

自动化构建 Grunt(磁盘读写多)/Gulp(内存)/FIS(百度，国内)

npm scripts npm-run-all 同时执行多个命令 "start": "run-p build serve"

复用 gulpfile gulpcli + gulpfile封装工作流

将 gulp-cli-demo 作为库，gulp-master 作为项目 package.json 的 main 字段表示模块入口文件 yarn link 创建链接 会加入C:\Users\你的用户名\AppData\Local\Yarn\Data\link npm link 创建链接会加入{prefix​}/lib/node_modules/<package> 在另一个项目 yarn link <名字>可以直接将库链接进 node_modules 在另一个项目 npm link <名字>可以直接将库链接进 node_modules

使用 yarn unlink 解除链接

解决模块路径问题 使用 pages.config.js 作为配置(例如 vue.config.js) 库里 process.cwd()获取位置

// 默认配置
let config = {}

try {
  const userConfig = require(path.join(cwd, 'pages.config.js'))
  config = Object.assign({}, config, userConfig)
} catch (error) {}

默认抽象路径配置

// 默认配置
let config = {
  build: {
    src: 'src',
    dist: 'dist',
    temp: 'temp',
    public: 'public',
    paths: {
      styles: 'assets/styles/*.scss',
      scripts: 'assets/scripts/*.js',
      pages: '*.html',
      images: 'assets/images/**',
      fonts: 'assets/fonts/**',
    },
  },
}

gulp 可以指定 gulpfile 的路径 yarn gulp build --gulpfile ./node_modules/gulp-cli-demo/lib/index.js --cwd .

这样太麻烦 在 gulp-cli-demo 里添加 bin 目录 在 package.json 里添加 bin 字段作为 cli 入口 在此文件下写命令

#!/usr/bin/env node

console.log('asasas')

重新 yarn unlink 库 link 库(将库添加到了全局，执行文件名时会执行 package.json 指定的 bin 目录里的内容) 解决 yarn link 将 cli 模块链接全局后无法使用的问题 大概率时环境变量中没有配置 yarn 的全局变量文件(因为 npm link 是有效的) https://blog.csdn.net/weixin_45047039/article/details/109851573 yarn global bin 查看 yarn 的全局变量文件

此时 gulp-cli-demo 即可运行 bin 里的文件 在此文件里引入 gulp-cli 的 bin 文件即可 gulp-cli 怎么工作的 查看 node_modules 里的.bin 目录(即 npx 可执行目录)

@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0

IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe"
) ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%
)

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\gulp\bin\gulp.js" %*

```js

require('gulp/bin/gulp')即可载入 gulp 的命令
让 gulp-cli 工作
只需传递命令行参数


#!/usr/bin/env node

process.argv.push('--cwd')
process.argv.push(process.cwd())
process.argv.push('--gulpfile')
process.argv.push(require.resolve('..'))

require('gulp/bin/gulp')

```

process.argv.push(require.resolve('..')) node 解析文件会找 package.json 中的 main 字段对应文件 相对路径按照.js=>package.json 中的 main 字段=>index.js 寻找

此时 gulp-cli-demo build 即可工作

发布模块到 npm

"files": [
"bin",
"lib"
],

files 字段用于描述我们使用 npm publish 命令后推送到 npm 服务器的文件列表，如果指定文件夹，则文件夹内的所有内容都会包含进来。 一般公司的非开源项目，都会设置 private 属性的值为 true，这是因为 npm 拒绝发布私有模块，通过设置该字段可以防止私有模块被无意间发布出去。

最后运行 yarn gulp-cli-demo build 即可

注意库的依赖需要时 dependencies 而不是 devDependencies 因为 bin 要用到