Gulp的安装以及使用

1. 什么是Gulp

gulp是基于node平台开发的前端构建工具。

gulp是一个JavaScript程序，并且它的指令使用的也是JavaScript语言，所以gulp通常是前端开发人员自动化处理日常任务的首选工具。

gulp可以处理日常工作流产生的任务（作用）：

项目上线时对HTML、CSS、JavaScript文件合并、压缩。

将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行。

gulp允许开发者将机械化的操作编写成任务，在命令行输入相关的任务名称就能执行机械化操作，从而提高开发效率。(用机器代替手工，提高开发效率)

2. Gulp提供的方法

gulp.src()：获取任务要处理的文件

gulp.dest()：输出文件

gulp.task()：建立gulp任务

gulp.watch()：监控文件的变化

3. 安装第三方模块Gulp

3.1全局安装gulp-cli

• gulp-cli是gulp的命令行工具，它需要全局安装，以便gulp能够在命令提示符中直接运行。gulp-cli是本地gulp的全局的入口，负责把所有参数转发到本地gulp，还有显示项目里安装的本地gulp的版本。

• 全局gulp用于启动各个项目中的本地gulp，换句话说，如果在全局安装了gulp-cli，那么就可以在不同的项目中使用不同的gulp版本。

3.2 在项目中安装gulp

• 本地gulp位于本地项目的node_modules目录下，包含了gulpfile所需的所有函数和API

• 本地gulp作用：

• 加载和运行gulpfile（gulpfile.js）中的构建指令。

• 另一个是暴露API供gulpfile使用。

3.3 构建项目

• 在项目根目录下建立gulpfile.js（不可更改）文件

• 重构项目的文件夹结构src目录放置源代码文件，dist目录放置构建后文件

• 在gulpfile.js文件中编写任务.（gulp.task()建立任务…）

• 在命令行工具中执行gulp任务

3.4构建项目——在gulpfile.js文件中编写构建项目的任务

3.4.1在命令行中执行任务

gulp + 任务名

4. Gulp 常用插件

• gulp-htmlmin：html文件压缩

• gulp-csso：压缩css

• gulp-babel：JavaScript语法转化

• gulp-less：less语法转化

• gulp-uglify：压缩混淆JavaScript

插件的使用通常分为三步：下载，引用和调用插件，需要注意的是在引用插件之前，一定要要先引用gulp模块

4.1 压缩并抽取HTML中的公共代码

• 安装压缩HTML文件插件gulp-htmlmin

npm install gulp-htmlmin

• 在gulpfile.js文件中引用gulp-htmlmin插件

• 在gulpfile.js文件中引用gulp-file-include插件

• 在gulpfile.js文件中调用gulp-htmlmin和gulp-file-include插件，实现压缩HTML文件以及HTML文件公共代码抽取

4.2转换less语法，压缩css文件

• 安装压缩CSS文件插件gulp-csso

npm install gulp-csso

• 下载安装Less语法转换插件gulp-less

npm install gulp-less

• 在文件中引用gulp-csso插件和gulp-less插件

• 在文件中引用gulp-csso插件和gulp-less插件实现less语法转化成css语法并压缩

4.3转化ES6语法，压缩JS文件

• 下载安装gulp-babel 创建及它的依赖包，实现ES6语法转换

npm install gulp-babel @babel/core @babel/preset-env

• 下载安装gulp-uglify插件

npm install gulp-uglify

• 在文件中引用gulp-babel和gulp-uglify插件并调用

4.4 复制目录

• 在gulpfile.js文件中创建copy任务并执行

• 使用gulp.series()方法