gulp工作流

1.创建一个gulp文件夹。

2.在该文件夹中npm init 生成一个package.json文件。

3.在该文件夹下 npm install gulp --save-dev,安装一个gulp包.

4.新建一个gulpfile.js文件作为主文件，在该文件中编写任务。

此时的目录结构：

5.在gulpfile.js中注册我们的任务：

<1>less文件的编译，压缩：

执行后的目录结构:

styles文件夹中的app.less文件：

styles文件夹中的_demo.less文件：

压缩合并后dist/styles/app.css文件：

<2>js的合并，压缩，混淆：

src/scripts/demo1.js文件：

src/scripts/demo2.js文件：

压缩过后dist/scripts/all.js文件：

处理结束后的目录结构：

<3>.图片复制：

操作后的目录结构：

<4>html文件处理：

处理之前的src/index.html文件：

处理后的disc/index.html文件：

操作后的目录结构：

<5>监听页面变化：发生变化时同步更新。

最后显示页面：