gulp包管理工具Guip入门级教程简单易懂的保姆级学习教程

1.什么是Gulp

gulp 是基于 node 实现 Web 前端自动化打包工具，利用它能够极大的提高开发效率。
打包：将文件压缩，整合，移动，混淆
在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
流文件：
一种文件传输的格式（一段一段的文件传输）
流格式：
从头到尾，每个步骤都依赖上一个步骤的结果，最终得到一个成果（gulp是基于流格式的打包构建工具）
环境依赖：
依赖于node环境开发

2.gulp能干什么

css：压缩转码css文件
js：压缩转码（ES6转ES5）
html：压缩和格式转化
公共文件抽离
修改文件浏览器自动刷新

3.gulp安装

首先应该下载node和了解基础的npm知识
启动node，输入下面命令：

npm install gulp       //局部安装 ，每个需要打包的项目根目录都需要安装
npm install --global gulp   //全局安装；安装一次，任何地方都可以使用

安装完毕后输入：

gulp -v

如果出现版本号就说明安装成功

4.gulp准备工作

4.1存放说明

因为gulp是一个打包工具，所以打包后的内容和源码应该存放在哪里
开发通常这么做
创建两个文件夹
src：存放源码
dist：存放打包好的文件

4.2目录结构

src存放的是源码
gulpfile.js：gulp进行打包的依据，每个项目都必须要有，这个文件里进行项目的打包配置，运行的时候会自动读取gulpfile.js里面的配置；和src同级

4.3项目依赖第三方gulp

如果你上面安装gulp时不是全局安装，就需要在每个项目的根目录里安装gulp
安装后会产生一个package.json的文件，里面有两个需要了解的文件
dependencies： 项目依赖；指项目运行时需要用到的东西，将来上线时也需要用到（jQuery，swiper）
devDependencies：开发依赖；指项目开发阶段需要用到的内容，上线以后不需要（gulp）
gulp最好放在devDependencies里面

5.gulp常用API

5.1 gulp.task()

语法：gulp.task(任务名称,任务处理函数)
作用：创建一个基于流的任务
语书写方式：

gulp.task('htmlHeader',function(){
 //找到html源文件，进行压缩，打包，放入指定目录
})

5.2 gulp.src()

语法：：gulp.src(路径信息)
作用：：找到源文件
书写方式：

gulp.src("./a/b.html")  //找到a目录下b.html的指定文件
gulp.src("./a/*.html")  //找到a目录下，指定.html后缀的文件
gulp.src("./a/**")    //找到a目录下的所有文件
gulp.src("./a/**/*") //a目录下所有子目录里面的所有文件指定
gulp.src("./a/**/*.html")  //找到a目录下所有子目录里面的.html文件

5.3 gulp.dest()

语法：：gulp.dest(路径信息)
作用：：把一个内容放到指定目录内
书写方式：

gulp.dest('./a'):将接收到的内容放到a目录下

gulp.watch()

语法：：gulp.watch(路径信息,任务名称)
作用：：监控指定目录的文件，一旦发生改变就执行新任务
书写方式：

gulp.watch('./src/pages/*.html',htmlHandler)
//当指定目录下的html文件发生改变时，执行htmlHandler任务

gulp.series()

语法：：gulp.series(任务1，任务2，任务3)
作用：：逐一执行多个任务，前一个结束，后一个继续

gulp.parallel()

语法：：gulp.parallel(任务1，任务2，任务3)
作用：：并行执行多个任务

pipe()

管道函数，接受当前流，进入下一个流的过程的管道函数

gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))
找源——>压缩——>转码——>发送指定目录

6.下载小插件（看后面需要什么下载什么，不要一下都下载完）

6.1下载css压缩插件

作用：：引入该插件可以压缩css代码

npm i gulp-cssmin -D   //  -D是上面讲的开发依赖

6.2下载添加前缀（可以兼容信息）的插件

作用：：该插件可以添加前缀，来兼容不同版本

npm i gulp-autoprefixer  -D   //  -D是上面讲的开发依赖

6.3下载sass插件

需要注意，这个下载方式和以往不同，需要node-sass和dart-sass都下载下来

npm install node-sass 
npm install sass gulp-sass --save-dev

6.4下载js插件

npm i -D gulp-uglifly

6.5下载html插件

npm i -D gulp-htmlmin

6.5ES6转ES5的插件

以前js里面不支持es6的语法，现在可以了，所以可下载可不下载

npm i -D gulp-babel
npm i -D @babel/core
npm i -D @babel/preset-env

6.6.images插件

