Gulp 基础与工作流

Gulp 基础

Gulp的核心作用

Gulp 是一个基于流（Stream）的自动化构建工具，依赖 Node.js 运行。它通过任务（Task）定义一系列文件操作（如压缩、合并、转换），以提高开发效率和代码质量。

核心作用：

• 自动化任务：自动执行文件处理，如 Sass 编译、JS 压缩、图片优化。
• 流式处理：通过管道（pipe）处理文件，避免临时文件，性能优于基于文件系统的工具。
• 增强开发体验：支持文件监听和实时刷新（如 LiveReload）。

Gulp 和 Webpack 的区别和使用场景

区别：

• 任务类型：
  • Gulp 是一个任务运行器，专注于文件操作（如压缩、合并），通过插件实现功能。
  • Webpack 是一个模块打包器，专注于模块化开发，分析依赖关系并生成捆绑文件。
• 处理方式：
  • Gulp 使用流式处理，配置文件基于 JavaScript。
  • Webpack 使用依赖图（Dependency Graph），配置文件也基于 JavaScript，但更偏向模块解析。
• 适用场景：
  • Gulp 适合简单的前端任务，如文件监控、样式处理。
  • Webpack 适合复杂项目，处理 ES6/7、CSS 模块化和代码分割。

使用时机：

• 用 Gulp：小型项目或需要自定义任务（如图片压缩、HTML 替换），或已有成熟的构建流程。
• 用 Webpack：模块化开发（如 React/Vue 项目）、需要按需加载或 Tree Shaking。

Gulp 工作流

Gulp 任务（Task）的基本结构

Gulp 任务由 gulp.task() 定义，包含任务名、依赖任务和回调函数。基本结构如下：

gulp.task('taskName', ['dependencyTask'], function(callback) {
  // 任务逻辑
  callback(); // 任务完成时调用
});

示例： 压缩 CSS 文件

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

gulp.task('minify-css', function() {
  return gulp.src('src/css/*.css') // 源文件
    .pipe(cleanCSS()) // 压缩 CSS
    .pipe(gulp.dest('dist/css')); // 输出文件
});

• 任务名：minify-css
• 源文件：src/css/*.css
• 处理：使用 gulp-clean-css 插件压缩
• 输出：dist/css

Gulp 监听文件变化并自动执行任务

Gulp 使用 gulp.watch() 监听文件变化，结合任务自动执行。基本用法如下：

gulp.watch('files', ['tasks']);

示例： 监听 CSS 文件变化并压缩

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

gulp.task('minify-css', function() {
  return gulp.src('src/css/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('watch', function() {
  gulp.watch('src/css/*.css', ['minify-css']);
});

gulp.task('default', ['watch']); // 运行默认任务

• 运行 gulp 后，修改 src/css/*.css 文件会自动触发 minify-css 任务。
• default 任务确保监听启动。

三、Gulp API

Gulp 的 src()、dest() 和 pipe() 方法

• gulp.src(globs)：读取文件，globs 是匹配模式（如 '*.js'），返回文件流作为任务起点。
• gulp.dest(path)：将处理后的文件写入指定路径，创建目录并支持覆盖。
• pipe()：将文件流传递到下一个插件或方法，实现流式处理。

示例：

gulp.src('src/*.js')
  .pipe(somePlugin()) // 处理文件
  .pipe(gulp.dest('dist'));