Repository: zhonglimh/Gulp
Branch: master
Commit: 4099004ca5d5
Files: 10
Total size: 29.7 KB
Directory structure:
gitextract_i81eo2zb/
├── Example1/
│ ├── README.md
│ └── gulpfile.js
├── Example2/
│ ├── README.md
│ ├── gulpfile.js
│ └── src/
│ ├── css/
│ │ ├── _macro.scss
│ │ └── css.scss
│ ├── index.html
│ └── js/
│ └── works.js
├── LICENSE
└── README.md
================================================
FILE CONTENTS
================================================
================================================
FILE: Example1/README.md
================================================
## Gulp构建前端自动化工作流
### Gulp构建前端自动化工作流：入门介绍及LiveReload的使用
其实这篇内容已躺在我的Evernote里许久，但一直搁置着，今天算是正式见光。
本文主要介绍如何使用Gulp.js，来帮助你构建一个自动化的前端开发流程。总结并归类自身使用中所遇到的方法、问题，便于新人上手和理解，同时也作为一份Gulp参考文档来使用，让你对Gulp有个更深入的了解。
最后，在正文开始前给新人提个醒：随着Gulp版本更新，API已发生了细小变化，目前网上很多文章，都是基于早期版本所写，当你查阅资料时一定要留意一下，否则会给你带来不少麻烦。
> 注：
> 本文所使用的工具版本为：Node.js（v0.10.21）、 Ruby（v2.2.1p85）、Gulp（v3.8.11）。
> 如有疑问欢迎在本文下方留言，或关注我的个人微信号：bluesdream_com
#### Gulp是什么鬼（What's Gulp） ?
Gulp是基于Node.js的一个构建工具（自动任务运行器），开发者可以使用它构建自动化工作流程（前端集成开发环境）。一些常见、重复的任务，例如：网页自动刷新、CSS预处理、代码检测、压缩图片、等等…… 只需用简单的命令就能全部完成。使用它，可以简化工作，让你把重点放在功能开发上；同时减少人为失误，提高开发效率和项目质量，让专注更为专注。如果你之前接触过Grunt，那上手Gulp就会觉得非常容易理解。
#### 为什么使用Gulp而不使用Grunt（Why use Gulp instead of Grunt）?
构建前端自动化的工具有很多Grunt, Brunch, Broccoli…… 而目前过内最流行的属于Grunt，之前我也在用使用，那为什么选择Gulp来代替Grunt？
我简单的总结了以下3点：
* 简洁：Gulp侧重“代码优于配置”(code over configuration)。最直观的感受，更为简单和清晰，不需要像Grunt一样写一堆庞大的配置文件。
* 高效：Gulp基于Node Streams（流）来构建任务，避免磁盘反复I/O（读取/写入）。每个任务都是单独执行（坚持做一件事并且做好它），这使得它速度更快、更为纯粹。
* 易学：Gulp核心API只有4个。简洁的API易于上手，学习过程比较平滑。
Gulp的核心API只有4个：src、dest、task、watch
* gulp.src(globs[, options])：指明源文件路径
globs：路径模式匹配；
options：可选参数；
- gulp.dest(path[, options])：指明处理后的文件输出路径
path：路径（一个任务可以有多个输出路径）；
options：可选参数；
* gulp.task(name[, deps], fn)：注册任务
name：任务名称（通过 gulp name 来执行这个任务）；
deps：可选的数组，在本任务运行中所需要所依赖的其他任务（当前任务在依赖任务执行完毕后才会执行）；
fn：任务函数（function方法）；
* gulp.watch(glob [, opts], tasks)：监视文件的变化并运行相应的任务
glob：路径模式匹配；
opts：可以选配置对象；
taks：执行的任务；
在我使用Gulp后，就明显感觉Grunt配置很是复杂。同样为了实现LiveReload功能，Gulp所需要的配置的代码，只有Grunt的一般都不到。具体可以参见我之前所写的一篇文章[《Grunt插件之LiveReload 实现页面自动刷新，所见即所得编辑》](http://www.bluesdream.com/blog/grunt-plugin-livereload-wysiwyg-editor.html)与下文进行对比。
> 注：
> 1\. streams（流）的简述：Node.js中的I/O操作是异步的，因此磁盘的读写和网络操作都需要传递回调函数。streams的优点：不需要把文件都一次性写入内存，通过pie（管道）把文件转为数据流（将任务和操作连接起来），像瀑布一样一级级（one by one）往下流（处理），因此只需一次I/O操作。而Grunt是每执行一个任务就需要I/O一次，在任务多的时候，就会有大量I/O操作，效率自然就会比较低。
> 2\. 以前Gulp有5个核心API，但随着Gulp 3.5的更新，gulp.run()方法早已被弃用。
#### 1. 安装Node.js（Install Node.js）
1.1 首先去Node.js官网，点击那个醒目的"INSTALL"按钮，下载并安装。
1.2 安装完成以后，打开命令行`（Winkey+R -> 输入CMD）`or`（开始菜单 -> 所有程序 -> 选择命令提示符）`，执行以下2个简单的命令，查看Node.js是否已经安装正确：
`node -v`
查看 Node.js 版本号
`npm -v`
查看 npm 版本号
>注：
>现在的Node.js会自动安装npm（npm 是 Node.js 的包管理器，Gulp和Gulp插件就通过 npm 安装并管理）。
#### 2. 创建项目目录（Create Project）
2.1 假设这个项目存放在D盘（"D:\my-gulp"），我们首先进度D盘：
`d:`
2.2 然后进入文件夹：
`cd my-gulp`
#### 3. Gulp安装（Installing Gulp）
3.1 全局安装：
`npm install -g gulp`
安装完成后，我们同样可以通过 `gulp -v` 命令，来查看Gulp的版本号。
这时项目文件夹中生成了一个node_modules文件夹，其里面就是对应的Gulp和Gulp插件。
> 注：
> 1\. Gulp全局安装后，并不能像Grunt一样，只需安装一次就能在任何目下执行。他在每构建一个新项目时，都需要从这步骤开始再单独安装一次。
> 2\. 至于为什么要这样，有人在stackoverflow上提出过疑问。得到的大致回复是为了更加灵活，因为有些插件基于特定的版本，这样做的话每个项目就等于都是独立的，互不影响。
3.2 本地安装：
`npm install gulp --save-dev`
> 注：
> 1\. -g：代表全局安装；
> 2\. --save：将保存配置信息至package.json（此文件在 node_modules\gulp 目录下）
> 3\. -dev：将它作为你的项目依赖添加到中devDependencies内（--save和-dev是2个东西，记得分清前面的"-"号）
> 4\. 由于Gulp会自带package.json文件（用于存储项目的元数据），所以这里只做简单介绍（如果你想自己创建，也可通过命令 npm init，然后根据引导填写相关信息）：
```
{
"name": "gulp", // 模块名称：只能包含小写字母数字和中划线，如果为空则使用项目文件夹名称代替（必填）
"version": "3.8.11", // 版本号（必填）
"description": "The streaming build system", // 描述：会在npm搜索列表中显示（必填）
"homepage": "http://gulpjs.com", // 项目主页
"repository": { // 资源库
"type": "git",
"url": "git://github.com/gulpjs/gulp"
},
"author": { // 作者信息
"name": "Ryan",
"email": "contact@bluesdream.com",
"url": "http://www.bluesdream.com/"
},
"licenses": [{ // 开源协议
"type": "MIT",
"url": "https://raw.githubusercontent.com/gulpjs/gulp/master/LICENSE"
}],
"devDependencies": { // 这里面的参数，指定了项目依赖的Gulp和Gulp插件版本。
"gulp": "^3.8.11"
}
}
```
#### 4. Gulp插件安装（Install Gulp Plugins）
接着安装我们所需要的插件，这里，我们通过`gulp-livereload` + `gulp-webserver`，来实现页面自动刷新：
**静态服务器（ [gulp-webserver](http://www.example.com) ）**
**网页自动刷新（ [gulp-livereload](https://www.npmjs.com/package/gulp-livereload) ）**
`npm install gulp-livereload gulp-webserver --save-dev`
#### 5. Gulp任务配置（Task Configuration）
5.1 在项目根目录中，创建gulpfile.js文件，用来配置和定义任务（task）。
5.2 打开Gulpfile.js文件中，填写相关配置：
```
// 引入gulp
var gulp = require('gulp'); // 基础库
// 引入gulp插件
var livereload = require('gulp-livereload'), // 网页自动刷新（服务器控制客户端同步刷新）
webserver = require('gulp-webserver'); // 本地服务器
// 注册任务
gulp.task('webserver', function() {
gulp.src( './' ) // 服务器目录（./代表根目录）
.pipe(webserver({ // 运行gulp-webserver
livereload: true, // 启用LiveReload
open: true // 服务器启动时自动打开网页
}));
});
// 监听任务
gulp.task('watch',function(){
gulp.watch( '*.html', ['html']) // 监听根目录下所有.html文件
});
// 默认任务
gulp.task('default',['webserver','watch']);
```
5.2.1 执行默认：
`gulp`
看到如下提示说明执行成功：
> [18:19:24] Using gulpfile D:\my-gulp\gulpfile.js
> [18:19:24] Starting 'webserver'...
> [18:19:24] Webserver started at http://localhost:8000
> [18:19:24] Finished 'webserver' after 10 ms
> [18:19:24] Starting 'watch'...
> [18:19:24] Finished 'watch' after 97 ms
想要终止任务，只需`Ctrl+c`根据提示输入`y`便能终止，或直接关闭命令提示符。
5.2.2 执行特定任务：
`gulp webserver`
看到如下提示说明执行成功：
> [18:21:56] Using gulpfile D:\my-gulp\gulpfile.js
> [18:21:56] Starting 'webserver'...
> [18:21:56] Webserver started at http://localhost:8000
> [18:21:56] Finished 'webserver' after 10 ms
至此，你已轻松学会如何使用Gulp，并对它有一个大致的了解。
> 注：
> 1\. Gulp插件可以通过[Gulp官网](http://gulpjs.com/plugins/) 、 [npm官网](https://www.npmjs.com/browse/keyword/gulpplugin/) 或 [Browsenpm](http://browsenpm.org/) 上找到你所要的插件。
> 2\. 不要在node_modules文件夹内手动删除插件，请使用命令卸载。因为手动删除的只是下载插件包，但package.jason中的配置信息并没有清除。
> 3\. 不要直接移动Gulp插件，否则由于系统层级限制，出现错误提示“文件名对目标文件夹可能过长。您可以缩短文件名并重试，或者尝试路径较短的位置。”。此时把文件夹打包成RAR后再操作便可。
> 4\. npm常用命令：
> 安装插件：npm <module> [-g] [--save-dev]
> 更新插件：npm update <module> [-g] [--save-dev]
> 卸载插件：npm uninstall <module> [-g] [--save-dev]
> 指定版本：npm install <module>@VERSION [--save-dev] （其中VERSION就是你所需要的版本号）
参考资料：
[Building With Gulp](http://www.smashingmagazine.com/2014/06/11/building-with-gulp/)
[Introduction to Gulp.js – Code Over Configuration](http://gaboesquivel.com/blog/2014/introduction-to-gulpjs/)
[An introduction to Gulp](http://www.codeproject.com/Articles/865943/An-introduction-to-Gulp)
扩展资料：
[Gulp API docs](https://github.com/gulpjs/gulp/blob/master/docs/API.md)
[gulp-cheatsheet](https://github.com/osscafe/gulp-cheatsheet)
原文地址：[Gulp构建前端自动化工作流之：入门介绍及LiveReload的使用](http://www.bluesdream.com/blog/gulp-frontend-automation-introduction-and-livereload.html)
================================================
FILE: Example1/gulpfile.js
================================================
// 引入gulp
var gulp = require('gulp'); // 基础库
// 引入gulp插件
var livereload = require('gulp-livereload'), // 网页自动刷新（服务器控制客户端同步刷新）
webserver = require('gulp-webserver'); // 本地服务器
// 注册任务
gulp.task('webserver', function() {
gulp.src( './' ) // 服务器目录（./代表根目录）
.pipe(webserver({ // 运行gulp-webserver
livereload: true, // 启用LiveReload
open: true // 服务器启动时自动打开网页
}));
});
// 监听任务
gulp.task('watch',function(){
gulp.watch( '*.html', ['html']) // 监听根目录下所有.html文件
});
// 默认任务
gulp.task('default',['webserver','watch']);
================================================
FILE: Example2/README.md
================================================
## Gulp构建前端自动化工作流
### Gulp构建前端自动化工作流之：常用插件介绍及使用
在对Gulp有了一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。
本文主要分为6个段落：
* 1\. 构建项目目录结构（Directory Structure Build）
* 2\. 插件介绍及使用方法（Tasks and dependencies）
* 3\. 扩展优化（Extend & Optimize Task）
* 4\. 其他插件介绍（Other plug-ins）
* 5\. 匹配规则（Match Files）
* 6\. 注意事项（Attention）
关于Gulp的入门介绍及安装方法，可先去[《Gulp构建前端自动化工作流之：入门介绍及LiveReload的使用》](http://www.bluesdream.com/blog/gulp-frontend-automation-introduction-and-livereload.html "Gulp构建前端自动化工作流之：入门介绍及LiveReload的使用") 这篇文章查看。对其有个初步认识后，便于后文的理解。<!--more-->
### 1. 构建项目目录结构（Directory Structure Build）
```js
+ my-gulp（项目文件夹）
+ node_modules Gulp组件目录
+ dist 发布环境
+ css 编译后的CSS文件
─ etc...
+ images 压缩后的图片文件
─ etc...
+ js 编译后的JS文件
─ etc...
─ html 静态文件
+ src 开发环境
+ sass SASS文件
─ etc...
+ images 图片文件
─ etc...
+ js JS文件
─ etc...
─ html 静态文件
─ gulpfile.js Gulp任务文件
注：
+ 表示目录 ─ 表示文件
```
### 2. 插件介绍及使用方法（Tasks and dependencies）
#### 2.1 HTML处理（HTML Task）
仅把开发环境中的HTML文件，移动至发布环境。
基础配置：
```js
gulp.task('html', function() {
return gulp.src('src/**/*.html') // 指明源文件路径、并进行文件匹配
.pipe(gulp.dest('dist')); // 输出路径
});
```
执行命令：
`gulp html`
#### 2.2 样式处理（CSS Task）
##### CSS预处理/Sass编译 ([gulp-ruby-sass](https://www.npmjs.com/package/gulp-ruby-sass)) ：
相比较glup-sass而言，速度会稍许慢点，但功能更多并且稳定。
安装SASS：
1. 像Gulp基于Node.js一样，Sass基于Ruby环境，所以我们先去官网下载并安装[Ruby](http://rubyinstaller.org/downloads)（在安装的时候，请勾选`Add Ruby executables to your PATH`这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境）。
2. 安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开`Start Command Prompt with Ruby`
3. 然后直接在命令行中输入`gem install sass`按回车键确认，等待一段时间就会提示你sass安装成功。
> 注：
> 由于近期墙的比较严重，外加（上海）电信限制了外网访问速度。如果安装失败，请使用淘宝的Ruby镜像。具体操作方法请参考[淘宝RubyGems镜像安装 sass](http://www.w3cplus.com/sassguide/install.html)。
安装命令：
`npm install gulp-ruby-sass --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var sass = require('gulp-ruby-sass'); // sass/scss编译
gulp.task('sass', function () {
return sass('src/css', { style: 'compressed' }) // 指明源文件路径、并进行文件匹配（style: 'compressed' 表示输出格式）
.on('error', function (err) {
console.error('Error!', err.message); // 显示错误信息
})
.pipe(gulp.dest('dist/css')); // 输出路径
});
```
执行命令：
`gulp sass`
插件提供4种输出格式：
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
> 注：
> 使用前清看清 gulp-ruby-sass 写法，不要直接拿 gulp-sass 的写法来套用，两者并不完全相同。
#### 2.3 脚本压缩&重命名（Javascript Task）
##### JS文件压缩([gulp-uglify](https://www.npmjs.com/package/gulp-uglify))：
使用uglify引擎压缩JS文件。
安装命令：
`npm install gulp-uglify --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var uglify = require('gulp-uglify'); // js压缩
gulp.task('script', function() {
return gulp.src('src/js/*.js') // 指明源文件路径、并进行文件匹配
.pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
.pipe(gulp.dest('dist/js')); // 输出路径
});
```
执行命令：
`gulp script`
#### 2.4 图片处理（Image Task）
##### 图片压缩([gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)) + 深度压缩([imagemin-pngquant](https://www.npmjs.com/package/imagemin-pngquant))：
压缩PNG、JPEG、GIF和SVG图像。
gulp-imagemin集成了[gifsicle](https://github.com/kevva/imagemin-gifsicle) 、[jpegtran](https://github.com/kevva/imagemin-jpegtran) 、[optipng](https://github.com/kevva/imagemin-optipng) 、[svgo](https://github.com/kevva/imagemin-svgo) 这4个插件。而imagemin-pngquant是imagemin插件的一个扩展插件，用于深度压缩图片。
安装命令：
`npm install gulp-imagemin imagemin-pngquant --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var imagemin = require('gulp-imagemin'), // 图片压缩
pngquant = require('imagemin-pngquant'); // 深度压缩
gulp.task('images', function(){
return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
.pipe(imagemin({
progressive: true, // 无损压缩JPG图片
svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
use: [pngquant()] // 使用pngquant插件进行深度压缩
}))
.pipe(gulp.dest('dist/images')); // 输出路径
});
```
执行命令：
`gulp images`
> 注：
> 一般我们所使用的图片压缩方法，都会对图像造成一定的损失，这个和压缩比率有一定的关系。通常我们所说的无损压缩，也只是控制在我们肉眼难以发现的范围内。换句话来说，在你保存切图的同时，其实已经对图像造成了一定的损失，因为没什么人会选择100%最佳质量导出图片。两者是差不多的概念。
#### 2.5 自动刷新（LiveReload Task）
##### 网页自动刷新（文件变动后即时刷新页面）([gulp-livereload](https://www.npmjs.com/package/gulp-livereload)) + 静态服务器：([gulp-webserver](https://www.npmjs.com/package/gulp-webserver))：
安装命令：
`npm install gulp-livereload gulp-webserver --save-dev`
```js
var gulp = require('gulp'); // 基础库
var livereload = require('gulp-livereload'), // 网页自动刷新（文件变动后即时刷新页面）
webserver = require('gulp-webserver'); // 本地服务器
// 注册任务
gulp.task('webserver', function() {
gulp.src( '.' ) // 服务器目录（.代表根目录）
.pipe(webserver({ // 运行gulp-webserver
livereload: true, // 启用LiveReload
open: true // 服务器启动时自动打开网页
}));
});
// 监听任务
gulp.task('watch',function(){
// 监听 html
gulp.watch('src/**/*.html', ['html'])
// 监听 scss
gulp.watch('src/scss/*.scss', ['css']);
// 监听 images
gulp.watch('src/images/**/*.{png,jpg,gif,svg}', ['images']);
// 监听 js
gulp.watch('src/js/*.js', ['script']);
});
// 默认任务
gulp.task('default',['webserver','watch']);
```
执行命令：
`gulp`
### 3. 扩展优化（Extend & Optimize Task）
至此，`一套简单的前端自动化工作流/Gulp工作流便已经完成`。现在，我们开始优化并扩展这些插件，使我们的工作流更为"智能"。
##### 3.1 文件重命名([gulp-rename](https://www.npmjs.com/package/gulp-rename))：
像jQuery一样，通常为了表示该文件是压缩版，会在文件名后加上 .min 后缀。
安装命令：
`npm install gulp-rename --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var uglify = require('gulp-uglify'), // js压缩
rename = require('gulp-rename'); // 文件重命名
gulp.task('script', function() {
return gulp.src('src/js/*.js') // 指明源文件路径、并进行文件匹配
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
.pipe(gulp.dest('dist/js')); // 输出路径
});
```
执行命令：
`gulp script`
##### 3.2 来源地图([gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps))：
这是个非常有用的插件，我们在压缩、合并等操作之后，调试时所看到的内容，都是编译后的代码。这样就导致一个问题，调试过程中无法和源码（编译时的代码）位置相对应，让调试变的十分困难。
例如：一个jQuery，源码接近1万行。但压缩后只有短短的3~4行，并且变量名称也已发生改变。此时一旦报错，你很难从错误信息中直接找到对应代码的原始位置。同样，CSS也会遇到类似问题。
而sourcemaps作用，便是成一个`.map`文件，里面储存着对应的源码位置。并内嵌在你转换后的文件底部`/*# sourceMappingURL=maps/filename.css.map */`。这样在我们调试时，就会直接显示（映射）源码，而不时编译后的代码。
安装命令：
`npm install gulp-sourcemaps --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var uglify = require('gulp-uglify'), // js压缩
rename = require('gulp-rename'), // 文件重命名
sourcemaps = require('gulp-sourcemaps'); // 来源地图
gulp.task('script', function() {
return gulp.src(['src/js/*.js','!*.min.js']) // 指明源文件路径、并进行文件匹配，排除 .min.js 后缀的文件
.pipe(sourcemaps.init()) // 执行sourcemaps
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
.pipe(sourcemaps.write('maps')) // 地图输出路径（存放位置）
.pipe(gulp.dest('dist/js')); // 输出路径
});
```
执行命令：
`gulp script`
##### 3.3 只操作有过修改的文件([gulp-changed](https://www.npmjs.com/package/gulp-changed))：
比如我们有20个文件，当你修改其中1个文件时，由于任务的局限性，也会把其余19匹配的无辜的同类给一并进行处理，这样就大大降低了效率。而 `gulp-changed` 插件，会首先把文件进行比对，如果文件没有改动，则跳过后续任务。
安装命令：
`npm install gulp-changed --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var imagemin = require('gulp-imagemin'), // 图片压缩
pngquant = require('imagemin-pngquant'), // 深度压缩
changed = require('gulp-changed'); // 只操作有过修改的文件
gulp.task('images', function(){
return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
.pipe(changed('dist/images')) // 对比文件是否有过改动（此处填写的路径和输出路径保持一致）
.pipe(imagemin({
progressive: true, // 无损压缩JPG图片
svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
use: [pngquant()] // 使用pngquant插件进行深度压缩
}))
.pipe(gulp.dest('dist/images')); // 输出路径
});
```
执行命令：
`gulp images`
此时我们再去 `dist/images` 文件夹，查看每个图片的最后修改日期，你就会发现只针对你刚才修改过的图片（文件）行了处理，而那些之前已经处理过的图片则没有再进行操作。
> 注：
> 无论是 gulp-changed 还是下文中提到的 gulp-cache ，对 sass 文件无效，始终会对所有匹配文件进行操作。
##### 3.4 文件合并([gulp-concat](https://www.npmjs.com/package/gulp-concat))：
比如我们有多个JS库，jquery.min.js、bootstrap.min.js、angular.min.js。此时可以通过合并，减少网络请求。
安装命令：
`npm install gulp-concat --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var concat = require("gulp-concat"); // 文件合并
gulp.task('concat', function () {
gulp.src('js/*.min.js') // 要合并的文件
.pipe(concat('libs.js')) // 合并成libs.js
.pipe(gulp.dest('dist/js'));
});
```
执行命令：
`gulp concat`
##### 3.5 文件清理([gulp-clean](https://www.npmjs.com/package/gulp-clean))：
简单的说，就是一键删除（清理）文件。就拿为了调试所生成的 .map 文件为例，在正式发布时并不需要，此时我们就能通过 clean任务进行清理。
安装命令：
`npm install gulp-clean --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var clean = require('gulp-clean'); // 文件清理
gulp.task('clean', function() {
return gulp.src(['dist/css/maps','dist/js/maps'], {read: false})
.pipe(clean());
});
```
执行命令：
`gulp clean`
### 4. 其他插件介绍（Other plug-ins）
这部分插件作为扩展阅读，只做简单介绍。每个插件都有每个插件的特性，根据你的喜好和实际操作环境而定，萝卜青菜各有所爱。用的人最多的，不代表就是适合你的。总之，有时间有精力的，可以多试试，多玩玩，多配配，这里也只是冰山一角。
#### 4.1 CSS类
##### 1. CSS压缩 ([gulp-minify-css](https://www.npmjs.com/package/gulp-minify-css))
安装命令：
`npm install gulp-minify-css --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var minifyCss = require('gulp-minify-css'); // CSS压缩
gulp.task('minify-css', function() {
return gulp.src('css/*.css')
.pipe(gulp.dest('dist'));
});
```
执行命令：
`gulp minify-css`
##### 2. CSS预处理/Less编译 ([gulp-less](https://www.npmjs.com/package/gulp-less))
安装命令：
`npm install gulp-autoprefixer --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var less = require('gulp-less'); // LESS编译
gulp.task('less', function () {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
});
```
执行命令：
`gulp less`
##### 3. 自动添加CSS3浏览器前缀([gulp-autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer)):
[-prefix-free](http://leaverou.github.io/prefixfree/) 大家肯定都比较熟，会自动为CSS添加上浏览器的前缀，帮你摆脱前缀痛苦。而 `gulp-autoprefixer` 插件同样如此。
安装命令：
`npm install gulp-autoprefixer --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var autoprefixer = require('gulp-autoprefixer'); // 自动添加CSS3浏览器前缀
gulp.task('prefix', function () {
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
});
var gulp = require('gulp'); // 基础库
var sass = require('gulp-ruby-sass'), // sass/scss编译
autoprefixer = require('gulp-autoprefixer'); // 自动添加CSS3浏览器前缀
gulp.task('sass', function () {
return sass('src/css', { style: 'compressed' }) // 指明源文件路径、并进行文件匹配
.on('error', function (err) {
console.error('Error!', err.message); // 显示错误信息
})
.pipe(autoprefixer({
browsers: ['last 2 versions'], // 主流浏览器的最新两个版本
cascade: false // 是否美化属性值
}))
.pipe(gulp.dest('dist/css')); // 输出路径
});
```
执行命令：
`gulp sass`
#### 4.2 图像类
##### 1. 使用TinyPN API压缩图片([gulp-tinypng](https://www.npmjs.com/package/gulp-tinypng))：
使用TinyPNG官方API进行图片压缩。我个人比较喜欢这个，因为之前一直有在使用。但由于TinyPNG服务器在国外，有时执行起来会很慢，除非你有VPN，所以在这只做简单介绍。
经过我的测试，gulp-tinypng压缩后的图片大小，相当于使用imagemin-pngquant深度压缩后的大小。使用时需先注册TinyPNG账户，获你的API KEY。免费版每个月可以压缩500张图片，对于一般项目而言已经足够。
安装命令：
`npm install gulp-tinypng --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var tinypng = require('gulp-tinypng'); // 使用TinyPN API压缩图片
gulp.task('tinypng', function(){
return gulp.src('src/images/**/*') // 源地址
.pipe(tinypng('填写TinyPN API KEY'))
.pipe(gulp.dest('dist/images')); // 输出路径
});
```
执行命令：
`gulp tinypng`
#### 4.3 其他
##### 1. 缓存代理([gulp-cache](https://www.npmjs.com/package/gulp-cache))：
缓存操作过的文件，当文件修改时，只编译当前修改的文件。其余文件直接从缓存中调取，提高效率。
缺点：因为是缓存，所以如果文件被删除，但没及时清理缓存文件时，就会导致被删除的文件又从缓存中读取了出来，所谓成也萧何败也萧何。
安装命令：
`npm install gulp-cache --save-dev`
基础配置：
```js
var gulp = require('gulp'); // 基础库
var imagemin = require('gulp-imagemin'), // 图片压缩
pngquant = require('imagemin-pngquant'), // 深度压缩
pngquant = require('imagemin-cache'), // 缓存代理
clean = require('imagemin-clean'); // 文件清理
// imagemin 图片压缩（利用cache）
gulp.task('images', function(){
return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
.pipe(cache(imagemin({
progressive: true, // 无损压缩JPG图片
svgoPlugins: [{removeViewBox: false}], // 不要移除svg的viewbox属性
use: [pngquant()] // 使用pngquant插件进行深度压缩
})))
.pipe(gulp.dest('dist/images')); // 输出路径
});
// 清理缓存文件
gulp.task('clean', function (done) {
return cache.clearAll(done);
});
```
### 5. 匹配规则（Match Files）
Gulp使用 [node-glob](https://github.com/isaacs/node-glob) 模块，借助 [minimatch](https://github.com/isaacs/minimatch) 库，将glob表达式(glob expressions)转换成JavaScript正则表达式(JavaScript RegExp) ，从而实现文件匹配功能。我们所看到的`**`和`*`都是其所提供的语法：
`*` 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾。
`**` 匹配路径中的0个或多个目录及其子目录，需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
`?` 匹配文件路径中的一个字符(不会匹配路径分隔符)。
`[...]` 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为`^`或`!`时，则表示不匹配方括号中出现的其他字符中的任意一个。
`!(pattern|pattern|pattern)` 匹配任何与括号中给定的任一参数一致的都不匹配的。
`?(pattern|pattern|pattern)` 匹配括号中给定的任一参数0次或1次。
`+(pattern|pattern|pattern)` 匹配括号中给定的任一参数至少1次。
`*(a|b|c)` 匹配括号中给定的任一参数0次或多次。
`@(pattern|pat*|pat?erN)` 匹配括号中给定的任一参数1次。
用实例来加深理解：
`*` 能匹配 `a.js` , `x.y` , `abc , abc/`，但不能匹配 a/b.js
`*.*` 能匹配 `a.js` , `style.css` , `a.b` , `x.y`
`*/*/*.js` 能匹配 `a/b/c.js` , `x/y/z.js`，不能匹配 `a/b.js` , `a/b/c/d.js`
`**` 能匹配 `abc` , `a/b.js` , `a/b/c.js` , `x/y/z` , `x/y/z/a.b`，能用来匹配所有的目录和文件
`**/*.js` 能匹配 `foo.js` , `a/foo.js` , `a/b/foo.js` , `a/b/c/foo.js`
`a/**/z` 能匹配 `a/z` , `a/b/z` , `a/b/c/z` , `a/d/g/h/j/k/z`
`a/**b/z` 能匹配 `a/b/z , a/sb/z`，但不能匹配 `a/x/sb/z`，因为只有单`**`单独出现才能匹配多级目录
`?.js` 能匹配 `a.js` , `b.js` , `c.js`
`a??` 能匹配 `a.b` , `abc`，但不能匹配 `ab/`，因为它不会匹配路径分隔符
`[xyz].js` 只能匹配 `x.js` , `y.js` , `z.js`，不会匹配 `xy.js` , `xyz.js` 等，整个中括号只代表一个字符
`[^xyz].js` 能匹配 `a.js` , `b.js` , `c.js`等，不能匹配 `x.js` , `y.js` , `z.js`
当有多种匹配模式时可以使用数组：
```js
// 使用数组的方式来匹配多种文件
gulp.src(['js/*.min.js','css/*.min.css'])
```
使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上`!`即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式：
```js
// 使用数组的方式来匹配多种文件
gulp.src(['*.js','!b*.js']) // 匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js',*.js]) // 不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
```
此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：
`a{b,c}d` 会展开为 `abd,acd`
`a{b,}c` 会展开为 `abc,ac`
`a{0..3}d` 会展开为 `a0d`,`a1d`,`a2d`,`a3d`
`a{b,c{d,e}f}g` 会展开为 `abg`,`acdfg`,`acefg`
`a{b,c}d{e,f}g` 会展开为 `abdeg`,`acdeg`,`abdeg`,`abdfg`
### 6. 注意事项（Attention）
* watch 的时候路径不要用 './path'，直接使用 '/path' 即可，不然会导致新增文件无法被 watch。
* gulp 对于 one after one 的任务链，需要加 return，比如 gulp clean
参考资料：
[An introduction to Gulp](http://www.codeproject.com/Articles/865943/An-introduction-to-Gulp)
[gulp API 介绍](http://www.cnblogs.com/2050/p/4198792.html#part3)
扩展资料：
[Gulp API docs](https://github.com/gulpjs/gulp/blob/master/docs/API.md)
[gulp-cheatsheet](https://github.com/osscafe/gulp-cheatsheet)
原文地址：
[Gulp构建前端自动化工作流之：常用插件介绍及使用](http://www.bluesdream.com/blog/gulp-frontend-automation-plugins-instructions.html)
================================================
FILE: Example2/gulpfile.js
================================================
/* = Gulp组件
-------------------------------------------------------------- */
// 引入gulp
var gulp = require('gulp'); // 基础库
// 引入我们的gulp组件
var sass = require('gulp-ruby-sass'), // CSS预处理/Sass编译
uglify = require('gulp-uglify'), // JS文件压缩
imagemin = require('gulp-imagemin'), // imagemin 图片压缩
pngquant = require('imagemin-pngquant'), // imagemin 深度压缩
livereload = require('gulp-livereload'), // 网页自动刷新（服务器控制客户端同步刷新）
webserver = require('gulp-webserver'), // 本地服务器
rename = require('gulp-rename'), // 文件重命名
sourcemaps = require('gulp-sourcemaps'), // 来源地图
changed = require('gulp-changed'), // 只操作有过修改的文件
concat = require("gulp-concat"), // 文件合并
clean = require('gulp-clean'); // 文件清理
/* = 全局设置
-------------------------------------------------------------- */
var srcPath = {
html : 'src',
css : 'src/scss',
script : 'src/js',
image : 'src/images'
};
var destPath = {
html : 'dist',
css : 'dist/css',
script : 'dist/js',
image : 'dist/images'
};
/* = 开发环境( Ddevelop Task )
-------------------------------------------------------------- */
// HTML处理
gulp.task('html', function() {
return gulp.src( srcPath.html+'/**/*.html' )
.pipe(changed( destPath.html ))
.pipe(gulp.dest( destPath.html ));
});
// 样式处理
gulp.task('sass', function () {
return sass( srcPath.css, { style: 'compact', sourcemap: true }) // 指明源文件路径、并进行文件匹配（编译风格：简洁格式）
.on('error', function (err) {
console.error('Error!', err.message); // 显示错误信息
})
.pipe(sourcemaps.write('maps')) // 地图输出路径（存放位置）
.pipe(gulp.dest( destPath.css )); // 输出路径
});
// JS文件压缩&重命名
gulp.task('script', function() {
return gulp.src( [srcPath.script+'/*.js','!'+srcPath.script+'/*.min.js'] ) // 指明源文件路径、并进行文件匹配，排除 .min.js 后缀的文件
.pipe(changed( destPath.script )) // 对应匹配的文件
.pipe(sourcemaps.init()) // 执行sourcemaps
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
.pipe(sourcemaps.write('maps')) // 地图输出路径（存放位置）
.pipe(gulp.dest( destPath.script )); // 输出路径
});
// imagemin 图片压缩
gulp.task('images', function(){
return gulp.src( srcPath.image+'/**/*' ) // 指明源文件路径，如需匹配指定格式的文件，可以写成 .{png,jpg,gif,svg}
.pipe(changed( destPath.image ))
.pipe(imagemin({
progressive: true, // 无损压缩JPG图片
svgoPlugins: [{removeViewBox: false}], // 不要移除svg的viewbox属性
use: [pngquant()] // 深度压缩PNG
}))
.pipe(gulp.dest( destPath.image )); // 输出路径
});
// 文件合并
gulp.task('concat', function () {
return gulp.src( srcPath.script+'/*.min.js' ) // 要合并的文件
.pipe(concat('libs.js')) // 合并成libs.js
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(gulp.dest( destPath.script )); // 输出路径
});
// 本地服务器
gulp.task('webserver', function() {
gulp.src( destPath.html ) // 服务器目录（.代表根目录）
.pipe(webserver({ // 运行gulp-webserver
livereload: true, // 启用LiveReload
open: true // 服务器启动时自动打开网页
}));
});
// 监听任务
gulp.task('watch',function(){
// 监听 html
gulp.watch( srcPath.html+'/**/*.html' , ['html'])
// 监听 scss
gulp.watch( srcPath.css+'/*.scss' , ['sass']);
// 监听 images
gulp.watch( srcPath.image+'/**/*' , ['images']);
// 监听 js
gulp.watch( [srcPath.script+'/*.js','!'+srcPath.script+'/*.min.js'] , ['script']);
});
// 默认任务
gulp.task('default',['webserver','watch']);
/* = 发布环境( Release Task )
-------------------------------------------------------------- */
// 清理文件
gulp.task('clean', function() {
return gulp.src( [destPath.css+'/maps',destPath.script+'/maps'], {read: false} ) // 清理maps文件
.pipe(clean());
});
// 样式处理
gulp.task('sassRelease', function () {
return sass( srcPath.css, { style: 'compressed' }) // 指明源文件路径、并进行文件匹配（编译风格：压缩）
.on('error', function (err) {
console.error('Error!', err.message); // 显示错误信息
})
.pipe(gulp.dest( destPath.css )); // 输出路径
});
// 脚本压缩&重命名
gulp.task('scriptRelease', function() {
return gulp.src( [srcPath.script+'/*.js','!'+srcPath.script+'/*.min.js'] ) // 指明源文件路径、并进行文件匹配，排除 .min.js 后缀的文件
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
.pipe(gulp.dest( destPath.script )); // 输出路径
});
// 打包发布
gulp.task('release', ['clean'], function(){ // 开始任务前会先执行[clean]任务
return gulp.start('sassRelease','scriptRelease','images'); // 等[clean]任务执行完毕后再执行其他任务
});
/* = 帮助提示( Help )
-------------------------------------------------------------- */
gulp.task('help',function () {
console.log('----------------- 开发环境 -----------------');
console.log('gulp default 开发环境（默认任务）');
console.log('gulp html HTML处理');
console.log('gulp sass 样式处理');
console.log('gulp script JS文件压缩&重命名');
console.log('gulp images 图片压缩');
console.log('gulp concat 文件合并');
console.log('---------------- 发布环境 -----------------');
console.log('gulp release 打包发布');
console.log('gulp clean 清理文件');
console.log('gulp sassRelease 样式处理');
console.log('gulp scriptRelease 脚本压缩&重命名');
console.log('---------------------------------------------');
});
================================================
FILE: Example2/src/css/_macro.scss
================================================
@charset "utf-8"; // 必须设置了这个才能编译有中文的注释
$baseFontFamily : "Microsoft YaHei","Hiragino Sans GB",Arial,Helvetica,sans-serif !default;
$baseFontColor : #fff!default;
$baseBgColor : #cf4646!default;
================================================
FILE: Example2/src/css/css.scss
================================================
@charset "utf-8";
@import "_macro";
/* = Reset
------------------------------------------------------------------------------------ */
body,div,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,iframe,input,textarea,select,label,article,aside,footer,header,menu,nav,section,time,audio,video{ margin:0; padding:0;}
html, body{ height:100%; -webkit-touch-callout:none; -webkit-user-select:none;}
body{ background-color: $baseBgColor; font:18px/2 $baseFontFamily; color: $baseFontColor;}
h1, h2, h3, h4, h5, h6 { font-weight: normal}
ul,ol{ list-style:none;}
input,button,textarea{ font-size:inherit; font-family:inherit; outline:none;}
img{border:0; vertical-align:top;}
section{ display:block;}
div,a,img,button,form,input,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0);}
input[type="button"],input[type="submit"],input[type="reset"]{ -webkit-appearance:none;}
audio:not([controls]) { display:none; height:0;}
/* = Content
------------------------------------------------------------------------------------ */
.section{
position: absolute; top: 40%; width: 100%; text-align: center;
}
.section a{
color: #fff;
}
.time{
position: fixed; bottom:2%; right:2%;
}
================================================
FILE: Example2/src/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gulp构建前端自动化工作流之：常用插件介绍及使用</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="section">
<h1>Gulp构建前端自动化工作流之：常用插件介绍及使用</h1>
<p>说明：默认任务启动后，尝试修改该示例中的文件，体验Gulp所带来的便捷。</p>
<p><a href="https://github.com/zhonglimh/Gulp" target="_blank">Github地址</a></p>
</div>
<div class="time" id="time"></div>
<script src="js/libs.min.js"></script>
<script src="js/works.min.js"></script>
</body>
</html>
================================================
FILE: Example2/src/js/works.js
================================================
function getRefreshTime(el){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
document.getElementById(el).innerHTML = '网页最后刷新于：'+year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
}
getRefreshTime('time');
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2015 Ryan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Gulp构建前端自动化工作流
## Gulp3.x
* [Gulp构建前端自动化工作流之：入门介绍及LiveReload的使用](https://github.com/zhonglimh/Gulp/tree/master/Example1)
* [Gulp构建前端自动化工作流之：常用插件介绍及使用](https://github.com/zhonglimh/Gulp/tree/master/Example2)
## Gulp4.x
* [Gulp4 前端自动化工作流配置](https://github.com/zhonglimh/Ublue-gulp-config)
gitextract_i81eo2zb/ ├── Example1/ │ ├── README.md │ └── gulpfile.js ├── Example2/ │ ├── README.md │ ├── gulpfile.js │ └── src/ │ ├── css/ │ │ ├── _macro.scss │ │ └── css.scss │ ├── index.html │ └── js/ │ └── works.js ├── LICENSE └── README.md
SYMBOL INDEX (1 symbols across 1 files)
FILE: Example2/src/js/works.js
function getRefreshTime (line 1) | function getRefreshTime(el){
Condensed preview — 10 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (46K chars).
[
{
"path": "Example1/README.md",
"chars": 6418,
"preview": "## Gulp构建前端自动化工作流\n\n### Gulp构建前端自动化工作流：入门介绍及LiveReload的使用\n\n其实这篇内容已躺在我的Evernote里许久，但一直搁置着，今天算是正式见光。\n\n本文主要介绍如何使用Gulp.js，来帮助"
},
{
"path": "Example1/gulpfile.js",
"chars": 558,
"preview": "// 引入gulp\nvar gulp = require('gulp'); // 基础库\n\n// 引入gulp插件\nvar livereload = require('gulp-livereload'), // 网页"
},
{
"path": "Example2/README.md",
"chars": 14784,
"preview": "## Gulp构建前端自动化工作流\n\n### Gulp构建前端自动化工作流之：常用插件介绍及使用\n\n在对Gulp有了一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。\n\n本文主要分为6个段落：\n\n* 1\\. 构建项目目录结构（"
},
{
"path": "Example2/gulpfile.js",
"chars": 5024,
"preview": "/* = Gulp组件\n-------------------------------------------------------------- */\n// 引入gulp\nvar gulp\t\t\t= require('gulp');\t\t\t"
},
{
"path": "Example2/src/css/_macro.scss",
"chars": 195,
"preview": "@charset \"utf-8\"; // 必须设置了这个才能编译有中文的注释\n\n$baseFontFamily\t: \"Microsoft YaHei\",\"Hiragino Sans GB\",Arial,Helvetica,sans-seri"
},
{
"path": "Example2/src/css/css.scss",
"chars": 1171,
"preview": "@charset \"utf-8\"; \n\n@import \"_macro\";\n\n/* = Reset\n----------------------------------------------------------------------"
},
{
"path": "Example2/src/index.html",
"chars": 484,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Gulp构建前端自动化工作流之：常用插件介绍及使用</title>\n<link rel=\"style"
},
{
"path": "Example2/src/js/works.js",
"chars": 373,
"preview": "function getRefreshTime(el){\n\tvar date = new Date();\n\tvar year = date.getFullYear();\n\tvar month = date.getMonth()+1;\n\tva"
},
{
"path": "LICENSE",
"chars": 1072,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015 Ryan\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "README.md",
"chars": 293,
"preview": "# Gulp构建前端自动化工作流\n\n## Gulp3.x\n\n* [Gulp构建前端自动化工作流之：入门介绍及LiveReload的使用](https://github.com/zhonglimh/Gulp/tree/master/Examp"
}
]
About this extraction
This page contains the full source code of the zhonglimh/Gulp GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 10 files (29.7 KB), approximately 12.4k tokens, and a symbol index with 1 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.