Gulp - 快速指南
Gulp - Overview
什么是Gulp？
Gulp是一个使用Node.js作为平台的任务运行器。 Gulp纯粹使用JavaScript代码，有助于运行前端任务和大型Web应用程序。 它构建系统自动化任务，如CSS和HTML缩小，连接库文件，以及编译SASS文件。 可以在命令行上使用Shell或Bash脚本运行这些任务。
为什么要使用Gulp？
- 与其他任务运行器相比，它更短，更简单，更快捷。
- 使用SASS和LESS作为CSS预处理器。
- 编辑源文件后自动刷新页面。
- 易于理解和构建Gulpfile.js因为它使用纯JavaScript代码来构建任务。
历史 (History)
所有Gulp文档都包含在CC0许可证中。 最初，Gulp v1.0.0于2015年1月15日发布，当前版本的Gulp为v3.9.0 。
特点 (Features)
- 提供缩小和连接。
- 使用纯JavaScript代码。
- 将LESS或SASS转换为CSS编译。
- 通过使用Node.js平台管理内存中的文件操作并提高速度。
优势 (Advantages)
- 比任何其他任务跑步者更快的速度优势
- 易于编码和理解。
- 易于测试Web应用程序..
- 插件使用简单，一次只能做一件事。
- 重复执行重复性任务，例如缩小样式表，压缩图像等。
缺点 (Disadvantages)
- 与Grunt相比，更多的依赖项是新手。
- 使用Gulp插件，您无法执行多个任务。
- 配置不如Grunt干净。
Gulp - Installation
本文提供了Gulp安装的分步过程。
Gulp的系统要求
Operating System - 跨平台
Browser Support - IE（Internet Explorer 8+），Firefox，谷歌浏览器，Safari，Opera
安装Gulp
Step 1 - 我们需要Node.js来运行Gulp示例。 要下载Node.js，请打开https://nodejs.org/en/ ，您将看到如下所示的屏幕 -
下载zip文件的最新功能版本。
Step 2 - 接下来，运行安装程序以在您的计算机上安装NodeJs 。
Step 3 - 您需要设置环境变量。
路径用户变量
- 右键单击“我的电脑”。
- 选择属性。
- 选择“高级”选项卡，然后单击“环境变量”。
在Environment Variables窗口下，双击PATH，如下面的屏幕所示。
您将看到一个Edit User Variable窗口，如以下屏幕截图所示。 在“变量值”字段中将Node.js文件夹路径添加为C:\Program Files\nodejs\node_modules\npm。 如果已经为其他文件设置了路径，则需要在此之后添加分号（;）并添加Node.js路径，如以下屏幕截图所示。
最后，单击“确定”按钮。
System Variable
在“系统变量”下，双击“路径”，如以下屏幕所示。
您将看到一个Edit System Variable窗口，如以下屏幕截图所示。 将“变量值”字段中的Node.js文件夹路径添加为C:\Program Files\nodejs\ ，然后单击“确定”，如以下屏幕截图所示。
Step 4 - 在系统中打开命令提示符，然后输入以下命令。 它将显示已安装的Node.js版本。
node -v
Step 5 - 在命令提示符下，输入以下命令以显示用于安装模块的npm（Node.js包管理器）的版本。 它将显示已安装的Node.js版本。
npm -v
Step 6 - 在命令提示符下，输入以下命令以安装Gulp。 添加“-g”标志可确保Gulp全局可用于任何项目。
npm install gulp -g
Step 7 - 要验证Gulp是否已成功安装，请输入以下命令以显示Gulp版本。
gulp -v
Gulp - Basics
在本章中，您将了解与Gulp相关的一些基础知识。
什么是构建系统？
构建系统称为任务集合（统称为task runners ），可自动执行重复性工作。
以下是使用构建系统可以处理的一些任务的列表 -
- 编译预处理CSS和JavaScript。
- 缩小文件以减小其大小。
- 将文件连接成一个。
- 触发服务器以自动重新加载。
- 创建部署构建以将生成的文件存储在一个位置。
在现代前端工作流程中，构建系统使用3个组件 -
- 包管理员
- Preprocessors
- 任务运行器和构建工具
包裹经理
它用于自动化安装升级，删除所需的依赖项，清理库以及开发环境中使用的包。 包管理器的示例是bower和npm 。
预处理器(Preprocessors)
通过添加优化语法和编译为其母语的其他功能，预处理器对于高效的现代工作流非常有用。
一些流行的预处理器是 -
CSS - SASS，LESS和Stylus。
JS - CoffeeScript，LiveScript，TypeScript等
HTML - Markdown，HAML，Slim，Jade等
任务跑步者
任务运行器可自动执行SASS到CSS转换，缩小文件，优化图像以及开发工作流程中使用的许多其他任务等任务。 Gulp是现代前端工作环境中的任务运行者之一，它运行在Node上。
设置项目
要在计算机中设置项目，请创建一个名为“work”的文件夹。 工作文件夹包含以下子文件夹和文件 -
Src - 预处理的HTML源文件和文件夹的位置。
Images - 包含未压缩的图像。
Scripts - 包含多个预处理的脚本文件。
Styles - 包含多个预处理的CSS文件。
Build - 将自动创建包含生产文件的此文件夹。
Images - 包含压缩图像。
Scripts - 包含缩小代码的单个脚本文件。
Styles - 包含缩小代码的单个CSS文件。
gulpfile.js - 它是配置文件，用于定义我们的任务。
Gulp - Developing An Application
在前面的章节中，您已经研究了Gulp安装和Gulp基础知识 ，其中包括Gulp构建系统，包管理器，任务运行器，Gulp结构等。
在本章中，我们将看到开发应用程序的基础知识，其中包括以下内容 -
- 声明所需的依赖项
- 为依赖项创建任务
- Running the task
- Watching the task
依赖性声明
在为应用程序安装插件时，需要为插件指定依赖项。 依赖关系由包管理器（如bower和npm）处理。
让我们用一个名为gulp-imagemin插件在配置文件中为它定义依赖项。 此插件可用于压缩映像文件，可使用以下命令行进行安装 -
npm install gulp-imagemin --save-dev
您可以将依赖项添加到配置文件中，如以下代码所示。
var imagemin = require('gulp-imagemin');
上面的行包括插件，它包含在一个名为imagemin的对象中。
创建依赖关系的任务
任务启用模块化方法来配置Gulp。 我们需要为每个依赖项创建一个任务，我们会在找到并安装其他插件时添加这些任务。 Gulp任务将具有以下结构 -
gulp.task('task-name', function() {
//do stuff here
});
其中'task-name'是一个字符串名称，'function（）'执行你的任务。 'gulp.task'将函数注册为name中的任务，并指定对其他任务的依赖性。
您可以为以上定义的依赖项创建任务，如以下代码所示。
gulp.task('imagemin', function() {
var img_src = 'src/images/**/*', img_dest = 'build/images';
gulp.src(img_src)
.pipe(changed(img_dest))
.pipe(imagemin())
.pipe(gulp.dest(img_dest));
});
图像位于src/images/**/* ，保存在img_srcobject中。 它通过管道传递给imagemin构造函数创建的其他函数。 它通过调用带有参数的dest方法压缩来自src文件夹的图像并复制到build文件夹，该参数表示目标目录。
运行任务
Gulp文件已设置并准备执行。 在项目目录中使用以下命令来运行任务 -
gulp imagemin
在使用上述命令运行任务时，您将在命令提示符中看到以下结果 -
C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)
Gulp - Combining Tasks
任务启用模块化方法来配置Gulp。 我们需要为每个依赖项创建任务，我们会在找到并安装其他插件时添加这些任务。 Gulp任务将具有以下结构 -
gulp.task('task-name', function() {
//do stuff here
});
其中“task-name”是一个字符串名称，“function（）”执行你的任务。 “gulp.task”将该函数注册为名称中的任务，并指定对其他任务的依赖性。
安装插件
让我们拿一个名为minify-css插件来合并和缩小所有CSS脚本。 它可以使用npm安装，如以下命令所示 -
npm install gulp-minify-css --save-dev
要使用“gulp-minify-css插件”，您需要安装另一个名为“gulp-autoprefixer”的插件，如以下命令所示 -
npm install gulp-autoprefixer --save-dev
要连接CSS文件，请安装gulp-concat，如以下命令所示 -
npm install gulp-concat --save-dev
安装插件后，您需要在配置文件中编写依赖项，如下所示 -
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');
将任务添加到Gulp文件
我们需要为每个依赖项创建任务，我们将在安装插件时添加这些任务。 Gulp任务将具有以下结构 -
gulp.task('styles', function() {
gulp.src(['src/styles/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('build/styles/'));
});
'concat'插件连接CSS文件，'autoprefix'插件表示所有浏览器的当前版本和先前版本。 它通过使用参数调用'dest'方法来缩小src文件夹中的所有CSS脚本并复制到build文件夹，该参数表示目标目录。
要运行任务，请在项目目录中使用以下命令 -
gulp styles
同样，我们将使用另一个名为'gulp-imagemin'的插件来压缩图像文件，该文件可以使用以下命令安装 -
npm install gulp-imagemin --save-dev
您可以使用以下命令将依赖项添加到配置文件中 -
var imagemin = require('gulp-imagemin');
您可以为以上定义的依赖项创建任务，如以下代码所示。
gulp.task('imagemin', function() {
var img_src = 'src/images/**/*', img_dest = 'build/images';
gulp.src(img_src)
.pipe(changed(img_dest))
.pipe(imagemin())
.pipe(gulp.dest(img_dest));
});
图像位于“src/images/**/*”中，它们保存在img_srcobject中。 它通过管道传输给'imagemin'构造函数创建的其他函数。 它压缩来自src文件夹的图像并通过使用参数调用'dest'方法复制到build文件夹，该参数表示目标目录。
要运行任务，请在项目目录中使用以下命令 -
gulp imagemin
结合多个任务
您可以通过在配置文件中创建默认任务来一次运行多个任务，如以下代码所示 -
gulp.task('default', ['imagemin', 'styles'], function() {
});
Gulp文件已设置并准备执行。 在项目目录中运行以下命令以运行上述组合任务 -
gulp
在使用上述命令运行任务时，您将在命令提示符中获得以下结果 -
C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images
Gulp - Watch
Watch方法用于监视源文件。 当对源文件进行任何更改时，手表将运行适当的任务。 您可以使用“默认”任务来监视对HTML，CSS和JavaScript文件的更改。
更新默认任务
在上一章中，您学习了如何使用默认任务gulp combining tasks任务。 我们使用了gulp-minify-css，gulp-autoprefixer和gulp-concatplugins，并创建了样式任务来缩小CSS文件。
要查看CSS文件，我们需要更新“默认”任务，如以下代码所示:
gulp.task('default', ['styles'], function() {
// watch for CSS changes
gulp.watch('src/styles/*.css', function() {
// run styles upon changes
gulp.run('styles');
});
});
将监视work/src/styles/文件夹下的所有CSS文件，并在对这些文件进行更改时，将执行样式任务。
运行默认任务
使用以下命令运行“default”任务。
gulp
执行上述命令后，您将收到以下输出。
C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
每当对CSS文件进行任何更改时，您将收到以下输出。
C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task
triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms
Watch流程将保持活动状态并响应您的更改。 您可以按Ctrl+C终止监视进程并返回命令行。
Gulp - Live Reload
Live Reload指定文件系统中的更改。 BrowserSync用于监视CSS目录中的所有HTML和CSS文件，并在文件更改时对所有浏览器中的页面执行实时重新加载。 BrowserSync通过跨多个设备同步URL，交互和代码更改，使工作流程更快。
安装BrowserSync插件
BrowserSync插件提供跨浏览器的CSS注入，可以使用以下命令进行安装。
npm install browser-sync --save-dev
配置BrowserSync插件
要使用BrowserSync插件，您需要在配置文件中编写依赖项，如以下命令所示。
var browserSync = require('browser-sync').create();
您需要为BrowserSync创建任务以使用Gulp与服务器一起使用。 由于您正在运行服务器，因此您需要在BrowserSync上查询服务器的根目录。 在这里，我们使用基目录作为'build'。
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'build'
},
})
})
您还可以使用CSS文件的以下任务将新样式注入浏览器。
gulp.task('styles', function() {
gulp.src(['src/styles/*.css'])
.pipe(concat('style.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('build/styles/'))
.pipe(browserSync.reload({
stream: true
}))
});
在为BrowserSync创建任务之前，您需要使用包管理器安装插件，并在配置文件中编写依赖关系，如chapter所定义。
完成配置后，运行BrowserSync和watchTask以发生实时重新加载效果。 我们将通过添加browserSynctask和watchTask来运行它们，而不是单独运行两个命令行，如下面的代码所示。
gulp.task('default', ['browserSync', 'styles'], function (){
gulp.watch('src/styles/*.css', ['styles']);
});
在项目目录中运行以下命令以执行上述组合任务。
gulp
使用上面的命令运行任务后，您将在命令提示符下获得以下结果。
C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.1.4:3000
------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.4:3001
------------------------------------
[BS] Serving files from: build
它将使用URL http://localhost:3000/打开浏览器窗口。 对CSS文件所做的任何更改都将反映在命令提示符中，并且浏览器会自动使用更改的样式重新加载。
Gulp - Optimizing CSS and JavaScript
在本章中，您将学习如何优化CSS和JavaScript。 需要进行优化以从源文件中删除不必要的数据（例如空格和未使用的字符）。 它减少了文件的大小，并允许它们加载更快
安装插件以优化CSS和JavaScript
从命令行转到“work”目录并使用以下命令安装“gulp-uglify”，“gulp-minify-css”和“gulp-concat”插件 -
npm install gulp-uglify gulp-minify-css gulp-concat
声明依赖关系和创建任务
在配置文件gulpfile.js ，首先声明依赖项，如以下代码所示。
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
接下来，您需要创建用于优化CSS和JavaScript的任务，如以下代码所示。
gulp.task('js', function(){
gulp.src('src/scripts/*.js')
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(gulp.dest('build/scripts/'));
});
gulp.task('css', function(){
gulp.src('src/styles/*.css')
.pipe(concat('styles.css'))
.pipe(minify())
.pipe(gulp.dest('build/styles/'));
});
gulp.task('default',['js','css'],function(){
});
js任务将接受来自src/scripts/文件夹的.js文件。 它连接并uglify js文件，然后生成build/scripts/script.js文件。
CSS任务将接受来自src/styles/文件夹的.css文件。 它连接和缩小CSS文件，然后生成build/styles/styles.css文件。
运行任务
配置文件已设置并准备执行。 使用以下命令运行该任务。
gulp
在使用上述命令运行任务时，您将在命令提示符下收到以下结果。
C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs
Gulp - Optimizing Images
在本章中，您将学习如何优化图像。 优化将减小图像的大小并有助于加快加载速度。
安装插件以优化图像
从命令行转到“work”目录，并使用以下命令安装“gulp-changed”和“gulp-imagemin”插件。
npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev
声明依赖关系和创建任务
在配置文件gulpfile.js ，首先声明依赖项，如以下命令所示。
var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
接下来，您需要创建用于优化图像的任务，如以下代码所示。
gulp.task('imagemin', function() {
var imgSrc = 'src/images/*.+(png|jpg|gif)',
imgDst = 'build/images';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('default',['imagemin'],function(){
});
imagemin任务将接受来自src/images/文件夹的png，jpg和gif图像，并在将其写入目标之前将其缩小。 changed()确保每次只传递新文件以进行缩小。 gulp-changed插件只会处理新文件，因此占用了宝贵的时间。
运行任务
配置文件已设置并准备执行。 使用以下命令运行该任务。
gulp
在使用上述命令运行任务时，您将在命令提示符下收到以下结果。
C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)
Gulp - Useful Plugins
Gulp提供了一些有用的插件来处理HTML和CSS，JavaScript，Graphics以及下表中描述的其他一些内容。
HTML和CSS插件
| Sr.No. | 插件和说明 |
|---|---|
| 1 | autoprefixer 它自动包含CSS属性的前缀。 |
| 2 | gulp-browser-sync 它用于监视CSS目录中的所有HTML和CSS文件，并在文件更改时对所有浏览器中的页面执行实时重新加载 |
| 3 | gulp-useref 它用于替换对非优化脚本或样式表的引用。 |
| 4 | gulp-email-design 它创建HTML电子邮件模板，将CSS样式转换为内联。 |
| 5 | gulp-uncss 它优化CSS文件并查找未使用和重复的样式。 |
| 6 | gulp-csso 它是一个CSS优化器，可以最小化CSS文件，从而缩小文件大小。 |
| 7 | gulp-htmlmin 它最小化HTML文件。 |
| 8 | gulp-csscomb 它用于制作CSS的样式格式化程序。 |
| 9 | gulp-csslint 它指定了一个CSS linter。 |
| 10 | gulp-htmlhint 它指定了一个HTML验证器。 |
JavaScript插件
| Sr.No. | 插件和说明 |
|---|---|
| 1 | gulp-autopolyfiller 它与autoprefixer相同，包括JavaScript的必要polyfill。 |
| 2 | gulp-jsfmt 它用于搜索特定的代码片段。 |
| 3 | gulp-jscs 它用于检查JavaScript代码样式。 |
| 4 | gulp-modernizr 它指定了用户浏览器提供的HTML，CSS和JavaScript功能。 |
| 5 | gulp-express 它启动gulp express.js web服务器。 |
| 6 | gulp-requirejs 它使用require.js将require.js AMD模块组合到一个文件中。 |
| 7 | gulp-plato 它生成复杂性分析报告。 |
| 8 | gulp-complexity 它分析了代码的复杂性和可维护性。 |
| 9 | fixmyjs 它修复了JSHint的结果。 |
| 10 | gulp-jscpd 它用作源代码的复制/粘贴检测器。 |
| 11 | gulp-jsonlint 它是JSON验证器。 |
| 12 | gulp-uglify 它缩小了JavaScript文件。 |
| 13 | gulp-concat 它连接CSS文件。 |
单元测试插件
| Sr.No. | 插件和说明 |
|---|---|
| 1 | gulp-nodeunit 它运行Gulp的节点单元测试。 |
| 2 | gulp-jasmine 它用于报告与输出相关的问题。 |
| 3 | gulp-qunit 它为QUnit测试提供基本的控制台输出，并使用PhantomJS节点模块和PhantomJS运行器QUnit插件。 |
| 4 | gulp-mocha 它指定了Mocha周围的薄包装并运行Mocha测试。 |
| 5 | gulp-karma 它已在Gulp中弃用。 |
图形插件
| Sr.No. | 插件和说明 |
|---|---|
| 1 | gulpicon 它从SVG生成精灵并将它们转换为PNG。 |
| 2 | gulp-iconfont 它与Web字体一起用于从SVG创建WOFF，EOT，TTF文件。 |
| 3 | gulp-imacss 它将图像文件转换为数据URI并将它们放入单个CSS文件中。 |
| 4 | gulp-responsive 它为不同的设备生成响应图像 |
| 5 | gulp-sharp 它用于更改和调整图像的方向和背景。 |
| 6 | gulp-svgstore 它将SVG文件与 |
| 7 | gulp-imagemin & gulp-tinypng 它用于压缩图像，如PNG，JPEG，GIF，SVG。 |
| 8 | gulp-spritesmith 它用于从一组图像和CSS变量创建spritesheet。 |
编译器插件
| Sr.No. | 插件和说明 |
|---|---|
| 1 | gulp-less 它为Gulp提供了LESS插件。 |
| 2 | gulp-sass 它为Gulp提供SASS插件。 |
| 3 | gulp-compass 它为Gulp提供指南针插件。 |
| 4 | gulp-stylus 它用于将手写笔保存在CSS中。 |
| 5 | gulp-coffee 它为Gulp提供了coffeescript插件。 |
| 6 | gulp-handlebars 它为Gulp提供了把手插件。 |
| 7 | gulp-jst 它在JST中提供下划线模板。 |
| 8 | gulp-react 它将Facebook React JSX模板指定为JavaScript。 |
| 9 | gulp-nunjucks 它在JST中指定Nunjucks模板。 |
| 10 | gulp-dustjs 它在JST中指定了Dust模板。 |
| 11 | gulp-angular-templatecache 它在templateCache中指定AngularJS模板。 |
其他插件
gulp-clean插件删除文件和文件夹，gulp-copy插件将文件从源复制到新目标。
| Sr.No. | 插件和说明 |
|---|---|
| 1 | gulp-grunt 它运行Gulp的Grunt任务 |
| 2 | gulp-watch 它会在发生更改时监视文件。 |
| 3 | gulp-notify 它会在任务失败时通知错误消息。 |
| 4 | gulp-git 它允许使用Git命令。 |
| 5 | gulp-jsdoc 它为Gulp创建JavaScript文档。 |
| 6 | gulp-rev 它为文件名提供静态资产修订。 |
| 7 | gulp-bump 它增加了JSON包中的版本。 |
| 8 | gulp-bower-files 它用于注入凉亭包。 |
| 9 | gulp-removelogs 它删除了console.log语句。 |
| 10 | gulp-preprocess 它根据上下文或环境配置预处理HTML，JavaScript和其他文件。 |
| 11 | gulp-duration 它指定Gulp任务的持续时间。 |
| 12 | gulp-changed & gulp-newer 它运行修改过的文件和更新的文件。 |
| 13 | gulp-connect 它用于使用LiveReload运行Web服务器。 |
| 14 | gulp-shell 它运行Shell命令。 |
| 15 | gulp-ssh 它使用SSH和SFTP任务进行连接。 |
| 16 | gulp-zip 它压缩文件和文件夹。 |
| 17 | gulp-clean＆gulp-copy |
| 18 | gulp-filesize 它以人类可读的格式指定文件大小。 |
| 19 | gulp-util 它为gulp插件提供实用程序。 |
Gulp - Cleaning Unwanted Files
在本章中，您将学习如何清理生成的文件。 由于我们自动生成文件，因此请确保在运行构建之前删除不必要的文件。 此过程称为cleaning 。 del插件可用于此目的。
安装del Plugins
在命令行中输入以下命令安装插件。
npm install del --save-dev
声明依赖关系和创建任务
在配置文件gulpfile.js ，声明依赖项，如以下命令所示。
var del = require('del');
接下来，创建一个任务，如下面的代码所示。
gulp.task('clean:build', function() {
return del.sync('build');
});
上述任务将清除整个构建。 clean任务清除所有图像捕获并删除构建中存在的任何旧文件。
可以仅清除特定文件或文件夹，并保留其中一些不变，如下面的代码所示。
gulp.task('clean:build', function() {
//return del.sync('build');
return del([
'build/temp/',
// instructs to clean temp folder
'!build/package.json'
// negate to instruct not to clean package.json file ]);
});
在上面的任务中，只有temp文件夹将被清除，而package.json不会受到影响。
