hat is gulp?

/*
gulp是前端自动化打包构建工具==> 打包：就是把文件压缩，整合，移动，混淆

前端打包构建工具:
gulp: 基于流的打包构建工具
webpack: 基于js文件的打包构建工具

什么是流?
    流文件： 流=> 一种文件传输的格式=> 一段一段的文件传输
    流格式： 流=> 从头到尾的一个过程=> 需要从源头开始，一步一步经过加工，每一步骤需要上一步结果，最终得到结果
    gulp基于流格式的一种打包构建工具

gulp的依赖环境
    依赖node的环境进行开发
    底层封装的内容就是node里面的读写文件
    
gulp的作用
    对于css文件=> 压缩=> 转码(自动添加前缀)
    对于js文件=> 压缩=> 转码(ES6转ES5)
    对于html文件=> 压缩=> 转码(对格式的转换)
    对于静态资源
    对于第三方文件
    ...

gulp的安装
    https://www.gulpjs.com.cn/docs/getting-started/quick-start/
    验证： gulp --version

gulp的卸载
    npm uninstall --global gulp
*/

gulp使用

/*
gulp使用:
1.全局安装gulp=> 提供gulp命令的功能
2.项目依赖gulp=> 可以在gulpfile.js文件中写gulp的构建代码

1.新建项目目录如下：
    1.npm init  -- 生成package.json,记录依赖内容
    2.gulp_test
        + src -- 源码目录
          + css -- 样式文件
          + js -- javascript文件
          + images -- 图片
          + pages -- 页面
        + gulpfile.js -- gulp文件,写项目打包流程的

2.在项目中再安装gulp,是以依赖的方式出现=> 提供配置打包流程API=> 每个项目都要安装一次=> 输入命令: npm install gulp
3.在gulpfile.js中书写打包流程
*/

/*
package.json
dependencies=> 表示项目依赖=> 比如vue, jquery=> 指运行需要用到的内容,将来上线也需要使用的
devDependencies=> 项目开发依赖=> 比如gulp=> 项目开发阶段需要用到的内容，将来上线以后不需要用到=> npm install --dev 包名(gulp)

*/

gulp常用api

/*
1.gulp.task()
语法: gulp.task("任务名称", 任务处理函数)
作用: 创建一个基于流的任务
例子: gulp.task('htmlHandler', function() {
    // 找到html文件, 压缩，打包 放入指定目录
})

2.gulp.src()
语法: gulp.src(路径信息)
作用: 找到源文件
例子: 
    1.gulp.src("./a/b.html")
    2.gulp.src("./a/*.html")
    3.gulp.src("./a/**") 指定目录下所有文件
    4.gulp.src("./a/**\/*") 指定a目录下所有子目录里面的所有文件

3.gulp.dest()
语法: gulp.dest(路径信息)
作用: 把内容放入指定路径内
例子: 
    1.gulp.dest("./abc")  -- 把内容放入到abc目录下

4.gulp.watch()
语法: gulp.watch(路径信息, 任务名称)
作用: 监控指定目录下的文件, 发生变化就执行后面的任务
例子: 
    1.gulp.dewatchst("./abc/*.html", 'htmlHandler')

5.gulp.series()
语法: gulp.series(任务1, 任务2, 任务3, ...)
作用: 逐个执行多个任务，前一个任务结束才执行后面的任务

6.gulp.parallel()
语法: gulp.parallel(任务1, 任务2, 任务3, ...)
作用: 并行开始多个任务

7.pipe()=> 管道函数=> 所有api基于流, 所以该api就是接收当前流，进入下一个流程过程=> gulp.src().pipe(压缩).pipe(转码).pipe(gulp.desc('dist'))
*/

gulp插件

