GULP详解自动化打包压缩工具（怎么打包压缩js，怎么打包压缩css，怎么打包压缩html，怎么打包压缩sass等）

本文链接：https://blog.youkuaiyun.com/EVILORHERO/article/details/120423015

本文详细介绍了GULP作为自动化打包构建工具的使用，包括安装、配置和执行任务，如打包CSS、SASS、JS文件，压缩HTML，处理LIB和STATIC文件，以及自动刷新和代理配置。通过GULP，开发者可以实现项目文件的自动化压缩和优化，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GULP

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

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

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

安装 GULP

gulp 是一个依赖于 node 的环境工具
所以我们需要先安装一个 全局 gulp 依赖

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

# 使用 npm 安装全局依赖 gulp
$ npm install --global gulp

等待安装完毕就好了
这个全局环境一个电脑安装一次就好了
还是照例检查一下是否安装成功
```
$ gulp --version
```
依赖包学习地址 https://www.npmjs.com

使用 GULP

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

首先我们要有一个项目

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

目录结构不一定都是这个样子
但是最好是一个便于管理的文件夹目录结构
因为是一个项目了，最好使用 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')


// 2. 创建一个 css 的任务
//   gulp.task() 是用来创建任务的
//   参数一： 任务名称
//   参数二： 一个函数（这个任务要做什么事情）
gulp.task('css', function () {
     
    
})

有了任务以后，我们就要在 css 这个任务里面写一些这个任务要做的事情了
我们要把 ./src/css/所有css文件 都进行压缩处理
这个时候我们自己完成不了，就需要借助一个第三方依赖
- npm i -D gulp-cssmin

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

// 我是 gulpfile.js 文件

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

// 2. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')

// 3. 创建一个 css 的任务
gulp.task('css', function () {
     
    return gulp
    	.src('./src/css/**')   // 对哪些文件进行操作
    	.pipe(cssmin())        // 都做什么，这里做的就是进行 css 压缩
    	.pipe(gulp.dest('./dist/css'))  // 把压缩完毕的文件放在 dist 文件夹下的 css 文件夹   
})

gulp.src() 是指找到那些文件对其操作
gulp.pipe() 是指要做什么
gulp.dest() 是指输出到哪个目录下，如果没有这个目录存在会自动创建这个目录
所以上面哪个 css 任务的意思就是
- 把 ./src/css/ 目录下的所有文件
- 进行压缩
- 压缩完毕后放在 ./dist/ 下的 css/ 文件夹下

接下来，就是执行一下这个叫做 css 的任务就行了
直接在控制台使用指令
```
# 表示运行 gulpfils.js 配置文件中的 css 任务
$ gulp css
```
- 执行完毕以后，就会在 gulp_demo 目录下生成一个 dist/ 文件夹
- 里面就有我们压缩好的 css 文件

自动添加前缀

我们希望在 css 压缩之前，能帮我自动把需要前缀的属性 自动把前缀添加上 就好了
这个是可以做到的
我们又需要一个依赖了
- npm i -D gulp-autoprefixer

安装完还是去到文件中进行配置

// 我是 gulpfile.js 文件

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

// 2. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')

// 3. 引入 gulp-autoprefixer 
const autoPrefixer = require('gulp-autoprefixer')
 
// 4. 创建一个 css 的任务
gulp.task('css', function () {
     
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
     
        	 overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
    	}))
    	.pipe(cssmin())       
    	.pipe(gulp.dest('./dist/css'))  
})

因为添加前缀需要在压缩之前添加
所以我们就直接在任务里面多做一个事情就行了

打包 SASS 文件

接下来我们解决一下 sass 的问题
因为有的时候我们开发要使用 sass 所以我们要解决一下 sass 的问题
其实打包 sass 和 css 差不多，只不过先要把 sass 解析成 css
1. 把 sass 解析成 css
2. 自动添加前缀
3. 压缩一下
4. 放到对应的文件夹中
使用 gulp 解析 sass 文件需要用到一个依赖
- npm i -D gulp-sass
- 报错，需要下载node-sass作为其依赖包
- npm i -D node-sass@4.14.1 然后再去下载gulp-sass依赖

然后我们就去到配置文件里面进行配置就好了

// 我是 gulpfile.js 文件

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

// 2. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')

// 2-1. 引入 gulp-autoprefixer 
const autoPrefixer = require('gulp-autoprefixer')

// 2-2. 引入 gulp-sass
const sass = require('gulp-sass')
// 2-1. 创建一个 css 的任务
gulp.task('css', function () {
     
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
     
        	overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
    	}))
    	.pipe(cssmin())       
    	.pipe(gulp.dest('./dist/css'))  
})
// 2-2. 创建一个 sass 任务
gulp.task('sass', function () {
     
    return gulp
    	.src('./src/sass/**')
    	.pipe(sass())
    	.pipe(autoPrefixer({
     
        	overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
    	}))
    	.pipe(cssmin())
    	.pipe(gulp.dest('./dist/css'))
})

我们的 sass 文件编译完以后也是 css 文件，所以就也放在 css 文件夹下就好了
就是要注意一下别和本来 css 文件夹下的文件重名就好了

然后就可以去命令行执行 sass 这个任务了
```
# 执行 sass 任务
$ gulp sass
```

打包 JS 文件

接下来就是打包一下 js 文件了
其实套路是一样的
先来做最简单的操作
压缩一下 js 文件
需要用到一个依赖
- npm i -D gulp-uglify

然后依旧是去到配置文件中进行配置

// 我是 gulpfile.js 文件

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

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

// 2-2. 引入 gulp-autoprefixer 
const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')

// 2-1. 创建一个 css 的任务
gulp.task('css', function () {
     
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
     
        	overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
    	}))
    	.pipe(cssmin())       
    	.pipe(gulp.dest('./dist/css'))  
})

// 2-2. 创建一个 sass 任务
gulp.task('sass', function () {
     
    return gulp
    	.src('./src/sass/**')
    	.pipe(sass())
    	.pipe(autoPrefixer({
     
        	overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
    	}))
    	.pipe(cssmin())
    	.pipe(gulp.dest('./dist/css'))
})

// 3. 创建一个 js 任务
gulp.task('js', function () {
     
    return gulp
    	.src('./src/js/**')
    	.pipe(uglify())
    	.pipe(gulp.dest('./dist/js'))
})

然后我们去命令行执行 js 这个任务
```
# 执行 js 任务
$ gulp js
```

编译 ES6 语法

之前我们学习 es6 的时候就说过
很多浏览器不是很认识 es6 的语法
我们要把他编译成 es5 的语法
所以我们在打包 js 文件的时候，就要转换一下
我们依旧是使用依赖来完成，只不过 es6 转 es5 需要三个依赖
- npm i -D gulp-babel@7.0.1
- npm i -D babel-core
- npm i -D babel-preset-es2015

然后我们就去配置文件里面进行配置就可以了

// 我是 gulpfile.js 文件

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

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

// 2-2. 引入 gulp-autoprefixer 
const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')

// 3-2. 引入 gulp-babel
//      es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了
const babel = require('gulp-babel')

// 2-1. 创建一个 css 的任务
gulp.task('css', function () {
     
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
     
        	overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
    	}))
    	<