Gulp 入门指南

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

摘要

文档详细介绍了gulp的安装、配置和使用方法。gulp是一个基于node的前端自动化开发工具，能够通过编写gulpfile.js来定义任务， 자동执行如文件压缩、编译预处理语言等重复性工作。文档中展示了如何安装gulp及相关插件，如何通过gulp.watch监听文件变化，并通过gulp.task定义任务来压缩JS文件等。此外，文档还提到了gulp在项目构建中的应用场景，包括压缩CSS、图片优化、编译Sass/LESS等。

AI总结

《Gulp 入门指南》总结

一、Gulp 简介
Gulp 是基于 Node.js 实现的前端自动化开发工具，旨在提高开发效率。它通过定义规律，将重复性工作（如文件压缩、代码编译等）自动化。

二、安装与准备
1. 安装 Node.js：从 [Node 官网](https://nodejs.org/) 下载并安装，安装完成后检查 Node 版本（命令：`node -v`）。
2. 全局安装 Gulp：在命令行中运行 `npm install -g gulp`，如有权限问题可使用 `sudo npm install -g gulp`。
3. 检查 Gulp 版本：安装完成后，运行 `gulp -v` 确认安装成功。

三、基础使用
1. 创建 `gulpfile.js` 文件：所有 Gulp 配置代码均在此文件中定义。
2. 导入模块：通过 `require` 导入 Gulp 和相关插件，如：

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

3. 定义任务：通过 `gulp.task()` 创建任务，例如压缩 JS 文件的任务：

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

4. 运行任务：在命令行中输入 `gulp.taskName` 运行任务，如 `gulp script`。

四、文件结构与工作流程
1. 文件结构分为源码目录（如 `src`）和构建输出目录（如 `dist`）。
2. 工作流程：找到目标文件 → 处理文件 → 输出到指定目录。

五、常用功能扩展
1. 自动化监听：通过 `gulp.watch()` 监听文件修改，自动触发任务：

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

2. 其他功能：
- 压缩 CSS 文件
- 编译 Sass/LESS
- 处理图片（如优化和压缩）
- 编译 CoffeeScript
- 将 Markdown 转换为 HTML

六、开发环境配置
1. 使用 `package.json` 管理依赖：通过 `npm install --save-dev` 安装所需插件，并生成 `package.json` 文件。
2. 目录结构建议：

   └── src/  
       ├── js/  
       ├── css/  
       ├── images/  
       └── etc.  
   └── dist/  

七、终端命令提示
1. 目录操作：
- Windows：`cd 目录名` 跳转至指定目录，`cd ..` 返回上一级。
- Mac：`cd 目录名` 跳转至指定目录，`ls` 查看文件列表。
2. 退出运行状态：使用 `Ctrl + C`（Windows）或 `Control + C`（Mac）退出任务。

八、案例展现
1. 压缩 JS 文件：通过定义规律，将 `js/` 目录下的所有 JS 文件压缩并输出到 `dist/js/`。
2. 自动化构建：通过 `gulp.task('default', ['script', 'auto'])` 定义默认任务，使 Gulp 自动监听文件修改并执行压缩任务。

九、总结
Gulp 通过定义规律和编写任务，能够自动化完成前端开发中的重复性工作，极大提升开发效率。