命令行界面
CLI (@pipflow/cli
) 是一个全局安装的 npm 包,提供了终端里的 pipflow
命令。你可以通过 pipflow create
快速搭建一个新项目,然后运行 pipflow dev
进行便捷开发。下面我们来深入介绍每个命令的使用。
温馨提示
你也可以在终端里使用 pw
命令。它是 pipflow
命令的缩写,由 pipflow
的首尾字母组合而成。
创建项目
pipflow create
创建一个新项目。
使用
运行以下命令来创建一个新项目:
pipflow create hello-world
pipflow create hello-world
你会被提示选取需要的特性。
pipflow CLI v0.4.0
? Check the features needed for your project: (Press <space> to select, <a> to toggle
all, <i> to invert selection, and <enter> to proceed)
❯◯ Babel
◯ HTML templater
◯ CSS Pre-processors
◯ Compress Image & SVG
◯ Linter / Formatter
pipflow CLI v0.4.0
? Check the features needed for your project: (Press <space> to select, <a> to toggle
all, <i> to invert selection, and <enter> to proceed)
❯◯ Babel
◯ HTML templater
◯ CSS Pre-processors
◯ Compress Image & SVG
◯ Linter / Formatter
选项
pipflow create
命令有一些可选项,你可以通过运行以下命令进行探索:
pipflow create --help
pipflow create --help
Usage: pipflow create [options] <app-name>
create a new project powered by @pipflow/cli
Options:
-f, --force Overwrite target directory if it exists
--merge Merge target directory if it exists
--repo <name> Git repository source name (default: "github")
-c, --clone Use git clone when fetching remote preset
-n, --no-git Skip git initialization
-h, --help display help for command
Usage: pipflow create [options] <app-name>
create a new project powered by @pipflow/cli
Options:
-f, --force Overwrite target directory if it exists
--merge Merge target directory if it exists
--repo <name> Git repository source name (default: "github")
-c, --clone Use git clone when fetching remote preset
-n, --no-git Skip git initialization
-h, --help display help for command
提醒
如果你在创建项目时,拉取模板源码一直处于 loading 状态 或者超时失败,建议从 gitee
拉取模板,但是本地一定要安装 git 环境。
运行以下命令创建新项目:
pipflow create my-project --repo=gitee --clone
吐槽:gitee 真不想评价,除去不可抗拒因素外,自身也是一塌糊涂,不求上进的xx!
项目目录结构
.
├── README.md
├── package.json
├── .browserslistrc // 浏览器支持列表
├── .env // 运行环境变量
├── .eslintignore // eslint忽略
├── .eslintrc.js // eslint配置
├── .gitignore // git忽略
├── .prettierrc // prettier配置
├── babel.config.js // babel配置
├── pipflow.config.js // pipflow配置
├── postcss.config.js // postcss配置
├── public // 公共静态资源服务文件夹
│ ├── favicon.ico
│ └── robots.txt
└── src // 源码文件夹
├── assets // 资源文件夹
│ ├── logo.png
│ └── logo.svg
├── scripts // js文件夹
│ └── index.js
├── styles // css文件夹
│ ├── index.scss
│ └── normalize.css
├── views // html文件夹
└── index.html // 默认入口页面
.
├── README.md
├── package.json
├── .browserslistrc // 浏览器支持列表
├── .env // 运行环境变量
├── .eslintignore // eslint忽略
├── .eslintrc.js // eslint配置
├── .gitignore // git忽略
├── .prettierrc // prettier配置
├── babel.config.js // babel配置
├── pipflow.config.js // pipflow配置
├── postcss.config.js // postcss配置
├── public // 公共静态资源服务文件夹
│ ├── favicon.ico
│ └── robots.txt
└── src // 源码文件夹
├── assets // 资源文件夹
│ ├── logo.png
│ └── logo.svg
├── scripts // js文件夹
│ └── index.js
├── styles // css文件夹
│ ├── index.scss
│ └── normalize.css
├── views // html文件夹
└── index.html // 默认入口页面
开发服务器
pipflow dev
在当前项目下启动一个开发服务器 (基于 BrowserSync) 并附带开箱即用的热重载功能。
使用
pipflow dev
# 或者
pw dev
pipflow dev
# 或者
pw dev
选项
➜ pipflow dev --help
Usage: pipflow dev|serve [options]
Start development server that with HMR in the current project
Options:
--mode <mode> specify env mode (default: "development")
--config <path> the configuration file path
--port <port> specify port (default: 9527)
--host specify hostname
--index specify index page
--https enable SSL for local development (default: false)
--cors enable CORS for the dev server
--open open browser on startup
--no-open not open browser on startup
--no-notify disable the notify element in browser
-h, --help display help for command
➜ pipflow dev --help
Usage: pipflow dev|serve [options]
Start development server that with HMR in the current project
Options:
--mode <mode> specify env mode (default: "development")
--config <path> the configuration file path
--port <port> specify port (default: 9527)
--host specify hostname
--index specify index page
--https enable SSL for local development (default: false)
--cors enable CORS for the dev server
--open open browser on startup
--no-open not open browser on startup
--no-notify disable the notify element in browser
-h, --help display help for command
除了通过命令行参数,你也可以使用 pipflow.config.js
里的 server 字段配置开发服务器。
构建
pipflow build
构建生产版本。(mode
默认为 production
)
使用
pipflow build
pipflow build
该命令会在 dist/
目录产生一个可用于生产环境的包,默认带有 JS/CSS/HTML 的压缩,和为更好的缓存而做的自动的 file hash。
选项
➜ pipflow build --help
Usage: pipflow build [options]
Produces a production-ready bundle in the `dist/` directory
Options:
--mode <mode> specify env mode (default: "production")
--config <path> the configuration file path
-h, --help display help for command
➜ pipflow build --help
Usage: pipflow build [options]
Produces a production-ready bundle in the `dist/` directory
Options:
--mode <mode> specify env mode (default: "production")
--config <path> the configuration file path
-h, --help display help for command
其他
pipflow task
单独执行某个任务
使用
pipflow task <task-name>
# Example: 执行 lint 任务
pipflow task lint
# 查看所有任务
pipflow task --list
pipflow task <task-name>
# Example: 执行 lint 任务
pipflow task lint
# 查看所有任务
pipflow task --list
选项
➜ pipflow task --help
Usage: pipflow task [options] [task-name]
Run a specific task
Options:
-l, --list List all tasks
-T, --tasks List all tasks
-h, --help display help for command
➜ pipflow task --help
Usage: pipflow task [options] [task-name]
Run a specific task
Options:
-l, --list List all tasks
-T, --tasks List all tasks
-h, --help display help for command
pipflow server
快速启动一个本地HTTP服务器,用于预览或演示单个 HTML 页面。它是基于 BrowserSync
实现的。
无需配置,可在任意目录启动服务器,同时也支持参数自定义,如端口、目录、是否监听文件变化、浏览器自动刷新等。
使用
pipflow server
pipflow server
选项
➜ pipflow preview --help
Usage: pw server [options]
Start a local HTTP service (base on browser-sync).
👉 See more: https://browsersync.io/docs/command-line
Options:
-s, --server <path> the web root (default: ".")
--port <port> specify a port to use (default: 3000)
--host [host] specify a hostname to use
--index <filename> specify which file should be used as the index page
-w, --watch watch files for changes
-f, --files file paths to watch
--https enable SSL for local development (default: false)
--cors add Access Control headers to every request
--open open browser on server start
--no-open not open browser on server start
--no-notify disable the notify element in browser
-h, --help display help for command
➜ pipflow preview --help
Usage: pw server [options]
Start a local HTTP service (base on browser-sync).
👉 See more: https://browsersync.io/docs/command-line
Options:
-s, --server <path> the web root (default: ".")
--port <port> specify a port to use (default: 3000)
--host [host] specify a hostname to use
--index <filename> specify which file should be used as the index page
-w, --watch watch files for changes
-f, --files file paths to watch
--https enable SSL for local development (default: false)
--cors add Access Control headers to every request
--open open browser on server start
--no-open not open browser on server start
--no-notify disable the notify element in browser
-h, --help display help for command
pipflow-info
打印当前项目的运行环境信息。
使用
pipflow info
pipflow info