Gulp 任务自动化工具

问题

Gulp 是什么？如何使用 Gulp 实现前端自动化构建？

解答

Gulp 是一个基于 Node.js 的流式任务自动化构建工具，用于自动化前端开发中的重复性任务，如文件压缩、编译 Sass、代码检查、浏览器自动刷新等。

安装 Gulp

# 全局安装 gulp-cli
npm install -g gulp-cli

# 项目中安装 gulp
npm install gulp --save-dev

基本使用

在项目根目录创建 gulpfile.js：

const gulp = require('gulp');

// 定义一个简单任务
function hello(done) {
  console.log('Hello Gulp!');
  done(); // 标记任务完成
}

// 导出任务
exports.hello = hello;
exports.default = hello; // 默认任务

运行任务：

gulp hello   # 运行指定任务
gulp         # 运行默认任务

常用 API

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

// 编译 Sass
function compileSass() {
  return gulp.src('src/scss/**/*.scss')  // 读取源文件
    .pipe(sass().on('error', sass.logError))  // 编译 Sass
    .pipe(cleanCSS())  // 压缩 CSS
    .pipe(gulp.dest('dist/css'));  // 输出到目标目录
}

// 压缩 JavaScript
function minifyJS() {
  return gulp.src('src/js/**/*.js')
    .pipe(uglify())  // 压缩 JS
    .pipe(gulp.dest('dist/js'));
}

// 复制 HTML
function copyHTML() {
  return gulp.src('src/**/*.html')
    .pipe(gulp.dest('dist'));
}

// 监听文件变化
function watch() {
  gulp.watch('src/scss/**/*.scss', compileSass);
  gulp.watch('src/js/**/*.js', minifyJS);
  gulp.watch('src/**/*.html', copyHTML);
}

// 串行执行：按顺序执行任务
const build = gulp.series(compileSass, minifyJS, copyHTML);

// 并行执行：同时执行任务
const buildParallel = gulp.parallel(compileSass, minifyJS, copyHTML);

exports.sass = compileSass;
exports.js = minifyJS;
exports.html = copyHTML;
exports.watch = watch;
exports.build = build;
exports.default = gulp.series(build, watch);

实际项目配置示例

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const browserSync = require('browser-sync').create();
const del = require('del');

// 路径配置
const paths = {
  styles: {
    src: 'src/scss/**/*.scss',
    dest: 'dist/css'
  },
  scripts: {
    src: 'src/js/**/*.js',
    dest: 'dist/js'
  }
};

// 清理 dist 目录
function clean() {
  return del(['dist']);
}

// 处理样式
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(sass())
    .pipe(autoprefixer())  // 自动添加浏览器前缀
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(rename({ suffix: '.min' }))  // 重命名为 .min.css
    .pipe(cleanCSS())
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(browserSync.stream());  // 注入更新的 CSS
}

// 处理脚本
function scripts() {
  return gulp.src(paths.scripts.src)
    .pipe(gulp.dest(paths.scripts.dest))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest(paths.scripts.dest))
    .pipe(browserSync.stream());
}

// 启动开发服务器
function serve(done) {
  browserSync.init({
    server: { baseDir: './dist' },
    port: 3000
  });
  done();
}

// 监听文件变化
function watchFiles() {
  gulp.watch(paths.styles.src, styles);
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch('dist/*.html').on('change', browserSync.reload);
}

// 导出任务
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.build = gulp.series(clean, gulp.parallel(styles, scripts));
exports.dev = gulp.series(exports.build, serve, watchFiles);
exports.default = exports.dev;

关键点

• 流式处理：Gulp 使用 Node.js 流，文件在内存中处理，不产生中间文件，速度快
• 代码优于配置：使用 JavaScript 代码定义任务，比 Grunt 的 JSON 配置更灵活
• 核心 API：gulp.src() 读取文件，pipe() 传递流，gulp.dest() 输出文件，gulp.watch() 监听变化
• 任务组合：gulp.series() 串行执行，gulp.parallel() 并行执行
• 插件生态：通过 gulp-* 插件扩展功能，如 gulp-sass、gulp-uglify、gulp-autoprefixer 等