/*
gulp常用插件
    作用: 执行各种各样的压缩，混淆，转码任务

1.gulp-cssmin=> npm install gulp-cssmin -D=> 引入：const cssmin=require('gulp-cssmin')

2.gulp-autoprefixer=> npm install gulp-autoprefixer -D=> 作用: 自动添加前缀=> 引入: const autoprefixer=require('gulp-autoprefixer')=> 引入后得到一个处理流文件的函数,直接在管道内使用传递参数即可=> autoprefixer( browsers: ['last 3 version'] ) -- 主流浏览器最新三个版本

3.gulp-sass=> npm install gulp-sass -D=> 很容易报错,基本下载不成功=> 因为gulp-sass依赖node-sass, node-sass下载容易失败=> 解决: 给node-sass配置一个单独的下载地址
        1.set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
        2.npm install node-sass -D
        3.npm install gulp-sass -D=> const sass=require('gulp-sass')

4.gulp-uglify=> npm install gulp-uglify -D=> 作用: 压缩js文件=> 引入: const uglify=require('gulp-uglify')=> 引入后得到一个函数,直接在管道中使用即可

5.gulp-babel=> 版本
        -> gulp-babel@7 -- gulp@3
        -> gulp-babel@8 -- gulp@4=> npm install gulp-babel -D
        -> 依赖： @babel/core, @babel/preset-env
        -> npm install @babel/core -D
        -> npm install @babel/preset-env -D=> 作用: ES6 转 ES5插件=> 引入: const babel=require('gulp-babel')=> 引入后得到一个函数,直接在管道中,需要传递参数.=> babel({ presets: ['@babel/env'] }) -- babel@7, presets: ['es2015']

6.gulp-htmlmin=> npm install gulp-htmlmin -D=> 作用: 删除文件目录=> 引入: const htmlmin=require('gulp-htmlmin')=> 引入后得到一个函数,直接使用传递参数即可.
    htmlHandler({
        collapseWhitespace: true, // 移除空格
        removeEmptyAttributes: true, // 移除空的属性(仅限于原生属性)
        collapseBooleanAttributes: true, // 移除checked类似的布尔值属性
        removeAttributeQuotes: true, // 移除属性上的双引号
        minifyCSS: true, // 压缩内嵌css代码(只能压缩，不能添加前缀)
        minifyJS: true, // 压缩内线JS代码(只能压缩，不能转码)
        removeStyleLinkTypeAttributes: true, // 移除style 和 link 标签上的type属性
        removeScriptTypeAttributes: true, // 移除script标签上的type属性
    })

7.del=> npm install del -D=> 安装指定版本: npm install del@6.0.0 -D=> 作用: 删除文件目录=> 引入: const del=require('del')=> 引入后得到一个函数,直接使用传递参数即可
    
    
8.gulp-webserver (https://www.npmjs.com/package/gulp-webserver)=> npm install gulp-webserver -D=> 作用: 启动一个基于node的服务器=> 引入: const del=require('gulp-webserver')=> 引入后得到一个可以处理流文件函数,在管道函数中调用接口
    function webServer() {
        return gulp.src('./dist').pipe(webserver({
            host: 'localhost', // 域名
            port: 8080,
            livereload: true, // 热加载
            path: './pages/index.html', // 默认打开一个文件(从dist目录开始写)
            open: true, // 自动打开
        }))
    }

9.gulp-file-include=> 作用: 在一个html页面中导入一个html片段=> npm install gulp-file-include=> 引入: const fileInclude=require('gule-file-include')=> 引入后得到一个函数,直接在管道中使用即可，需要传递参数

*/


/*
// gulp3的写法
const gulp=require("gulp")
// 导入一个css的打包任务
const cssmin=require('gulp-cssmin')
gulp.task('cssHandler', function() {
    return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
})
*/

/*
// gulp4的写法
const cssmin=require('gulp-cssmin')
function cssHandler() {
    return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
}
module.exports.cssHandler=cssHandler;
*/

/*
想要执行上面的任务
1.打开命令行,切换到gulpfile.js文件所在目录
2.执行命令: gulp cssHandler
*/

gulp创建默认任务

/*
由于在基于gulp构建项目的时候，需要执行多个任务，比如压缩css，压缩html，转换js等多个任务.我们可以配置默认任务
配置默认任务作用就是把所有任务都一起执行了
执行gulp命令, 默认会执行默认的任务

方式1：
gulp.task('default', ()=> {})

方式2:
module.exports.default=()=> {
    cssHandler();
    jsHandler();
    htmlHandler();
    ...
}
*/

gulp启动服务器

/*
gulp基于node环境的工具
所以gulp可以启动一个基于node的服务器

启动服务器基于dist目录来做根目录
    原因：所有的文件都会被打包到dist目录

以下代码通过gulp webServer启动web服务器

*/

const webserver=require('gulp-webserver')
function webServer() {
    return gulp.src('./dist').pipe(webserver({
        host: 'localhost', // 域名
        port: 8080,
        livereload: true, // 热加载
        path: '/',
        open: true, // 自动打开浏览器
        // 可配多个代理
        proxies: [
            {
                source: '/kk',
                target: 'https://tenapi.cn/douyinresou/'
            }
        ]
    }))
}

gulp监控任务

function watchHandler() {
    gulp.watch('./src/css/*.css', cssHandler)
}
// 使用gulp watchHandler启动监控任务

gulp打包组件

