gulp基础入门

最近项目重构要使用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是一个非常简单实用的项目自动化管理工具，可以作为项目的脚手架帮你完成很多繁琐的操作，很多功能我也不太了解，还在摸着石头过河的阶段，有什么新发现我会及时补充，也欢迎大家提出宝贵建议