最近项目重构要使用gulp实现项目的自动化管理，所以到gulp官网简单的了解了一下基础知识，写这篇文章是想记录一下gulp知识点，方便以后查阅及温故知新。
一、gulp安装
gulp是基于node运行的自动化包管理工具，所以要想运行gulp必须先在电脑上安装node
1、全局安装gulp命令 : npm install --global gulp-cli
只有安装gulp命令行工具之后才能在命令行中使用gulp命令，安装后可使用gulp -v查看是否安装成功，打印出版本号即证明安装成功
2、局部安装gulp ： npm install --save-dev gulp
创建文件夹执行npm init -y把此文件夹初始化为npm包，生成package.json文件，在局部安装gulp
二、创建任务
在文件夹中创建gulpfile.js文件(可写成Gulpfile.js)，命令行中执行gulp命令会默认执行该文件；或者创建gulpfile.js文件夹，在该文件夹中创建index.js文件，执行gulp命令时会默认执行gulpfile.js文件夹中的index.js文件
编辑gulpfile.js文件
const { series } = require('gulp');
// `clean` 函数并未被导出（export），因此被认为是私有任务（private task）。
// 它仍然可以被用在 `series()` 组合中。
function clean(cb) {
// body omitted
cb();
}
// `build` 函数被导出（export）了，因此它是一个公开任务（public task），并且可以被 `gulp` 命令直接调用。
// 它也仍然可以被用在 `series()` 组合中。
function build(cb) {
// body omitted
cb();
}
exports.build = build;
exports.default = series(clean, build);
执行gulp命令会默认执行export.default导出的任务，若执行build任务需要执行gulp build命令,之前版本的gulp需要通过执行task()方法把函数注册为任务，这个函数依然可以使用，但是新版本提供了导出自动注册任务的方式
三、常用方法
1、src()和dest()
src方法接受一个glob或glob数组参数，glob是由普通字符和/或通配字符组成的字符串，用于匹配文件路径
const { src, dest } = require('gulp');
function streamTask() {
return src('*.js')
.pipe(dest('output'));
}
exports.default = streamTask;
2、series()和parallel()
两个方法的作用是组合执行任务，区别在于前者按顺序执行任务，后者并发执行任务，两者可以任意嵌套并且不限制嵌套深度
const { series, parallel } = require('gulp');
function clean(cb) {
// body omitted
cb();
}
function cssTranspile(cb) {
// body omitted
cb();
}
function cssMinify(cb) {
// body omitted
cb();
}
function jsTranspile(cb) {
// body omitted
cb();
}
function jsBundle(cb) {
// body omitted
cb();
}
function jsMinify(cb) {
// body omitted
cb();
}
function publish(cb) {
// body omitted
cb();
}
exports.build = series(
clean,
parallel(
cssTranspile,
series(jsTranspile, jsBundle)
),
parallel(cssMinify, jsMinify),
publish
);
当一个组合操作执行时，这个组合中的每一个任务每次被调用时都会被执行。例如，在两个不同的任务（task）之间调用的 clean 任务（task）将被执行两次，并且将导致不可预期的结果。因此，最好重构组合中的 clean 任务（task）,将多次执行的任务单独提出来
四、使用插件
在gulp中使用插件可以完成各种各样的功能，例如：转译文件，压缩文件，清空文件夹等操作，gulp插件库提供了非常多的插件供你在实际项目中使用
const { watch,series } = require('gulp');
const { src, dest } = require('gulp');
const stylus = require('gulp-stylus');
const rename = require("gulp-rename");
const cleanDir = require('gulp-clean-dir');
function cleanOutput(cb){
cleanDir("./output")
cb()
}
function stylusTransform() {
return src('style/*.styl')
.pipe(stylus({
compress: true
}))
.pipe(rename({
dirname: "",
// prefix: "bonjour-",
// basename: "aloha",
// suffix: "-hola",
extname: ".min.css"
}))
.pipe(dest('output'));
}
watch('style/*.styl', series(cleanOutput,stylusTransform));
exports.default = series(cleanOutput,stylusTransform);
五、文件监控
文件监控可以监控文件的变化执行你配置的任务，gulp提供了watch方法监控文件
watch('style/*.styl', series(cleanOutput,stylusTransform));
这是上文代码中输入的监控文件功能，当你修改style下的stylus文件，就会执行任务组，任务组中有清空文件夹和转译并压缩重命名文件的操作
gulp是一个非常简单实用的项目自动化管理工具，可以作为项目的脚手架帮你完成很多繁琐的操作，很多功能我也不太了解，还在摸着石头过河的阶段，有什么新发现我会及时补充，也欢迎大家提出宝贵建议
网友评论