因为下载时间太长了，还有压缩力度不大（无损），所以不建议下载

npm i -D gulp-imagemin

6.7 删除文件插件

npm i -D del

6.8服务器打包插件

npm i -D gulp-webserver

7.打包css任务

7.1 先在css文件里面编写一些css样式

.div1 {
    display: flex;
    transition: all 1s linear;
}

p {
    color: red;
}

div {
    width: 200px;
    height: 200px;
    background-color: blue;
    border: 2px solid #ff8500;
}

7.2 打开前面创建的gulpfile.js文件

——1.初始化gulp，创建gulp对象

const GulpClient = require("gulp");

——2.下载并引入刚刚下载的css压缩插件

npm i gulp-cssmin -D    //下载
const cssMin = require('gulp-cssmin');   //引入

——3.下载并引入刚刚下载的可以兼容的插件

npm i gulp-autoprefixer -D    //下载
const autoPreFixer = require('gulp-autoprefixer');    //引入

——4.创建cssHandler对象并写入

const cssHandler = function() {
        GulpClient.src('./src/css/*.css') //找到内容地址
            .pipe(autoPreFixer())   //前缀插件的调用
            .pipe(cssMin()) //css压缩的调用
            .pipe(GulpClient.dest('./dist/css/'))  //要打包的目的地址
    }

——5.导出cssHandler对象

module.exports.cssHandler = cssHandler

完整代码如下

const GulpClient = require("gulp");
// 引入cssmin文件
const cssMin = require('gulp-cssmin');
//  引入 gulp-autoprefixer 文件
const autoPreFixer = require('gulp-autoprefixer');
// gulp4的书写规范
const cssHandler = function() {
        GulpClient.src('./src/css/*.css') //找到内容
            .pipe(autoPreFixer())    //兼容信息
            .pipe(cssMin()) 			//css压缩
            .pipe(GulpClient.dest('./dist/css/'))  //打包到指定文件夹

    }
    // 导出即可
module.exports.cssHandler = cssHandler

——6.执行

gulp cssHandler

这个时候你打开dist目录下的css文件会发现这样的情况

