前端gulp工具的使用方法及常用插件

gulp介绍

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

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

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

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

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

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

下面将对gulp的安装和gulp的项目构建进行详细介绍：

1.全局安装 gulp-cli

gulp-cli是gulp的命令行工具，它需要全局安装，以便gulp能够在命令提示符中直接运行。gulp-cli是本地gulp的全局的入口，负责把所有参数转发到本地gulp，还有显示项目里安装的本地gulp的版本。全局gulp用于启动各个项目中的本地gulp，换句话说，如果在全局安装了gulp-cli，那么就可以在不同的项目中使用不同的gulp版本。

首先在终端通过npm工具下载gulp-cli

//  -g全称为global表示全局安装 @2.3.0表示全局gulp-cli的版本
npm install [email protected] -g
// 查看gulp版本，查看是否安装成功
gulp -v

运行结果为：

CLI version: 2.3.0//表明安装成功
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated

changed 267 packages in 5s

2.在项目中安装gulp

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

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

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

在终端进行局部安装gulp

// 初始化项目
npm init
// 局部安装gulp—--save-dev表示将gulp作为devDependencice（开发依赖）保存到package.json文件中
npm install [email protected] --save-dev
// 查看gulp版本，查看是否安装成功
gulp -v

运行结果为：

Local version: 4.0.2//结果为下载的版本号，表明下载成功 

3.构建项目

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

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

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

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

如下图：