Gulp 入门指南

• 语言: 中文（简体）
• 格式: .pdf
• 来源: cdn.lxqnsys.com

摘要

文档详细介绍了如何使用 Gulp 进行前端开发的自动化配置，包括压缩 JavaScript 和 CSS 文件、安装必要的 Gulp 插件、配置任务流程、使用命令行运行任务以及自动检测文件修改以触发压缩任务。文档还介绍了如何使用 gulp-sourcemaps 进行调试，并提供了具体的代码示例和命令行操作指南。

AI总结

《Gulp 入门指南》主要介绍了如何使用 Gulp 进行前端开发任务的自动化配置，以下是文档的核心内容总结：

### 1. Gulp 简介
- Gulp 是一个基于 Node.js 的 Web 前端自动化工具，能够帮助开发者提高效率，自动执行重复性工作（如压缩文件）。
- 它通过配置文件 `gulpfile.js` 来定义任务，利用管道（pipe）机制将操作串联起来。

### 2. 安装依赖
- 使用 `gulp-uglify` 压缩 JavaScript 文件。
- 使用 `gulp-imagemin` 压缩图片。
- 在项目中安装这些模块：

  npm install gulp-uglify gulp-imagemin --save-dev

### 3. 压缩 JavaScript 文件
- 创建 `gulpfile.js` 文件，编写压缩任务：

  var gulp = require('gulp');
  var uglify = require('gulp-uglify');

  gulp.task('script', function() {
    gulp.src('js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));
  });

- 任务步骤：
1. `gulp.src('js/*.js')`：找到 `js` 目录下的所有 `.js` 文件。
2. `.pipe(uglify())`：压缩文件。
3. `.pipe(gulp.dest('dist/js'))`：将压缩后的文件保存到 `dist/js` 目录。

### 4. 运行任务
- 在命令行输入：

  gulp script

- 如果出现错误提示 `Cannot find module 'gulp-uglify'`，需要先安装模块：

  npm install gulp-uglify

### 5. 自动监听文件变化
- 使用 `gulp.watch()` 监听文件修改并自动执行任务：

  gulp.task('auto', function() {
    gulp.watch('js/*.js', ['script']);
  });

- 在命令行输入：

  gulp auto

### 6. 压缩 CSS 文件
- 使用 `gulp-minify-css` 压缩 CSS 文件：

  var minifyCSS = require('gulp-minify-css');

  gulp.task('css', function() {
    gulp.src('css/*.css')
      .pipe(minifyCSS())
      .pipe(gulp.dest('dist/css'));
  });

### 7. 压缩图片
- 使用 `gulp-imagemin` 压缩图片：

  var imagemin = require('gulp-imagemin');

  gulp.task('images', function() {
    gulp.src('images/*')
      .pipe(imagemin())
      .pipe(gulp.dest('dist/images'));
  });

### 8. 使用 Sourcemaps 调试
- 安装 `gulp-sourcemaps`：

  npm install gulp-sourcemaps

- 在任务中添加 sourcemaps：

  var sourcemaps = require('gulp-sourcemaps');

  gulp.task('script', function() {
    gulp.src('js/*.js')
      .pipe(sourcemaps.init())
      .pipe(uglify())
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('dist/js'));
  });

### 9. 目录结构
- 源码放在 `src/` 目录，压缩后的文件放在 `dist/` 目录。

### 10. 注意事项
- 确保 `gulpfile.js` 和 `package.json` 在项目根目录。
- 使用 `npm install` 安装所有依赖项，避免手动下载模块。
- 保持代码简洁，合理分层任务，提高可维护性。

通过以上步骤，可以快速上手 Gulp，实现前端开发的自动化流程。