一、什么是gulp？
gulp是基于node平台开发的前端构建工具。 gulp是一个JavaScript程序，并且它的指令使用的也是JavaScript语言，所以gulp通常是前端开发人员自动 化处理日常任务的首选工具。
二、gulp的作用
gulp可以处理日常工作流产生的任务项目上线时对HTML、CSS、JavaScript文件合并、压缩。将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行。gulp允许开发者将机械化的操作编写成任务，在命令行输入相关的任务名称就能执行机械化操作，从而 提高开发效率。(用机器代替手工，提高开发效率)
三、gulp提供的方法
gulp.src()：获取任务要处理的文件
语法：gulp.src(globs)参数：globs参数是读取文件的筛选条件，可以写入字符串，也可以是数组，数组含有多个读取条件匹配条件： 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
示例：
gulp.src(“js/a.js”) 读取一个文件gulp.src([“js/a.js”,“js/b.js”]) 读取两个文件gulp.src(“js/*.js”) js文件夹下所有的js文件
匹配条件：
**匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。也就是能匹配某个目录下所有文件包括其子目录下的所有内容?匹配括号中给定的任一模式0次或1次 […]匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个 !匹配任何与括号中给定的任一模式都不匹配的+匹配括号中给定的任一模式至少1次@匹配括号中给定的任一模式1次
gulp.dest()：输出文件
语法：gulp.dest(path)注释：给文件写入数据流，gulp.dest()把文件流写入文件后，文件流仍然可以继续使用参数：path参数是要写入文件存放的路径
示例：
gulp.task("init",function () {
gulp.src("./js/*.js").pipe(gulp.dest("./dist/"))
});
gulp.task()：建立gulp任务
语法：gulp.task(任务名,任务所依赖前面任务名的数组,任务执行的函数);注释：如果需要有多个任务操作时就需要定义任务
// 如果执行 gulp two 这时候就会先执行任务one，再执行任务two
gulp.task("one",function () {
console.log("one");
});
gulp.task("two",["one"],function () {
console.log("two")
});
gulp.watch()：监控文件的变化
语法：gulp.watch(“监视的文件”,[监视文件发生变化后需要执行任务名的数组])注释：监视文件变化
//这里启动任务后，会开始监视，如果js文件夹下那个文件修改了，或者删除，增加，这里都会打印出来
gulp.task("default",function () {
gulp.watch('js/*.js', function(event){
console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
console.log(event.path); //变化的文件的路径
});
});
四、gulp的安装
(1) 全局安装gulp-cli
注释：
gulp-cli是gulp的命令行工具，它需要全局安装，以便gulp能够在命令提示符中直接运行。gulp-cli是本地 gulp的全局的入口，负责把所有参数转发到本地gulp，还有显示项目里安装的本地gulp的版本。 全局gulp用于启动各个项目中的本地gulp，换句话说，如果在全局安装了gulp-cli，那么就可以在不同的项目 中使用不同的gulp版本。
// -g全称为global表示全局安装 @2.3.0表示全局gulp-cli的版本
npm install gulp-cli@2.3.0 -g
(2) 在项目中安装gulp
注释：
本地gulp位于本地项目的node_modules目录下，包含了gulpfile所需的所有函数和API。本地gulp作用：
加载和运行gulpfile（gulpfile.js）中的构建指令。另一个是暴露API供gulpfile使用。
// 初始化项目
npm init
// 局部安装gulp—--save-dev表示将gulp作为devDependencice（开发依赖）保存到package.json文件中
npm install gulp@4.0.2 --save-dev
// 查看gulp版本，查看是否安装成功
gulp -v
(3) 构建项目
3.1 如何构建项目？
在项目根目录下建立gulpfile.js（不可更改）文件重构项目的文件夹结构 src目录放置源代码文件 ，dist目录放置构建后文件在gulpfile.js文件中编写任务.（gulp.task()建立任务…）在命令行工具中执行gulp任务
3.2 构建项目——在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（）
});
3.3 在命令行工具中执行gulp任务
// gulp + 任务名
gulp first
五、gulp的使用
5.1 Gulp常用插件
gulp-htmlmin ：html文件压缩gulp-csso ：压缩cssgulp-babel ：JavaScript语法转化gulp-less: less语法转化gulp-uglify ：压缩混淆JavaScriptgulp-file-include 公共文件包含browsersync 浏览器实时同步
注意：插件的使用通常分为3步：下载、引用和调用插件，需要注意的是在引用插件之前，一定要先引用gulp模块。
5.2 压缩并抽取HTML中的公共代码
通过gulp-htmlmin 插件和gulp-file-include 插件实现压缩并抽取HTML中公共代码步骤如下：
1. 下载安装压缩HTML文件插件gulp-htmlmin
npm install gulp-htmlmin npm install gulp-file-include
2. 在gulpfile.js文件中引用gulp-htmlmin插件
const htmlmin = require('gulp-htmlmin')
3. 在gulpfile.js文件中调用gulp-htmlmin插件，实现HTML文件中代码的压缩
//（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. 查看dist目录结构
5. 下载gulp-file-include插件，抽取 HTML中的公共代码
// 引入gulp-file-include
const fileInclude = require('gulp-file-include')
6. gulpfile.js文件中引用gulp-file-include插件
7. 在gulpfile.js文件中调用gulp-file-include插件，抽取 HTML中的公共代码
8. 新建common目录，在公共目录新建公共代码部分文件
//公共代码
9. 删除原文件中公共部分，使用@@include()方法引入公共部分
//在article.html中输入 @@include('./common/header.html')
10. 打开命令行工具，执行gulp htmlmin
5.3 压缩CSS文件并转换Less语法
将CSS文件使用的Less语法转换为CSS语法，并压缩CSS文件中的代码步骤如下：
1. 下载安装Less语法转换插件gulp-less
//（1）less转换 npm install gulp-less //(2)css压缩 npm install gulp-csso
2. 在gulpfile.js文件中引用gulp-less插件
3. 在gulpfile.js文件中调用gulp-less插件，实现Less语法转换为CSS语法
// 建立任务：转换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();
})
4. 新建需要编译的文件，使用less编写一段代码
5. 打开命令行工具，执行gulp cssmin将less语法转换成css语法
6. 下载安装csso语法转换插件gulp-csso
7. 在gulpfile.js文件中引用gulp-csso插件
8. 在gulpfile.js文件中调用gulp-csso插件，完成对css代码的压缩
//将src下的a.less压缩到dist目录下css的a.css
5.4 压缩并转换ES6语法
将JavaScript中ES6语法的转换，并压缩JavaScript文件中的代码步骤如下：
1. 下载安装语法转换插件gulp-babel @babel/core @babel/preset-env
npm install uglify npm install gulp-uglify npm install gulp-babel @babel/core @babel/preset-env
2. 在gulpfile.js文件中引用gulp-babel插件
// 引入gulp-babel插件 const babel = require('gulp-babel') // 引入gulp-uglify插件 const uglify = require('gulp-uglify')
3. 在gulpfile.js文件中调用gulp-babel插件，实现ES6语法转换
gulp.task('jsmin', callback => { // 获取文件.js gulp.src('./src/js/*.js') // 转换es6代码 .pipe(babel({ // 判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码 presets: ['@babel/env'] })) // 压缩js文件 .pipe(uglify()) // 输出处理之后的文件 .pipe(gulp.dest('./dist/js')) callback(); })
4. 新建需要编译的文件，使用jsmin编写一段代码
5. 打开命令行工具，执行gulp jsmin
6. 下载安装js代码压缩插件gulp-uglify
7. 在gulpfile.js文件中引用gulp-uglify插件
8. 在gulpfile.js文件中调用gulp-uglify插件，完成对js代码的压缩
5.5复制目录
将src目录下的images目录和lib目录，复制到dist目录下步骤如下：
1. 在gulpfile.js文件中创建copy任务，进行目录复制操作。
2. 运行命令‘gulp copy’
3. 执行成功后，查看dist目录的结构，是否将images目录和lib目录成功复制
5.6 执行全部构建任务
通过使用命令“gulp 任务名”去执行单个任务，那么如何实现执行一个任务，其他任务也一起执行呢？ 步骤如下：
1. 在gulpfile.js文件中创建default任务
2. 使用gulp.series()按顺序执行任务
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy'));
3. 打开命令行工具，运行“gulp default”命令
推荐文章
您阅读本篇文章共花了：
发表评论