Gulp.js

特点

• 自动化: Gulp通过减少重复任务的手动操作，使开发过程更加高效。
• 平台无关: Gulp可以与PHP、.NET、Node.js、Java等多种平台集成。
• 强大的生态系统: 拥有超过3000个插件，可以实现流文件转换等多种功能。
• 简洁: 提供的API表面极简，易于学习和使用。

使用场景

Gulp非常适合用于以下场景：

• 编译预处理器，如Sass或Less
• 自动化测试
• 优化和压缩CSS、JavaScript、图片等静态资源
• 实时监控文件变化并重新加载浏览器

安装方式

1. 安装Gulp CLI工具:

   npm install --global gulp-cli
   

2. 创建项目目录并初始化:

   mkdir my-project
   cd my-project
   npm init
   

3. 安装Gulp到开发依赖中:

   npm install --save-dev gulp
   

使用示例

创建一个简单的gulpfile.js:

const gulp = require('gulp');
const less = require('gulp-less');
const cleanCSS = require('gulp-clean-css');
const del = require('del');

const paths = {
  styles: {
    src: 'src/styles/**/*.less',
    dest: 'assets/styles/'
  }
};

function clean() {
  return del(['assets']);
}

function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    .pipe(gulp.dest(paths.styles.dest));
}

function watch() {
  gulp.watch(paths.styles.src, styles);
}

const build = gulp.series(clean, styles);

exports.clean = clean;
exports.styles = styles;
exports.watch = watch;
exports.build = build;
exports.default = build;

常用API介绍

• gulp.src(globs, [options]): 创建一个stream来读取匹配的文件。
• gulp.dest(path, [options]): 将文件写入指定目录。
• gulp.series(tasks): 串行运行任务。
• gulp.parallel(tasks): 并行运行任务。
• gulp.watch(globs, [options], tasks): 监听文件变化并执行任务。

高级用法

Gulp 4.0引入了series和parallel方法，允许更灵活地组合任务：

const { series, parallel } = require('gulp');

function task1(cb) {
  // do something
  cb();
}

function task2(cb) {
  // do something else
  cb();
}

exports.default = series(task1, task2);

官方资料

• Gulp官网
• Gulp GitHub

有关更多详细信息和高级用法，请参考Gulp的官方文档和社区资源。