gulp的种种

关于gulp的问题

文章是个人记载的笔记,如果有大神看到我哪里理解的不对的,欢迎指正,本人前端菜鸟一枚

前言:最近在使用ES6写一个彩票项目,使用了gulp来进行文件的预编译等的工作,没想到好多地方又忘了,这里写一个笔记巩固一下
我说明一下我的项目中的gulp的具体的流程
本文中有一些话是别人博客的原话,我会注明出处

我的文件目录是这样的

当我们打开命令行输入gulp --watch的时候,gulp会进入到gulpfile.babel.js文件,
文件里面的代码是这样的:

import requireDir from 'require-dir';

requireDir('./tasks');

通过我查的资料,我简要解释一下这两行代码
require-dir工具包:

使用gulpfile.js单文件编写任务，会造成文件过大，通过使用 require-dir 插件可以将任务分离到多个文件，同时也可以实现按模块编写任务
原文地址

具体的任务分别编写在 gulp/tasks 目录下的 js 文件中，其中必须有一个任务名字为 default，作为任务入口。
gulp 会根据 requireDir 提供的路径自动加载该目录下所有的任务，并找到任务 default 开始执行。

然后gulp进入到tasks中会找到必须存在的那个default文件后,
我文件里面的代码是:

import gulp from 'gulp';

gulp.task('default',['build']);

第一行代码不用解释了,解释一下第二行代码
task函数是gulp提供的一个执行任务的函数,
语法是:

gulp.task(name[, deps], fn)

name: 为任务名
deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn :为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。

根据我上面提供的代码,接下来执行build任务
build任务的代码
下面代码原文地址

import gulp from 'gulp';
import gulpSequence from 'gulp-sequence';

gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));

解释一下第二行代码:
gulpSequence是一个插件库,解释这个之前我要首先解释一下gulp另一个特点,
gulp虽然好用,但是它的所有的任务都是异步完成,恰好我们在项目中如果异步完成的话会有很多错误,具体啥错误我就不说了,所以就有了gulpSequence插件,
gulpSequence是国内开发的,如果你觉得国内的不好用,可以使用国外的run-sequence,我这里就只解释前者,因为我用的就是前者
gulpSequence同步的,逐一的去执行后面的任务就可以了
里面的各个任务就不解释了,里面的有一些插件的用途可以看这个大佬的
gulp常用插件描述