前端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 gulp-cli@2.3.0 -g
// 查看gulp版本，查看是否安装成功
gulp -v

运行结果为：

CLI version: 2.3.0//表明安装成功
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatedchanged 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 gulp@4.0.2 --save-dev
// 查看gulp版本，查看是否安装成功
gulp -v

运行结果为：

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

3.构建项目

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

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

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

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

如下图：

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

const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', (callback) => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css’));
callback（）
});

打开终端命令行工具，输入以下命令

gulp first

运行结果如图：

gulp中的常用插件使用方法

gulp常用插件

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

下面将用gulp-htmlmin 插件和 gulp-file-include插件演示对HTML文件进行压缩，压缩html文件以及抽取公共部分代码

（1）下载插件，打开终端使用npm将安装上插件

npm install gulp-htmlmin
npm install gulp-file-include

（2）在gulpfile.js文件内，引入插件

// 引入htmlmin插件
const htmlmin = require('gulp-htmlmin')
// 引入gulp-file-include
const fileInclude = require('gulp-file-include')

（3）建立任务

gulp.task('htmlmin', callback => {// 获取文件：html文件gulp.src('./src/*.html')// 抽取公共部分的代码.pipe(fileInclude())// 压缩html代码// .pipe()只是对文件处理的结果进行包装，并不会直接操作文件.pipe(htmlmin({collapseWhitespace: true}))// 抽取并压缩后的html文件输出dist目录下.pipe(gulp.dest('./dist'))callback();
})

代码入下：

（4）抽取公共部分代码

1. 先把头部公共部分的代码剪切放在common文件夹下面的header.html文件中

@@include()语法是由gulp-file-include插件提供的，小括号中是代码片段的路径以及文件的名字。

2. 在原文件中（article.html）使用@@include('./common/header.html')（）里面存放路径

（5）执行任务 gulp htmlmin

压缩并转换Less语法

(与上方压缩并抽取HTML中的公共代码代码大同小异)

1.下载插件

//（1）less转换
npm install gulp-less
//(2)css压缩
npm install gulp-csso

2.引入插件

// 引入gulp-less插件
const less = require('gulp-less')
// 引入gulp-csso插件
const cssmin = require('gulp-csso')

3.在css文件夹下面建.less后缀的文件

.father {background-color: #fff;font-size: 16px;.son {font-weight: bold;}
}

4.建立任务

// 建立任务：转换less语法，压缩css文件
gulp.task('cssmin', callback => {// 获取文件.css .less两种类型的文件gulp.src(['./src/*.css', './src/css/*.less'])// 转换less语法.pipe(less())// 压缩css文件.pipe(cssmin())// 输出处理之后的文件.pipe(gulp.dest('./dist/css'))callback();
})

5.执行任务 gulp cssmin

压缩并转换ES6语法

（1）下载插件

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

2.引入插件

// 引入gulp-babel插件
const babel = require('gulp-babel')
// 引入gulp-uglify插件
const uglify = require('gulp-uglify')

3. 建立任务：转换ES6语法，压缩js文件

gulp.task('jsmin', callback => {// 获取文件.jsgulp.src('./src/js/*.js')// 转换es6代码.pipe(babel({// 判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码presets: ['@babel/env']}))// 压缩js文件.pipe(uglify())// 输出处理之后的文件.pipe(gulp.dest('./dist/js'))callback();
})

4.执行任务gulp jsmin

复制目录

此时dist目录下已经包含了css目录、js目录和HTML目录，对于当前操作来说，还缺少src目录下的images目录和lib目录。因此需要将src目录下的images目录和lib目录复制到dist目录下

将images目录和lib目录复制到dist里面，代码如下：

//复制目录   建立任务:copy(images/lib)
gulp.task('copy', callback => {// 获取文件imagesgulp.src('./src/images/*')// 将文件输出.pipe(gulp.dest('./dist/images'))// 获取文件libgulp.src('./src/lib/*')// 将文件输出.pipe(gulp.dest('./dist/lib'))callback();
})

打开命令行，在终端输入gulp copy，执行成功后便可看见dist里面新的文件

执行全部构建任务

代码如下：

//执行全部结构任务    gulp.series()方法
gulp.task ('default',gulp.series('htmlmin','cssmin','jsmin','copy'));

打开命令行，在终端输入gulp default,