gulp 的常用 API

gulp 的常用 API

       前提: 下载 gulp 第三方, 导入以后使用

点击链接进入到 gulp 官网https://www.gulpjs.com.cn/

1. gulp.task()

        gulp.task(任务名称, 任务处理函数)

        作用: 创建一个基于流的任务

        gulp.task('htmlHandler', function () {

          // 找到 html 源文件, 进行压缩, 打包, 放入指定目录

        })

2.gulp.src()

gulp.src(路径信息)

作用: 找到源文件

书写方式

2-1. gulp.src('./a/b.html')

找到指定一个文件

2-2. gulp.src('./a/.html')

找到指定目录下, 指定后缀的文件

2-3. gulp.src('./a/')

找到指令目录下的所有文件

2-4. gulp.src('./a/ /')

找到 a 目录下所有子目录里面的所有文件

2-5. gulp.src('./a/** /*.html')

找到 a 目录下所有子目录里面的所有 .html 文件

3. gulp.dest()

        gulp.dest(路径信息)

       作用: 把一个内容放入指定目录内

    举例： gulp.dest('./abc')

          把他接收到的内容放到 abc 目录下

4. gulp.watch()

        gulp.watch(路径信息, 任务名称)

        作用: 监控指定目录下的文件, 一旦发生变化, 从新执行后面的任务

        举例: gulp.watch('./src/pages/*.html', htmlHandler)

          当指定目录下的 html 文件发生变化, 就会执行 htmlHandler 这个任务

5. gulp.series()

        gulp.series(任务 1, 任务 2, 任务 3, ...)

        作用: 逐个执行多个任务, 前一个任务结束, 第二个任务开始

6. gulp.parallel()

        gulp.parallel(任务 1, 任务 2, 任务 3, ...)

        作用: 并行开始多个任务

7. pipe()

        管道函数

        所有的 gulp API 都是基于流

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

        举例:gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))

gulp 常用插件

        gulp 的各种插件就是用来执行各种各样的压缩混淆转码任务的

1. gulp-cssmin

        下载: npm i gulp-cssmin -D

        导入: const cssmin = require('gulp-cssmin')

        得到一个处理流文件的函数

        直接再管道函数里面执行就好了

2. gulp-autoprefixer

        下载: npm i gulp-autoprefixer -D

        导入: const autoPrefixer = require('gulp-autoprefixer')

        得到一个处理流文件的函数

        直接再管道函数里面使用, 需要传递参数

          { browsers: [要兼容的浏览器] }

 3. gulp-sass

        下载: npm i gulp-sass -D

容易报错, 导致下载不成功

          gulp-sass 依赖另一个第三方, node-sass

            node-sass 同样很难下载成功

            以前都是一个地方下载, 但 node-sass 自己单独有一个下载地址

            如不进行单独的 node-sass 下载地址配置, 很容易失败

          解决方法: 给 node-sass 单独配置一个下载地址

            下载 node-sass 从这个单独的地址下载, 下载其他的东西还是统一地址

      node-sass 单独下载地址

        $ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/

          过程

            1. $ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/

            2. $ npm i node-sass -D

            3. $ npm i gulp-sass -D

        导入: const sass = require('gulp-sass')

        导入以后得到一个可以处理流文件的函数, 直接再管道函数里面执行就可以了

4. gulp-uglify

        压缩 JS 文件

        下载: npm i -D gulp-uglify

        导入: const uglify = require('gulp-uglify')

        导入以后得到一个可以处理流文件的函数

        直接再管道函数中使用就可以了

        注意: 不适用 ES6 语法, 一旦有了 ES6 语法就会报错

5. gulp-babel

        专门进行 ES6 转 ES5 的插件

        gulp-babel 的版本

          gulp-babel@7: 大部分使用再 gulp@3 里面

          gulp-babel@8: 大部分使用再 gulp@4 里面

        下载:

          gulp-babel 需要依赖另外两个包, 我们要一起下载

          另外两个包: @babel/core  @babel/preset-env

        导入:

          只要导入一个包就够了, 他会自动导入另外两个包

          const babel = require('gulp-babel')

        导入以后得到一个可以处理流文件的函数

        直接再管道函数内部使用, 需要传递参数

6. gulp-htmlmin

        下载: npm i -D gulp-htmlmin

        导入: const htmlmin = require('gulp-htmlmin')

        导入以后得到一个可以处理流文件的函数

        直接再管道函数里面调用, 需要传递参数

7. del

        下载: npm i -D del

        作用: 删除文件目录

        导入: const del = require('del')

        导入后得到一个函数, 直接使用传递参数就可以了

8. gulp-webserver

        作用: 启动一个基于 node 书写的服务器

        下载: npm i -D gulp-webserver

        导入: const webserver = require('gulp-webserver')

        导入后得到一个处理流文件的函数

        我们再管道函数内调用就可以了, 需要传递参数

 9. gulp-file-include

        作用: 再一个 html 页面里面导入一个 html 片段

        下载: npm i -D gulp-file-include

        导入: const fileInclude = require('gulp-file-include')

        导入以后得到一个处理流文件的函数

        我们再管道函数内调用就可以了, 需要传递参数

gulp 打包组件

          重复的位置单独拿出来, 写成一个 html 片段

          单独拿出来的片段可以包含 也可以不包含 css 和 js

          当我压缩 html 的时候

          能再固定位置把我写好的 html 片段引入进来

        组件

          一段可以包含(css / js)一整套 html 结构片段

          最后把页面的每一部分分成一段一段的 html 片段组装在一起