/*
场景：=> 将重复的东西单独拿出来，写成一个html片段=> 单独拿出来的东西可以包含css和js
        -> 也可以不包含

*/
const htmlmin=require('gulp-htmlmin')
const fileInclude=require('gulp-file-include')
function htmlHandler() {
    return gulp.src('./src/pages/*.html')
        .pipe(fileInclude({
            prefix: '#-#', // 自定义的一个标识符
            basepath: './src/components', // 基准目录，即组件目录
        }))
        .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标签上的type属性
    })).pipe(gulp.dest('./dist/pages'))
}

<!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>
    <script src="../js/login.js"></script>
</head>
<body>
    <!--
        在html中引入方式为:
        语法: 自定义标识符include('要导入的组件文件路径')
    -->
    #-#include('./header.html', { title: '登录页面' })
    <h1>hello world</h1>
    #-#include('./footer.html')
</body>
</html>

<!-- header组件 -->
<div>
    <h1>
        #-#title <!-- 此处就可以引用到上面的title的值 -->
    </h1>
    header
</div>

<!-- footer组件 -->
<div>
    footer
</div>

gulp的demo

ulp 前端项目构建工具，用来处理css，js，图片压缩等，编译less和scss以及coffeeScript等，提高开发效率。gulp是基于NodeJs而NodeJs又是基于CommonJs的，所以我们要想使用gulp需要先安装NodeJs。运行如下两条命令来查看是否安装成功。

npm是node包管理工具，随着node自动安装

gulp安装

淘宝镜像安装 npm install -g cnpm --registry=https://registry.npm.taobao.org

1.全局安装gulp

npm install --global gulp

2.局部安装gulp

创建一个项目，我这里叫mygulp，然后cmd命令进入到此目录文件夹，输入

npm init

此时会发现项目目录下多了一个package.json文件

之后执行以下命令来初始化我们刚创建好的项目

npm install --save-dev gulp

在项目根目录创建gulpfile.js文件，先在gulpfile.js文件创建一个任务，看能否运行成功

然后在cmd命令行输入gulp task1

执行多个任务，gulp.task('default',gulp.series['task1','task2']);

gulp的常用功能：

1.复制加移动文件

任务：要程序把index.html文件复制一份到app文件夹下

gulpfile.js

然后执行gulp task3，看到执行结果：

2.创建webServer

• 下载gulp-webServer npm install - -save-dev gulp-webserver

在node_modules文件夹中有gulp-webserver文件夹证明已经安装成功

• 在gulpfile.js中引入gulp-webServer

var server=require("gulp-webServer");

放在浏览器上效果图：

而且保存的时候可以实现同步刷新

3.合并和压缩js文件

npm install - -save-dev gulp-concat

npm install - -save-dev gulp-uglify

然后在gulpfile.js里面输入如下代码，来合并多个js文件

var concat=require("gulp-concat");

效果如图：

压缩js文件

修改刚才的合并代码如下，其中pipe叫做管道符：

然后我们再看scipt.js里面的效果

4.编译sass到css

less

sass box color:red 不是咱们平常写css的习惯，所以scss就应运而生

scss box{color:red;}

npm install - -save-dev gulp-sass

然后我们创建scss文件夹，再在里面新建一个a.scss文件，a.scss内容如下：

在gulpfile.js里面编写如下内容

这时我们会看到项目里自动生成了一个新的css文件夹里面有了新的a.css文件

5.css的合并和压缩

合并gulp-concat 压缩 gulp-minifiy-css

cnpm install gulp-minify-css --save-dev 也可以用npm install gulp-minify-css --save-dev 哪个能用就用哪个

之后我们来合并以及压缩css文件夹里的a.css和b.css

别忘记先引入gulp-minify-css

var cssmin=require('gulp-minify-css');

压缩后生产style.css如下：

6.压缩图片

在cmd中运行 cnpm install gulp-imagemin --save-dev因为我们已经采用淘宝镜像替换掉了npm，所以以后的安装都可以采用cnpm来安装

如果想深度压缩图片还需要在cmd中运行 cnpm install imagemin-pngquant --save-dev这个时候我们看package.json文件，发现都已经安装成功

在项目里新建一个image文件夹，里面放上一张图片，然后在gulpfile.js里面进行配置如下：别忘了先引入：var imagemin=require('gulp-imagemin');

之后我们看到项目里自动生成了img文件夹，并且里面有压缩好的图片

但是压缩完之后，两张图片的大小并没有多大的改变，现在我们可以进行深度压缩

还是 别忘了先引入var pngquant=require('imagemin-pngquant');

然后配置任务如下：

这时gulp项目生成了一个新的文件夹dist/img下有刚刚压缩过的图片