gulp文档_gulp 文档-CSDN博客

本文链接：https://blog.csdn.net/tianranran/article/details/123077160

# GULP

- `gulp` 是一个项目开发的 **自动化打包构建工具**
- 基于 `node` 环境来运行的



## 什么是自动化打包构建工具

- 比如
  - 我们在开发的过程中，会写到 `js` 文件，`css` 文件，等等
  - 我们的项目如果想上线，那么一定要体积小一点，文件大小越小越好
  - 而我们在写 `js` 文件的时候，会有很多 **换行/空格** 之类的东西
  - 这些 **换行/空格** 都是占文件体积的一部分
  - 那么我们在上线之前就要吧这些 **换行/空格** 尽可能的删除掉
  - 我们又不能一个文件一个文件的去删除
  - 就要用到一个自动化工具来帮助我们把这些多余的东西干掉
- 这个就是自动化工具的意义
- 常见的自动化打包构建工具
  - `gulp`
  - `webpack`



## 安装 GULP

- `gulp` 是一个依赖于 `node` 的环境工具

- 所以我们需要先安装一个 **全局 `gulp` 依赖**

- 直接使用 `npm` 去安装就可以了

  ```shell
  # 使用 npm 安装全局依赖 gulp
  # 我们这里安装一个4版本的就好了
  $ npm install --global gulp
  
  $ npm uninstall --global gulp

等待安装完毕就好了
这个全局环境一个电脑安装一次就好了
还是照例检查一下是否安装成功
```
$ gulp --version
```

使用 GULP

安装完毕以后，我们就可以使用 GULP 对我们的项目进行自动化构建了

首先我们要有一个项目

- gulp_demo    项目文件夹
  - src        项目源码
    + css      css 文件夹
    + js       js 文件夹
    + pages    html 文件夹
    + sass     sass 文件夹
    + lib      第三方文件夹

目录结构不一定都是这个样子
但是最好是一个便于管理的文件夹目录结构
因为是一个项目了，最好使用 npm 来帮我们管理一下
- 这样可以记录我们的下载使用了那些依赖
所以在项目文件夹 gulp-demo 里面执行一个 npm 初始化
```
$ cd gulp_demo
$ npm init -y
```
执行完毕之后，再来看一下我们的项目目录
```
- gulp_demo
  + src 
  + package.json
```

项目 GULP 配置

我们之前已经安装过 gulp 全局依赖了
但是每一个项目都要在安装一次 gulp 的项目依赖
因为每一个项目的打包构建规则都不一样，所以不能全都配置成一个
所以我们要在项目里面再次进行 gulp 安装
```
$ cd gulp_demo
$ npm install -D gulp
```
- 项目中的 gulp 依赖要和全局 gulp 环境保持版本一致
接下来就是对这个项目进行打包构建的配置
gulp 的使用，要在项目目录下新建一个 gulpfile.js
在这个 gulpfile.js 文件里面进行配置
然后使用 gulp 进行构建的时候就会按照 gulpfile.js 文件里面的规则进行打包构建

再来看一下我们的目录结构

- gulp_demo
  + node_modules         依赖包目录
  + src                  项目源码
  + gulpfile.js          gulp 配置文件
  + package-lock.json    依赖下载版本 json 文件
  + package.json         项目管理 json 文件

接下来我们就是在 gulpfile.js 文件里面进行配置，让我们的打包构建可以生效

打包 CSS 文件

我们从简单的内容开始，先来打包构建 css 文件
其实就是在 gulpfile.js 里面进行一些配置

第一个事情就是引入 gulp

// 我是 gulpfile.js 文件

// 1. 引入 gulp
const gulp = require('gulp')

gulp 是基于任务来完成构建的

所以我们要创建一个打包 css 的任务

// 我是 gulpfile.js 文件

// 1. 引入 gulp
const gulp = require('gulp')

这个时候我们自己完成不了，就需要借助一个第三方依赖
- npm i -D gulp-cssmin

下载完毕以后，去文件中进行配置

const cssHandler = function() {
     
     return gulp.src('./src/css/*.css')
     .pipe(cssmin())
     .pipe(gulp.dest('./dist/css'))
}
module.exports = {
     
     cssHandler