一、gulp介绍

gulp是前端项目自动化构建工具，可以完成前端文件的复制、合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务。

二、全局安装gulp

npm install gulp -g // 全局安装gulp
gulp -v // 检查gulp版本

三、创建一个新项目并安装gulp

npx mkdirp my-project  // 创建项目目录
cd my-project  // 进入项目目录
npm init // 创建package.json文件
npm install gulp --save-dev // 在项目下安装gulp，作为开发时依赖项
gulp -v // 检查gulp版本

四、创建前端文件以及自动化构建任务

1.创建文件夹，存放需要处理的文件,本次创建了page文件夹

2.创建gulpfile.js文件

下面以仅实现复制任务为例，在gulpfile.js文件输入以下内容：

exports.default = function() {
    return src(["page/*.js","page/*.html"])
        .pipe(dest('output/'));
}

3.执行gulp命令

gulp

输出的文件存在于output文件夹当中