Gulp 入门指南

前言

明天就要晋升答辩了，今天写篇入门 Wiki 压压惊吧，正好最近想学构建工具之类的东西，Gulp 好像就很合适

Glup 是什么？

Gulp 有狼吞虎咽的意思。

官方【https://gulpjs.com/docs】解释

gulp 是一个工具包，用于在开发工作流程中自动化繁琐或耗时的任务，因此您可以避免混乱并构建一些东西。

直白来说，就是一个构建工具。常用来制作开发脚手架，生产模版～

Get Started

Node 环境

首先，检查 node、npm 和 npx 是否正确安装

全局安装

npm install gulp-cli -g

创建项目目录并进入

mkdir gulp-project & cd gulp-project

在项目目录下创建 package.json 文件

npm init

安装 gulp，作为开发时依赖项

npm install --save-dev gulp

创建 gulpfile 文件

利用任何文本编辑器在项目大的根目录下创建一个名为 gulpfile.js 的文件，并在文件中输入以下内容：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

测试

在项目根目录下执行 gulp 命令：

gulp

输出

[17:16:32] Using gulpfile ~/WebProjects/gulp-project/gulpfile.js
[17:16:32] Starting 'default'...
[17:16:32] Finished 'default' after 1.37 ms

高级用法

文件监控和处理

使用 watch，监听文件变化，将 src 目录的 js 文件复制到 output 目录下。

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

function streamTask() {
  return src('src/**/*.js')
    .pipe(dest('output'));
}
// 创建一个任务
gulp.task('watch', function () {
  watch('src/*.js', streamTask);
})

似乎非常方便，封装了 chokidar

写在最后

可以集成 rollup，webpack 等 node api，做一个 hotreload

参考

• https://www.gulpjs.com.cn/docs/getting-started/quick-start/