前言
在现在互联网技术发展的浪潮中，前端技术越来越成熟，各种前端框架、库、工具层出不穷，除了知识面宽广，还需要好的工具来提升我们的开发效率。而 npm 包管理器则是我们日常使用最为频繁的工具之一。npm 包 bgx-cli，是如此的实用，帮助我们快速搭建前端项目和自动化构建。
什么是 bgx-cli
bgx-cli 是一个基于 gulp 的自动化构建工具，提供了丰富的构建任务，例如 Sass 编译、压缩、合并、图片压缩、自动刷新等等。通过简单的配置，即可完成一个属于自己的项目构建。适用于任何需要自动化构建的前端项目。
如何安装
使用 npm 安装 bgx-cli：
npm install -g bgx-cli
- -g 表示全局安装
如何使用
- 初始化项目
在一个空的目录下，输入以下命令，初始项目：
bgx init
接着按照提示依次填写项目名称、作者、版本等信息即可，同时点击下方 license，选择使用相应的协议。
-- -------------------- ---- ------- - -------- - -------- - ---------- ---- ----- ----- -- ----- -- ----- -- ----- -- ------ ------- - ----------- ---- ----- ----- -- --- -- ------ --- -- --- --- -- --- -------- -------
初始化完成后，会在当前目录下生成一个新的项目，目录结构如下：
my-project
|-- src
|-- index.html
|-- css
|-- js
|-- gulpfile.js
|-- package.json
|-- .gitignore- 启动本地服务
进入刚刚创建的项目目录，运行以下命令，启动本地服务：
cd my-project gulp serve
运行命令后，会自动打开默认浏览器，并在浏览器上打开 URL：http://localhost:3000。此时你会看到我的项目的页面。
- 打包构建项目
完成开发后，通过以下命令将项目构建为一个可用于生产的文件夹：
gulp build
构建完毕后，会在项目根目录下生成 dist 文件夹，并将项目 HTML、JS、CSS 等文件压缩合并在一起。
gulpfile.js
gulpfile.js 文件就是 bgx-cli 的主要配置文件，用来定义需要执行哪些具体的任务。以下是一些 bgx-cli 默认支持的任务：
serve: 开启一个本地服务器，自动刷新浏览器，并且自动编译 SASS；html: 将 HTML 文件打包到指定目录，并压缩代码；sass: 将 SASS 文件编译成 CSS 并压缩；js: 将 JS 文件通过 Babel 进行转义，并打包到指定目录，还可以进行代码压缩；images: 压缩图片到指定目录；clean: 删除指定目录下文件；
除了默认的任务，你还可以定义自己需要的任务，例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------
-- -- -------
------------------------ ---------- -
------ -----------------------
---------------
----------------------------
---总结
通过本篇文章，我们了解了 npm 包管理器 bgx-cli 的基本使用方法，以及它的一些配置和具体任务。在实际的开发中，好的工具可以为我们提高工程效率，让我们专注于业务逻辑的实现。如果你想要构建一个更高效的前端项目，bgx-cli 绝对会是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583bd5