Gulp的基本使用

初次在项目中使用Gulp

当完成上面的步骤以后，就可以正式的在项目中使用Gulp了。
首先我们在Node.js command prompt控制台中输入命令gulp。我们会看到下面的结果。

他说我们缺少了gulpfile，那这个gulpfile是用来干嘛的呢？
gulpfile就相当于我们请来的保姆，我们现在需要创建一个gulpfile.js的文件来告诉我们的gulp现在应该要干嘛。

创建一个gulpfile.js的文件

gulpfile.js是专门用在gulp编写任务上的一个文件。那么该如何使用呢？
首先，我们在根目录下创建一个叫gulpfile.js的文件。不能叫别的名字，只能叫gulpfile.js。
给gulp编写任务，它有一定的语法规范——commonJS规范。如果你想使用其中的某一个模块，那么你可以使用一个叫require()的函数，将这个模块引入。引入之后就可以使用这个模块上的函数。

编写gulpfile.js

一、首先，我们需要引入gulp。

这里我们使用的是const去定义gulp变量，原因就是我们不希望gulp变量的名称被改变，const声明的变量刚好没办法修改。

const gulp = require("gulp");    //引入gulp

二、使用gulp来编写第一个函数。

我们回到控制台输入命令gulp 任务名这样我们能在控制台上看到执行结果hello world。

//编写第一个任务
/* 
    第一个参数：任务的名字  自定义
    第二个参数：回调函数，任务执行的功能
*/
gulp.task("hello",function(){
    console.log("hello world");
})    //使用gulp hello命令在控制台执行

注意：我这里出现了报错，原因就是我的Gulp版本过低（我这里用的是3.9.1）或者是Node.js的版过高（我用的是12.18.3）。解决的办法就是升级Gulp的版本（不建议，因为Gulp的4.0.0版本语法和之前的不一样）或者是卸载Node.js安装低版本11.0.0来解决。
注意：我们的gulp编写的任务是直接通过控制台运行的，所以我们不需要在html文件里引入gulp，但是我们在gulp任务里不能执行DOM和BOM的语法，只能执行ECMAScript的语法。

三、介绍gulp自带的函数

1. gulp.src() 找到源文件路径。
2. gulp.dest() 找到目的文件路径，如果没有的话会自动帮你创建一个。
3. pipe() 可以理解为运行的管道 ```javascript //2.静态文件 拷贝图片 gulp.task(“images”,function(){ //只拷贝.jpg格式 return gulp.src(“img/.jpg”).pipe(gulp.dest(“dist/images”)); //拷贝.jpg和.png格式 return gulp.src(“img/.{jpg,png}”).pipe(gulp.dest(“dist/images”)); //拷贝文件夹里的内容 return gulp.src(“img//“).pipe(gulp.dest(“dist/images”)); //拷贝所有内容 return gulp.src(“img/*/“).pipe(gulp.dest(“dist/images”)); })

//3.拷贝多个文件到一个目录中 gulp.task(“data”,function(){ //除去xml文件下的04.xml return gulp.src([“json/.json”,”xml/.xml”,”!xml/04.xml”]) .pipe(gulp.dest(“dist/data”)); })

//4.一次性执行多个任务的操作 gulp.task(“build”,[“copy-html”,”images”,”data”],function(){ console.log(“任务执行完毕”); }) //注意：异步并行去处理多个文件，效率快。

<a name="Ytv0g"></a>
### 四、启动gulp的监听
为什么我们要启动gulp监听？当我们在外部文件数据进行改变的时候，如果不启动gulp监听，那么我们则需要在Node.js command prompt中再次执行`gulp 文件名称`才能对gulp下的文件再次进行修改。这样不能使我们带来便利。于是就启动gulp监听，这样的话，我们监听到有文件改变了的时候，就会自动的进行更新。启动gulp监听的命令是`gulp watch`，每次触发gulp监听都会在控制台进行显示。
```javascript
/* 
    监听，如果监听到文件有改变，会自动去执行对应的任务，更新数据
*/
gulp.task("watch",function(){
    /* 
        第一个参数，是文件监听的路径    
        第二个参数，是我们要去执行的任务，必须是数组的形式传入
    */
   gulp.watch("index.html",["copy-html"]);
   gulp.watch("img/**/*",["images"]);
   gulp.watch(["json/*.json","xml/*.xml","!xml/04.xml"],["data"]);
})