gulp

gulp

        前端自动化打包构建工具

          打包: 把文件压缩, 整合, 移动, 混淆

gulp 与 webpack 的区别

gulp: 基于流的打包构建工具

        webpack: 基于 js 文件的打包构建工具

 什么是流

       流文件:

          一种一段一段文件传输的格式

        流格式:

        从 源 开始一步一步经过加工到尾的过程

    每一个步骤需要依赖上一步的结果

            最终给出一个完整的成品

        gulp 是基于流格式的一种打包构建工具

gulp 的依赖环境

        依赖于 node 环境进行开发

        底层封装的内容就是 node 里面的读写文件

gulp 的作用

       压缩 转码(自动添加前缀)css 文件

  压缩 转码(ES6 转 ES5)  js 文件

       压缩  转码(对格式的转换)  html 文件

       对于静态资源文件的处理

       对于第三方文件的处理

gulp 的安装

        一个 JavaScript 相关的工具

        直接使用 npm 进行安装

        需要安装再你的电脑环境里面, 一次安装多次使用

        打开命令行, 输入指令

          => $ npm install --global gulp

          => MAC: $ sudo npm install --global gulp

      gulp 的检测

        打开命令行, 输入指令

          $ gulp --version

          CLI version: 2.3.0

             Local version: Unknown

      gulp 的卸载

        打开命令行, 输入指令

          $ npm uninstall --global gulp

gulp 的版本

        gulp@3

          安装成功检测版本号, gulp 3.9.1

        gulp@4

        安装成功检测版本号, gulp cli 2.3.0

 gulp 全局工具安装完毕

        能给你的电脑提供一个启动 gulp 的环境

        私人: 可以再 cmd 里面运行 gulp xxx 的指令

 准备使用 gulp

       gulp 作用: 帮我们打包自己的项目

 1. 准备一个项目

        需求: 你要确定好自己的目录结构

                分开源码和打包以后的内容

        确定自己的目录结构

          - jasonApp

            - src      源码

              + pages     html

              + css       css

              + js        js

              + sass      sass

              + images    图片

              + videos    视频

              + audios    音频

              + lib       第三方文件(jquery, swiper, ...)

              + fonts     字体图标文件

      2. 准备一个 gulpfile.js 的文件

        gulp 进行打包必须要有的依据

        每一个项目需要一个 gulpfile.js

        我们再这个文件里面进行本项目的打包配置

        gulp 再运行的时候, 会自动读取 gulpfile.js 文件里面的配置

        按照你再 gulpfile.js 文件里面的配置进行打包工作

        注意: 直接写在项目根目录, 和 src 同级

      3. 再项目里面再次安装 gulp

        注意: **项目里面的 gulp 是以第三方模块的形式出现的**

        专门给你提供配置打包流程的 API 的

        每一个项目都要安装一次

        打开命令行, 切换到项目目录

          输入指令 $ npm install gulp -D

      4. 再 gulpfile.js 里面书写配置文件

        书写你该项目的打包流程

        书写完毕以后, 按照打包流程去执行 gulp 指令运行 gulpfile.js 文件