如何使用GULP打包构建工具

前提：安装node npm

一、安装

1.安装gulp

npm install -g gulp

2.检查gulp 版本

gulp -v

二：安装插件

在项目根目录下 运行npm init 后 执行一些操作会在根目录下生存一个 package.json文件夹；

在项目下安装gulp的依赖组件，运行命令：npm install --save-dev

 gulp 进入项目的根目录后，执行命令安装如下插件：

npm install–save-dev gulp gulp-concat gulp-minify-css  gulp-rev  gulp-rev-collector 等等插件；

这样太麻烦，我已经整理好了，可以直接在项目的根目录下新建一个package.json文件；

直接把上面的package.json代码复制进行即可；最关键的是 devDependencies 依赖项，其他的可以自己根据自己的需要更改即可~ 然后进入项目的根目录下 执行命令 npm install 即可在根目录下生存 node_modules模块插件；

最后文件目录如下（以app的H5分文件夹为例）：

在项目的跟路径下新建Gulpfile.js（示例，根据实际情况修改）,如下所示：

项目完成后，运行

具体要按自己的Gulpfile.js运行 像我把压缩css代码

命名为concat  运行命令为gulp concat

比如这个项目，gulp fonts是因为需要mui字体库 所以打包进dist

成功后，把dist的文件上线就好啦。

Dist目录如下：（有压缩一行的正常文件，也有二次压缩的gz文件）