快速入门Gulp，从安装到使用

前言

Gulp是一个前端自动化构建工具，可以将项目中的js，css，图片做压缩格式化处理。sass或less格式的文杰也能够通过Gulp自动编译为css。多页面项目或者标准的website一般都要使用Gulp来实现自动化构建，而单页应用往往使用webpack。

安装

1. 安装node.js

Gulp基于node.js运行，使用Gulp前需先构建node环境。

nodejs下载地址

node -v
npm -v

安装完成后在cmd查看node和npm的版本，均返回证明安装成功。

2. 安装Gulp

先全局安装Gulp脚手架

npm i gulp-cli -g

安装完成后查看版本

gulp -v

在项目中使用

1. 初始化项目

打开一个项目

npm init 

初始化该项目，生成package.json文件

npm i gulp -save-dev

安装Gulp，成功后可在package里看到gulp和其版本

在项目根目录新建gulpfile.js文件，Gulp相关的所有逻辑都在该文件中编写。

2. 在项目中使用

假设我们现在有个结构如下的项目

├── css
├── images
|    └── logo.png
├── js
│    └── index.js
├── scss
│    └── index.scss
├── gulpfile.js
├── index.html
└── package.json

需要通过Gulp构建制品，打包时需要将scss文件编译为css文件，并且压缩js和图片，打包完成后构建dist制品包在根目录。

2.1 压缩js代码

gulpfile.js中实现的代码如下：

const { src, dest } = require('gulp')

function defaultTask() {
  return src('js/*.js') // 输入文件目录
    .pipe(dest('dist/js/')) // 输出文件目录
}

exports.default = defaultTask

运行一下（终端输入 gulp 回车），发现根目录已经生成了一个dist文件夹，文件夹下的js目录和根目录js文件夹下的js文件一模一样，但是并没有压缩处理，所以我们需要加一些操作。

npm i gulp-uglify -save-dev

运行以上指令，gulp-uglify是压缩js的组件

const { src, dest } = require('gulp')
const uglify = require('gulp-uglify') // 引入gulp-uglify组件

function defaultTask() {
  return src('js/*.js')
    .pipe(uglify()) // 压缩文件
    .pipe(dest('dist/js/'))
}

exports.default = defaultTask

运行上方代码，发现js已经压缩，我们第一步就完成了。

2.2 将scss文件编译为css文件

编译sass需要引入gulp-sass组件，需要注意的是，gulp-sass是不包含sass编译器的，所以我们项目中需要先引入sass，再安装gulp-sass组件

npm i sass -save-dev

npm i gulp-sass -save-dev

安装完sass和gulp-sass，就可以在gulpfile.js中实现编译sass的代码了

const { src, dest } = require('gulp')
const sass = require('gulp-sass')(require('sass')) // 这里需要注意，需要同时引入sass

function defaultTask() {
  return src('scss/*.scss')
    .pipe(sass()) 
    .pipe(dest('dist/css/'))
}

exports.default = defaultTask

运行后，dist中css目录下就有scss目录下scss文件生成的css文件了

2.3 压缩图片

非常实用的功能，设计小姐姐切的图太大怎么办？一个个压缩太费时，交给gulp，自动压缩图片打包生成制品

引入gulp-imagemin组件(比较大，耐心点)

npm i gulp-imagemin@7.0.0 -save-dev

这里gulp-imagemin组件使用老版本，因为新版本不能用require导入

逻辑和上面的一样

const { src, dest } = require('gulp')
const imagemin = require('gulp-imagemin')

function defaultTask() {
  return src('images/*.*')
    .pipe(imagemin())
    .pipe(dest('dist/images/'))
}

exports.default = defaultTask

运行后图片压缩到了dist/images/目录下

3. 进阶用法

我们的目的是实现了，压缩js和图片，编译sass，但是实际项目还是少点什么。我们在写代码时，其实是需要scss实时编译成css的，然后打包生成的制品也需要把html文件放进去，这样直接上传制品到服务器就行了，下面我们就来讲讲gulp的监听和task任务打包。

3.1 gulp监控文件变化

这就需要引入watch方法了，该方法可以监控文件的变化，并在变化后给出回调函数，我们可以在监听到文件发生变化后，将scss文件编译为css文件，代码如下

const { src, dest } = require('gulp')
const { watch } = require('gulp')
const sass = require('gulp-sass')(require('sass'))

function defaultTask() {
  watch(['scss/*.scss'], function () {
    return src('scss/*.scss')
      .pipe(sass())
      .pipe(dest('css/'))
  })
}

exports.default = defaultTask

这样我们每次更改了scss文件，都会实时更新到css中，样式也就实时生效了

3.2 打包生成完整的dist

我们现在要做的，就是通过gulp生成完整的制品，上传到服务器就能用的那种，所以我们需要做到，只输入一个指令，就能够完成js，scss，img，html的所有操作，这就需要用到task

task是系统定义的任务，可以定义多个，通过不同的taskName选择性调用，可通过命令行或者series调用不同的task

const { src, dest, task, series } = require('gulp')
const imagemin = require('gulp-imagemin')
const sass = require('gulp-sass')(require('sass'))
const uglify = require('gulp-uglify')

task('gulp-scss', function () {
  return src('scss/*.scss').pipe(sass()).pipe(dest('dist/css/'))
})

task('gulp-image', function () {
  return src('images/*.*').pipe(imagemin()).pipe(dest('dist/images/'))
})

task('gulp-js', function () {
  return src('js/*.js').pipe(uglify()).pipe(dest('dist/js/'))
})

exports.default = series('gulp-js', 'gulp-scss', 'gulp-image')

我们为每一个操作创建了一个task，运行gulp时再通过series运行这些操作，所有文件就都打包到dist中了

3.3 通过命令行实现不同操作

其实在日常开发中是需要这种操作的，开发过程中需要通过gulp将scss文件实时编译为css文件，当开发完成后需要发布时，需要gulp打包成制品发布到线上，但是gulpfile只有一个，我们仍然可以通过task完成上述操作

const { src, dest, task, series } = require('gulp')
const { watch } = require('gulp')
const imagemin = require('gulp-imagemin')
const sass = require('gulp-sass')(require('sass'))
const uglify = require('gulp-uglify')

task('gulp-scss', function () {
  return src('scss/*.scss').pipe(sass()).pipe(dest('dist/css/'))
})

task('gulp-image', function () {
  return src('images/*.*').pipe(imagemin()).pipe(dest('dist/images/'))
})

task('gulp-js', function () {
  return src('js/*.js').pipe(uglify()).pipe(dest('dist/js/'))
})

task('watch-scss', function () {
  watch(['scss/*.scss'], function () {
    return src('scss/*.scss').pipe(sass()).pipe(dest('css/'))
  })
})

exports.default = series('gulp-js', 'gulp-scss', 'gulp-image')

在上述代码中，我们定义了名为watch-scss的task任务，只需要通过命令行gulp scss-change就能完成监听scss文件变化的操作，在通过gulp命令打包，就可以了。

我们可以把这两条命令放在package.json文件中

"scripts": {
  "dev": "gulp watch-scss",
  "build": "gulp"
}

这样，我们只要在命令行中输入

npm run dev // 监听样式变化
npm run build // 打包文件

总结

Gulp的入门就大概这些，掌握了这些知识，就能够简单的通过Gulp完成开发编译和打包了，腿腿目前写的官网用的就是Gulp，由于官网的逻辑并不复杂，所以使用深度也比较浅，而业务技术较为复杂的后台管理系统使用的是Vue，那就要用到webpack了，这个我可能之后会开一篇文章简单讲一下。