入坑之前,得明白gulp 到底是什么,能为你解决什么问题?

什么是 gulp?

仔细看官网的介绍:

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于Node.js
构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务
的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的;

实际上就是用自动化增强你的工作流程的一个工具,让你把更多的时间用于开发,而不是放在文件的整理上. 使用了 gulp之后,就相当于给你的项目请了一个保姆,帮你干那些琐碎的杂事;

gulp 的安装

gulp是依赖于 nodejs 的一个工具,因此首先得安装 Nodejs,这里放的是 nodejs 中文网的地址;
确认装好了 node 之后,创建一个项目目录;
打开项目目录,npm 初始化项目:

npm init -y

到这一步项目已经初始化好了,接着安装 gulp为开发依赖:

yarn add gulp -D

安装完成,在项目根目录创建 gulpfile.js文件, 在 package.json文件添加一个 gulp 命令:

    "gulp": "gulp"

API

gulp.src()

找到源文件的路径;

gulp.dest()

找到目的文件路径,如果这个文件不存在,则会自动创建;

gulp.pipe()

程序运行的管道;

demo

gulpfile.js文件


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

// 引入工具
const {delDir} = require('./utils/index')

function moveHtml(){
    // 先删除旧的文件夹再移动,当然有现成的可以不用自己写
    delDir('dist')
        return src('./src/*.html')
        .pipe(dest('dist/'))
}

exports.default = moveHtml;

Gulp4 入坑指南