.div1{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-transition:all 1s linear;-moz-transition:all 1s linear;transition:all 1s linear}p{color:red}div{width:200px;height:200px;background-color:#00f;border:2px solid #ff8500}

说明css打包成功

7.3注意

调用autoprefixer对象时需要传递参数例如：

.pipe(autoPreFixer({['last 2 version']}))   

'last 2 version'是指定写入的想要什么样的限制类型 意思是最近两个版本
还有"FireFox < 20" :火狐浏览器小于20的版本
"ISO < 7" :兼容iso版本
更多兼容信息点击这里查看
但是这样写会返回一些代码

他是推荐你在package.json文件里面添加兼容信息
如果发现没有package.json文件
使用以下命令

npm init -y

完了在package.json里面添加下面信息

"browserslist": [
    "last 2 versions",
    "FireFox < 20",
    "IOS < 7"
],

再运行 gulp cssHandler 会发现不仅没报错还会打包好css代码

8.打包sass的任务

和上面css差不多的格式

下载sass插件

先写.scss文件

div {
    width: 100px;
    height: 200px;
    color: $c;
    p {
        color: red;
    }
}
// 单行注释

/* 多行注释 */


/* ! 强力注释 */

再写gulpfile.js文件

const GulpClient = require("gulp");
//  引入 gulp-sass文件
const sass = require('gulp-sass')(require('sass'));
const sassHandler = function() {
        return GulpClient
            .src('./src/sass/*.scss')
            .pipe(sass())
            .pipe(autoPreFixer())
            .pipe(cssMin())
            .pipe(GulpClient.dest('./dist/sass/'))
    }
    // 导出打包sass的任务
module.exports.sassHandler = sassHandler

最后运行结果如下代表打包成功

```html
@charset "UTF-8";div,div p{color:red}div{width:100px;height:200px}

9.打包js任务

下载js插件
js文件里面编写

for (var i = 0; i < 10; i++) {
    console.log(i);
}
console.log('hello -world');
if (true) {
    let num = 100
    console.log(num);
}
let num = 200
console.log(num);

for (let i = 0; i < 10; i++) {
    setImmediate(function() {
        console.log(i);
    }, 1000)
}
for (var i = 0; i < 10; i++) {
    console.log(i);
}

gulpfile.js里面编写

const GulpClient = require("gulp");
// 引入js包
const uglify = require('gulp-uglify');
// // 这是js打包任务
const jsHandler = function() {
        return GulpClient
            .src('./src/js/*.js')
            .pipe(uglify())
            .pipe(GulpClient.dest('./dist/js/'))
    }
    // 导出js打包任务
module.exports.jsHandler = jsHandler

10. 打包HTML任务

下载html插件
html文件里面编写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hr>
    <h1 style="color: blue;">我是谁</h1>
    <p>我来自哪里</p>
    <div class="id"></div>
    <input type="checkbox" checked="checked">
    <script>
        let i = 0;
        console.log(i);
    </script>
</body>

</html>

gulpfile.js里面编写

const GulpClient = require("gulp");

// // 引入html文件
const htmlMin = require('gulp-htmlmin');
const htmlHandler = function() {
    return GulpClient
        .src('./src/pages/*.html')
        .pipe(htmlMin({ //通过配置参数
            collapseWhitespace: true, // 表示移出空格
            removeEmptyAttributes: true, //移除空属性
            collapseBooleanAttributes: true, // 移除checked类似的布尔值属性
            removeAttributeQuotes: true, // 移除属性上的双引号
            minifyCSS: true, // 压缩内嵌式的css代码（只能基本压缩，不能自动添加前缀）
            minifyJS: true, //压缩内嵌式的js代码（不能转码）
            removeStyleLinkTypeAttributes: true, //移除style和link标签上的type属性
            removeScriptTypeAttributes: true //移除script标签上的默认属性
        }))
        .pipe(GulpClient.dest('./dist/pages/'))
}
module.exports.htmlHandler = htmlHandler

总体上css，scss，js，html都是相同的结构 但html需要注意它的配置参数

> 配置参数
>             collapseWhitespace: true, // 表示移出空格
>             removeEmptyAttributes: true, //移除空属性
>             collapseBooleanAttributes: true, // 移除checked类似的布尔值属性
>             removeAttributeQuotes: true, // 移除属性上的双引号
>             minifyCSS: true, // 压缩内嵌式的css代码（只能基本压缩，不能自动添加前缀）
>             minifyJS: true, //压缩内嵌式的js代码（不能转码）
>             removeStyleLinkTypeAttributes: true, //移除style和link标签上的type属性
>             removeScriptTypeAttributes: true //移除script标签上的默认属性

11.打包其他音频、图片、视频、第三方文件// // 这是一个audios文件任务

简单调用即可，实在需要可以下载对应代码

const audioHandler = function() {
    return GulpClient
        .src('./src/**')
        .pipe(GulpClient.dest('./dist/audio'))
}
module.exports.audioHandler = audioHandler


// // 这是一个videos文件任务
const videosHandler = function() {
    return GulpClient
        .src('./src/**')
        .pipe(GulpClient.dest('./dist/videos'))
}
module.exports.videosHandler = videosHandler


// // 这是一个lib文件任务
const libHandler = function() {
    return GulpClient
        .src('./src/**')
        .pipe(GulpClient.dest('./dist/lib'))
}
module.exports.libHandler = libHandler

12.配置默认任务

因为一个一个执行太繁琐，所以默认一个任务一起执行了

// 创建一个默认任务
module.exports.default = gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler)

13.删除默认任务

安装支持删除的插件

// 引入删除插件
const del = require('del')
// 创建一个删除dist的任务
const delHandler = function() {
    return del['./dist/']
}
module.exports.delHandler = delHandler

14.gulp启动服务器

const webHandler = function () {
  return gulp
    .src('./dist')
    .pipe(webserver({
      host: 'www.gx.com', // 域名(可以配置自定义域名)
      port: '8080', // 端口号
      livereload: true, // 当文件修改的时候, 是否自动刷新页面
      open: './pages/login.html', // 默认打开哪一个文件(从 dist 目录以后的目录开始书写)
      proxies: [ // 配置你的所有代理
        // 每一个代理就是一个对象数据类型
        // 注意: 如果你没有代理, 不要写空对象
        {
          // 代理标识符
          source: '/dt',
          // 代理目标地址
          target: 'https://www.duitang.com/napi/blog/list/by_filter_id/'
        },
        {
          source: '/gx',
          target: 'http://localhost:80/server.php'
        },
        {
          source: '/gx2',
          target: 'http://localhost:80/'
        }
      ]
    }))
}

15.创建一个监控任务

const watchHandler = function () {
  // 使用 gulp.watch()
  gulp.watch('./src/sass/*.scss', sassHandler)
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/pages/*.html', htmlHandler)
}

创作不易，有什么错误欢迎在评论区指正
更多精彩点击这里