红宝书第三十八讲：新手也能懂的构建自动化：Grunt vs Gulp

---

红宝书第三十八讲：新手也能懂的构建自动化：Grunt vs Gulp

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、构建自动化是什么？

将重复的开发任务自动执行，比如压缩代码、编译SASS等。类似于工厂的流水线，代码从开发到上线自动加工 ¹。

flowchart LR
    原始代码 --> 压缩JS --> 编译SASS --> 打包文件 --> 成品代码

---

二、Grunt：配置驱动的老牌工具 ²³

通过声明式配置文件定义任务步骤，适合需要精细控制的场景。

特点：

1. 配置优先：每个步骤在Gruntfile.js中详细描述
2. 插件丰富：社区提供7000+插件
3. 适合复杂任务：例如多环境编译

快速配置（gruntfile.js示例）：

module.exports = function(grunt) {
  grunt.initConfig({
    // 1. 配置压缩JS的任务
    uglify: {
      target: {
        files: { 
          'dist/app.min.js': ['src/**/*.js'] // 把src下所有JS压缩到dist
        }
      }
    },
    // 2. 配置编译SASS的任务
    sass: {
      dist: {
        files: [{
          expand: true,
          src: ['**/*.scss'],
          dest: 'css',
          ext: '.css'
        }]
      }
    }
  });

  // 加载插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-sass');
  
  // 注册默认任务（按顺序执行）
  grunt.registerTask('default', ['uglify', 'sass']);
};

执行命令：

npm install grunt grunt-contrib-uglify grunt-sass --save-dev
grunt  # 自动运行default任务

---

三、Gulp：代码驱动的流式工具 ²³

用JavaScript函数描述任务流，适合追求简洁和高性能的场景。

特点：

1. 流式处理：代码像水管一样传输，减少临时文件
2. 代码即配置：用gulpfile.js书写管道步骤
3. 执行更快：内存操作替代磁盘读写

示例（gulpfile.js）：

const { src, dest, series } = require('gulp');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass')(require('sass'));

// 定义JS压缩任务
function minifyJS() {
  return src('src/**/*.js')
    .pipe(uglify())     // 管道操作1：压缩代码
    .pipe(dest('dist'));// 输出到dist目录
}

// 定义SASS编译任务
function compileSASS() {
  return src('styles/**/*.scss')
    .pipe(sass().on('error', sass.logError)) 
    .pipe(dest('css'));
}

// 组合任务流
exports.default = series(minifyJS, compileSASS);

运行方式：

npm install gulp gulp-uglify gulp-sass sass --save-dev
gulp  # 自动执行default任务

---

四、横向对比：选择谁？

工具	优势	适用场景
Grunt	✔️插件生态完善 ✔️配置可视化	需要图形界面配置的复杂项目
Gulp	✔️代码更灵活 ✔️执行速度快	追求开发效率的现代前端项目

代码风格对比：

// Grunt：配置式（对象描述步骤）
grunt.initConfig({ uglify: { files: {...} } })

// Gulp：函数式（管道连接操作）
pipe(uglify()).pipe(dest('dist'))

---

目录：总目录
上篇文章：红宝书第三十七讲：代码压缩与混淆入门指南

下篇文章：红宝书第三十九讲：写给新手的性能优化实战指南：代码拆分与缓存策略

脚注

---

1. 《JavaScript高级程序设计（第5版）》解释构建自动化用于打包、编译、压缩等流水线任务 ↩
2. 《JavaScript高级程序设计（第5版）》指出Grunt使用配置对象，Gulp采用管道函数式编程 ↩
3. 《JavaScript高级程序设计（第5版）》说明二者均通过npm插件扩展功能，并依赖JavaScript配置文件 ↩