Gulp构建工具

Gulp构建工具

前言：gulp是一个基于流的，轻量的前端构建工具，常用于打包一些第三方的库，插件等。我将一部分的使用方法做一个简单的介绍和笔记。

一、安装

首先全局先安装gulp-cli工具

npm i gulp-cli -g

创建一个项目

npx mkdirp demo-gulp
cd demo-gulp
npm init -y
npm i gulp -D

检查gulp的版本，以下是根据gulp4.0以上的

二、gulpfile.js

在根目录下创建一个gulpfile.js的文件，这个是gulp用来打包的配置文件，就像webpack在打包时是根据webpack.config.js的配置进行打包的。此时它们的作用实际上是一样的。

概念：公开任务和私有任务
在gulp打包的过程中，我们需要创建一个又一个的任务，每一个任务负责一个编译的过程，比如我们想要将所有的less文件进行转译，将其转译为css，我们实际上就可以创建一个任务，在gulp中我们称其为一个task。而整个构建过程就是由一个又一个的task去构成的。

在所有的任务中又分为公开任务和私有任务。

公开任务是指暴露在外部可以通过指令进行调用的那些任务
私有任务是指仅仅在内部调用，不能在外部通过指令调用的任务。

说了这么多我们来了解一下一个完整的构建流程吧！
创建一个结构

|--src
|---- index.js
|---- other.js
|--gulpfile.js

在gulpfile.js中

const gulp,{ src, dest ,series} = require('gulp');
const handleJs = function (){
  return  src('src/*.js')
    .pipe(dest('output/'))
}

exports.default = series(handleJs)

然后在命令行中输入

gulp

就会进行一个构建，只不过这样的构建没有任何意义，因为我们并没有添加任何的插件，而想要完成什么样的构建任务就是靠着不同的插件去完成的。

三、插件

1.gulp-concat

一看这个名字就知道这个是合并文件的。

npm i gulp-concat -D

使用：

// gulpfile.js
const gulp,{ src, dest ,series} = require('gulp');
const concat = require('gulp-concat')
const handleJs = function (){
  return  src('src/*.js')
    .pipe(concat('merge.js'))
    .pipe(dest('output/'))
}

exports.default = series(handleJs)

可以看到最终会生成一个merge.js，然后两个js文件的内容就已经被合并了。

2.gulp-uglify

这个是用来压缩文件的，将文件进行压缩可以减少文件的大小，更有利于在网络中的传输效率。

npm i gulp-uglify -D

使用：

// gulpfile.js
const gulp,{ src, dest ,series} = require('gulp');
const uglify = require('gulp-uglify')
const concat = require('gulp-concat')
const handleJs = function (){
  return  src('src/*.js')
    .pipe(uglify())
    .pipe(concat('merge.js'))
    .pipe(dest('output/'))
}

3.gulp-rename

压缩完毕之后，还要进行重命名这样可以便于区分，一般我们会加一个min。

npm i gulp-rename-D

使用：

// gulpfile.js
const gulp,{ src, dest ,series} = require('gulp');
const rename = require('gulp-rename')
const uglify = require('gulp-uglify')
const concat = require('gulp-concat')
const handleJs = function (){
  return  src('src/*.js')
    .pipe(concat('merge.js'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(dest('output/'))
}

构建成功之后，可以看到output文件夹下就有一个merge.min.js文件，这个文件就是经过合并，压缩，重命名后的文件了，而这就是gulp的构建流程。相关的插件还有很多，这里就不进行一一介绍了，我把查看插件相关的链接奉上。查看插件点这里

四、文件监控

gulp特别像webpack打包项目一样，有丰富的自动化工具，比如可以对文件进行监听，如果文件发生了改变，可以自动进行编译，这样子我们就不用每次都进行命令式的手动构建，完全可以实现自动的构建。

const { watch, series } = require('gulp');

function clean() {
  // do something
}

function javascript() {
  // do something
}

function css() {
  // do something
}

// 可以只关联一个任务
watch('src/*.css', css);
// 或者关联一个任务组合
watch('src/*.js', series(clean, javascript));

好了以上便是整理的部分笔记，还是需要更加的完善一些的，不过gulp本身就式比较轻量的，详细的还是需要看一下官网