Gulp-前端项目构建工具

前言

最近开发前端Vue工程，打包的时候发现 npm run build 使用的是 gulp ，之前都没有用过（自身是后端，现在前端也需要自己写，苦逼-_-），出于自己的好奇心，学习了一下，探究 Gulp 到底是个什么东东。

Gulp 初识

学习一门技术，最好的渠道就是官网：
英文：https://gulpjs.com
中文：https://www.gulpjs.com.cn/

快速开始

检查本地环境是否正确，这里不做过多描述，具体内容查看地址：https://www.gulpjs.com.cn/docs/getting-started/quick-start

gulpfile 是项目目录下名为 gulpfile.js （或者首字母大写 Gulpfile.js，就像 Makefile 一样命名）的文件，在运行 gulp 命令时会被自动加载。在这个文件中，你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 gulp API，除此之外，纯 JavaScript 代码或 Node 模块也会被使用。任何导出（export）的函数都将注册到 gulp 的任务（task）系统中。

创建任务

task 相关 API请参考官网，有详细描述：https://www.gulpjs.com.cn/docs/api/task

var gulp = require('gulp');
var version     = '';
var versionPath = ''; 

// 创建版本号目录
gulp.task('create:versionCatalog', function () {
  return gulp.src(`${distPath}/static/**/*`)  // src函数指定文件路径
    .pipe(gulp.dest(`${versionPath}/static/`)) // pipe 是指将文件存储到内存中；dest 函数代表输出文件到指定地址
});

Gulp插件

可以选择使用指定的插件，按需引入；也可以引入一个插件库，比如：
按需引入：

const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    // gulp-uglify 插件并不改变文件名
    .pipe(uglify())
    // 因此使用 gulp-rename 插件修改文件的扩展名
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

引入插件库，然后使用：

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();  //主要是这一行代码，注意后面的括号，是一个函数

//使用时，直接 $.函数名  即可 $.replace()
gulp.task('replace:cdnUrl', function () {
  return gulp.src(`${versionPath}/static/js/manifest.js`)
    .pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"'))
    .pipe(gulp.dest(`${versionPath}/static/js/`))
});

还有很多 API 都可以直接去参考官方地址，描述的很详细，这里只是简单记录，了解 gulp 是干啥的，怎么用，不进行深入探究。