gulp

第三模块gulp

什么是gulp

1.Gulp是基于node的一个自动化构建工具

2.开发者可以使用它构建自动化工作流程（前端集成开发环境）。

3.例如：网页自动刷新，CSS预处理，代码检测，图片压缩等功能，只需要简单的命令行就可以全部完成。

4.使用它，可以简化工作，让你把重点放在功能的开发上，同时减少人为失误，提高开发的效率和质量

前端构建工具

将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令就完成了，提高开发效率

gulp能做什么

1.项目上线 html css js玩家压缩合并

2.语法转换（es6 less）

3.公共文件抽离

4.修改文件浏览器自动刷新

gulp使用

1.使用 npm install gulp 下载gulp库文件

2.在项目根目录下建立gulpfile.js文件

3.重构项目文件夹结构src目录放置源代码文件dist目录放置构建后文件

4.在gulpfile.js文件中编写任务

5.在命令行工具中执行gulp任务

gulp中提供的方法

gulp.src():获取任务要处理的文件
gulp.dest():输出文件
gulp.task():建立gulp任务
gulo.watch():监控文件变化

pipe：处理的意思

这里有几个问题：
1.npm安装 gulp全局环境可能不成功 需要
cnpm install -g gulp
cnpm --save-dev gulp
这样才可以，不然控制台会报错

2.gulp4.x版本更新有问题，注意代码中done的使用

gulp插件

gulp-htmlmin:html文件压缩

gulp-csso：压缩css

gulp-babel：JS语法转换

gulp-less：less语法转换

gulp-uglify：压缩混淆JS

gulp-file-include：公共文件包含

browsersync：浏览器实时同步

如何使用插件

1.npm下载
2.gulpFile引入
3.调用

代码示例：


注意问题：
还是gulp版本的问题 3.x和4.x的语法有的是不同的
（1）done问题

（2）gulp.series问题参考

（3）如果定义了default任务，直接控制台gulp 就可以执行default任务（默认）。