gulp4入门教程

Webpack?

刚从隔壁Webpack弃坑过来，觉得Webpack强大而又复杂，使用难度系数有点高，本人目前项目中需要的功能就是less->css、autoprefixer和babel等，感觉这点需求用Webpack来解决，有点杀猪焉用宰牛刀了。然后发现gulp好像不错，易用简单，它这种流水线式的构建前端项目模式很适合我这种单线程的脑瓜，不多说了，下面开始码吧！

什么是Gulp？

gulp是新一代的前端项目构建工具，你可以使用gulp及其插件对你的项目代码（less,sass）进行编译，还可以压缩你的js和css代码，甚至压缩你的图片，gulp仅有少量的API，所以非常容易学习。 gulp使用 stream方式处理内容。和Webpack一样，Gulp也是需要运行于Node环境的，Node出来后催生了一批自动化工具，像Webpack，Bower，Yeoman，Grunt等。

初始化Gulp项目

因为gulp是需要运行于Node环境，所以你需要在你的终端上安装好npm。npm是node.js的包管理器，所以先在你的机子上安装好node.js吧

gulp全局安装

npm i gulp -g

初始化项目，生成package.json

// 配置默认即可
npm init

安装本地（作为开发依赖项）gulp

npm i gulp -D

npm命令说明

npm i xxx -S是 npm install xxx --save的简写(写入到 dependencies对象)
npm i xxx -D是 npm install xxx --save-dev的简写(写入到 devDependencies对象)
npm i xxx -g是 npm install xxx --global的简写(全局安装)

安装好后输入 gulp -v可查看gulp版本

Gulp的API

gulp4在gulp3的基础上新增了几个函数，但它的使用依旧简单方便。一共如下10个：

• gulp.src() –全局匹配一个或多个文件
• gulp.dest() –将文件写入目录
• gulp.symlink() –与dest相似，但是使用软连接形式
• gulp.task() –定义任务
• gulp.lastRun() –获得上次成功运行的时间戳
• gulp.parallel() –并行运行任务
• gulp.series() –运行任务序列
• gulp.watch() –当文件发生变化时做某些操作
• gulp.tree() –获得任务书树
• gulp.registry() –获得或注册任务

详情参见Gulp官方API文档：https://gulpjs.com/docs/en/api/concepts

开始构建项目

在项目根目录下新建一个gulpfile.js文件

首先我们来实现下less转css、gulp-rename和css前缀gulp-autoprefixer

如果你使用是的是scss、sass或stylus等其它动态样式语言的找对应的插件就可以了

npm i gulp-less gulp-rename gulp-autoprefixer -D

在根目录下新建src/styles/index.less文件

// index.less

@color: red;

.main {
  color: @color;
  display: flex;
  justify-content: center;
  align-items: center;
}

// gulpfile.js

const gulp = require('gulp');
const less = require('gulp-less');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
  return gulp.src('src/style/*.less')
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(rename({ suffix: '.min' })) // .css前加前缀.min
        .pipe(gulp.dest('dist/style'))
});

在package.json中加入以下代码用于autoprefixer

"browserslist": [
  "defaults",
  "> 1%",
  "last 2 versions",
  "not ie <= 8",
  "ios > 7"
]

运行 gulp styles命令后我们来看下生成的css文件

OK，less部分完成，gulp-rename插件更多使用方法参见https://github.com/hparra/gulp-rename

Babel实现ES6转ES5

安装babel

# Babel 7安装方法
$ npm i gulp-babel @babel/core @babel/preset-env -D

# Babel 6安装方法
$ npm i gulp-babel@7 babel-core babel-preset-env -D

注意：babel编译时只转换语法，几乎可以编译所有时新的 JavaScript语法，但并不会转化BOM里面不兼容的，比如API、Promise、Set、Symbol、Array.from、async等等的一些API这时候就需要 polyfill来转化这些API，所以我们需要进行以下安装

详细信息可以参见这篇文章

$ npm i @babel/plugin-transform-runtime -D
$ npm i @babel/runtime -S

根目录下新建babel.config.js

// babel.confgi.js

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-transform-runtime']
};

安装JS压缩插件(gulp-uglify)和JS合并插件(gulp-concat)

npm i gulp-uglify gulp-concat -D

新建src/js/index.js和src/js/utils.js两个文件

// index.js

const asyncFunc = function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('123');
    },1000);
  });
}

const handle = async function() {
  const data = await asyncFunc();
  console.log(add(data, 5));
}

handle();

// utils.js

function add (a, b) {
  return a + b;
}

// gulpfile.js

const gulp = require('gulp');
const rename = require('gulp-rename');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

gulp.task('scripts', function() {
  return gulp.src('src/js/*.js')
        .pipe(concat('app.js')) // 将js文件夹下的所有js文件合并至app.js
        .pipe(babel())
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/js'))
});

执行 gulp scripts命令，生成后的代码如下

// dist/js/app.min.js

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"),
  _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")),
  _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")),
  asyncFunc = function () {
    return new Promise(function (e, r) {
      setTimeout(function () {
        e("123")
      }, 1e3)
    })
  },
  handle = function () {
    var e = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function e() {
      var r;
      return _regenerator.default.wrap(function (e) {
        for (;;) switch (e.prev = e.next) {
          case 0:
            return e.next = 2, asyncFunc();
          case 2:
            r = e.sent, console.log(add(r, 5));
          case 4:
          case "end":
            return e.stop()
        }
      }, e)
    }));
    return function () {
      return e.apply(this, arguments)
    }
  }();

function add(e, r) {
  return e + r
}
handle();

以上就是转成ES5后的代码，未使用gulp-uglify插件处理

但是如果将生成的app.min.js引入到html文件中再浏览器上执行的话是会报错的，错误require is not defined，没错浏览器不支持require，我们需要Browserify插件将require的文件给合并进来

可以安装 gulp-module-bundle来实现。

task(parallel and series)

gulp4不再能够通过数组形式传入任务，你需要使用gulp.series()和gulp.parallel()来执行他们。例如：

gulp.task('default',gulp.parallel('styles','scripts'));//并行执行
gulp.task('default',gulp.series('styles','scripts'));//按顺序执行

总结

gulp这一路码下来确实很简单，但又突然感觉功能没Webpack强大，根据自己的需求而定吧！