概念

  • 官网：https://www.gulpjs.com.cn/
  • 第三方模块
  • 基于 node 平台开发的前端构建工具
  • 将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了

  • 用机器代替手工，提高开发效率

    能做什么

  • 项目上线，HTML、CSS、JS文件压缩合并

  • 语法转换（es6、less…）es6转es5提交兼容性
  • 公共文件抽离
  • 修改文件浏览器自动刷新
  • ……

    使用

    安装

    ```bash // 安装gulp npm install gulp -g

// 安装 gulp 命令行工具（安装了才能执行gulp命令） npm install gulp-cli -g

  1. <a name="hQkZP"></a>
  2. ## 重构项目的文件夹结构 src 目录放置源代码文件 dist 目录放置构建后文件
  3. <a name="r4qnd"></a>
  4. ## 在项目根目录下建立  gulpfile.js  文件
  6. - ![code.png](https://cdn.nlark.com/yuque/0/2021/png/1708948/1612769897042-a7bba583-bec3-4940-8c9b-63f85e460e58.png#align=left&display=inline&height=264&margin=%5Bobject%20Object%5D&name=code.png&originHeight=264&originWidth=557&size=141146&status=done&style=none&width=557)
  7. - 引入gulp模块
  8. ```bash
  9. const gulp = require('gulp')

  • 注册任务

    1. gulp.task('任务名',function(){
    2.  //  将你的任务的任务代码放在这
    3. })

  • 注册默认任务

    1. gulp.task('default',['任务'])// 异步执行

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

    Gulp插件

  • html文件压缩 gulp-htmlmin

  • 合并文件(js/css) gulp-concat
  • 实时自动编译刷新 gulp-livereload
  • 压缩css gulp-csso
  • JavaScript语法转化（ES6转ES5） gulp-babel
  • less语法转化 gulp-less
  • 压缩混淆JavaScript gulp-uglify
  • 公共文件包含 gulp-file-include
  • 浏览器实时同步 browsersync

  • 下载

    1. npm install gulp-htmlmin gulp-csso --save-dev

    API

    获取任务要处理的文件

  • gulp.src(filePath/pathArr)

  • 指向指定路径的所有文件，返回文件流对象

  • 用于读取文件

    输出文件

  • gulp.dest(dirPath/pathArr)

  • 指向指定的所有文件夹

  • 用于向文件夹中输出文件

    建立 gulp 任务

  • gulp.task(name,[deps],fn)

  • 定义一个任务

    监控文件的变化

  • gulp.watch()

  • 监控文件的变化

    代码

    code.png