Gulp 入门指南

《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 和相关插件，如： ```javascript var gulp = require('gulp'); var uglify = require('gulp-uglify'); ``` 3. 定义任务：通过 `gulp.task()` 创建任务，例如压缩 JS 文件的任务： ```javascript 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()` 监听文件修改，自动触发任务： ```javascript 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 通过定义规律和编写任务，能够自动化完成前端开发中的重复性工作，极大提升开发效率。