gulp入门-安装以及使用

gulp是基于node平台开发的前端构建工具。

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

gulp的安装

1. 安装node环境
2. 打开命令行工具（这一步在哪里打开命令行都行，毕竟是要全局安装），全局安装gulp命令行工具 npm install gulp-cli -g
3. 创建项目文件夹，在该文件夹中打开命令行工具，然后输入npm init对项目进行初始化，设置项目的项目名、版本、描述信息等（当然也可以直接npm init -y采取默认值）。
4. 使用npm install --save-dev gulp 在项目根目录中下载gulp库文件
5. 在项目的根目录下建立gulpfile.js文件
6. 重构项目文件夹结构。创建src文件夹放置源代码文件，dist文件夹放置构建后的文件
7. 在gulpfile.js中编写任务

ps：命令行工具在指定文件夹内打开方式：
windows系统可以直接按住shift键同时在文件夹内点击鼠标右键唤出菜单，选择打开Powershell或者直接win+r打开cmd再使用cd将路径切换到当前路径

gulp的使用

在gulp4.0以前的版本，常常用gulp.task()方法进行任务的创建，但是task（）方法在4.0版本以后就不被推荐使用了，在现有版本的gulp中task还是可以使用的，但是导出exports将成为注册任务的主流方式

gulp中的任务分为私有任务和公有任务。
公有任务即在gulpfile.js中通过exports导出的任务，可以在命令行被gulp直接调用；而私有任务则是相对于公有任务来说，在gulpfile.js中没有被直接导出的任务，常常作为gulp.serise()和gulp.parallel()组合的组成部分被调用。

gulp的执行实质上gulp任务的执行。

公有任务的调用：
const gulp = require(‘gulp’);

function sayHi(cd) {
    console.log('hello');
    cd();
}
exports.sayHi = sayHi;

调用的时候直接通过命令行调用其任务名 gulp sayHi

而下面的sayYes函数就是一个私有任务，作为gulp.parallel的组成成员也可以被调用

const gulp = require('gulp');
function sayHi(cd) {
    console.log('hello');
    cd();
}
function sayYes(cd) {
    console.log('yes');
    cd();
}
exports.default = gulp.parallel(sayHi, sayYes);

在进行调用的时候直接调用组合名就行了，当组合名为default的时候可直接用gulp调用

gulp.series()和gulp.parallel()

这两种方法为gulp的两个组合方法，可以将多个任务组合并按照顺序或者并发的顺序执行

gulp.series() 任务按顺序执行

const gulp = require('gulp');
function sayHi(cd) {
    console.log('hello');
    cd();
}
function sayYes(cd) {
    console.log('yes');
    cd();
}
exports.default = gulp.series(sayHi, sayYes);

结果是按照参数顺序执行的

同样的做法放在gulp.parallel()里

exports.default = gulp.parallel(sayHi, sayYes);

二者是并发执行的

二者之间可以相互嵌套到任意深度

exports.default = gulp.series(sayHi, gulp.series(sayHi, sayYes););

这里就不多做陈述