命令行界面

CLI (@pipflow/cli) 是一个全局安装的 npm 包，提供了终端里的 pipflow 命令。你可以通过 pipflow create 快速搭建一个新项目，然后运行 pipflow dev 进行便捷开发。下面我们来深入介绍每个命令的使用。

温馨提示

你也可以在终端里使用 pw 命令。它是 pipflow 命令的缩写，由 pipflow 的首尾字母组合而成。

创建项目

pipflow create

创建一个新项目。

使用

运行以下命令来创建一个新项目：

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 create 命令有一些可选项，你可以通过运行以下命令进行探索：

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

提醒

如果你在创建项目时，拉取模板源码一直处于 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          // 默认入口页面

开发服务器

pipflow dev

在当前项目下启动一个开发服务器 (基于 BrowserSync) 并附带开箱即用的热重载功能。

使用

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.config.js 里的 server 字段配置开发服务器。

构建

pipflow build

构建生产版本。(mode 默认为 production)

使用

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 task

单独执行某个任务

使用

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 server

快速启动一个本地HTTP服务器，用于预览或演示单个 HTML 页面。它是基于 BrowserSync 实现的。

无需配置，可在任意目录启动服务器，同时也支持参数自定义，如端口、目录、是否监听文件变化、浏览器自动刷新等。

使用

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-info

打印当前项目的运行环境信息。

使用

pipflow info