概述
panda-builder是一个基于npm的前端构建工具，它使用gulp构建任务来帮助我们自动化构建和部署我们的前端项目。通过panda-builder，我们可以快速地搭建前端项目的开发环境和生产环境。
安装
需要先安装的软件
我们需要先安装node.js环境。
安装完成后，运行以下命令来检查安装是否完成：
node -v npm -v
安装panda-builder
运行以下命令来安装：
npm install panda-builder --save-dev
快速开始
初始化
在项目的根目录下，运行以下命令来初始化panda-builder:
panda-builder init
开发环境
在项目的根目录下，运行以下命令来启动自动化构建及开发环境：
panda-builder dev
生产环境
在项目的根目录下，运行以下命令来构建生产环境：
panda-builder build
这将会产生一个dist目录，里面存放了构建好的前端项目。
配置
panda.config.js
通过修改项目里的panda.config.js文件可以配置panda-builder。
panda.config.js文件默认如下：
-- -------------------- ---- -------
-------------- - -
-------- -
---- ----------------
--
------- -
----- -------
--------- ---------------------
----------- ---
--
---------- -
----- ------------
----- -----
------ --
-
-其中entries表示需要打包的入口文件，output表示构建的输出配置，devServer表示开发环境的服务器配置。
webpack
默认情况下，panda-builder使用webpack构建项目。我们可以通过修改panda.config.js文件来修改webpack的配置，比如修改loader、plugins等。
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - ------------------------------
-------------- - -
-------- -
---- ----------------
--
------- -
----- -------
--------- ---------------------
----------- ---
--
---------- -
----- ------------
----- -----
------ --
--
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
--
-------- -
--- -------------------
--------- ----------------------- -------------
--
-
-gulp
panda-builder的构建任务是基于gulp的。我们可以通过修改gulpfile.js文件来修改构建任务的执行顺序及内容。
const gulp = require('gulp')
const gulpSequence = require('gulp-sequence')
gulp.task('build', gulpSequence(['clean'], ['compile:js', 'compile:css'], ['copy:img', 'copy:font', 'copy:html'], ['rev', 'revCollector'], 'success'))
gulp.task('dev', gulpSequence(['clean'], ['compile:js', 'compile:css'], ['copy:img', 'copy:font', 'copy:html'], ['server', 'watch', 'success']))结语
panda-builder是一个非常好用的前端构建工具，可以帮助我们快速地搭建前端项目的开发环境和生产环境。适合搭建各类前端项目，包括spa、mpa等不同形态的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc344b5cbfe1ea0612116