pdf文档 Gulp 入门指南

275.87 KB 36 页 0 评论
语言 格式 评分
中文(简体)
.pdf
3
摘要
文档详细介绍了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 和相关插件,如: ```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 通过定义规律和编写任务,能够自动化完成前端开发中的重复性工作,极大提升开发效率。
P1
P2
P3
P4
P5
P6
P7
下载文档到本地,方便使用
- 可预览页数已用完,剩余 29 页请下载阅读 -
文档评分
请文明评论,理性发言.