📅  最后修改于: 2020-10-25 06:21:30        🧑  作者: Mango

Gulp是使用Node.js作为平台的任务运行程序。它仅使用JavaScript代码，并有助于运行前端任务和大型Web应用程序。 Gulp构建系统自动化的任务，例如CSS和HTML压缩，串联库文件以及编译SASS文件。这些任务可以在命令行上使用Shell或Bash脚本运行。本教程教您如何使用Gulp通过简单的步骤运行前端任务和大型Web应用程序。完成本教程后，您会发现自己在使用Gulp方面具有中等...

📅  最后修改于: 2020-10-25 06:21:46        🧑  作者: Mango

什么是Gulp？Gulp是使用Node.js作为平台的任务运行程序。 Gulp纯粹使用JavaScript代码，并有助于运行前端任务和大型Web应用程序。它可以构建系统自动化的任务，例如CSS和HTML压缩，连接库文件以及编译SASS文件。可以在命令行上使用Shell或Bash脚本运行这些任务。为什么要使用Gulp？与其他任务运行程序相比，它更短，更简单，更快。使用SASS和LESS作为CSS预处...

📅  最后修改于: 2020-10-25 06:22:08        🧑  作者: Mango

本文提供了Gulp安装的分步过程。Gulp的系统要求操作系统-跨平台浏览器支持-IE（Internet Explorer 8 +），Firefox，Google Chrome，Safari，OperaGulp的安装步骤1-我们需要Node.js来运行Gulp示例。要下载Node.js，请打开https://nodejs.org/en/，您将看到如下所示的屏幕-下载zip文件的最新功能版本。步骤2-...

📅  最后修改于: 2020-10-25 06:22:27        🧑  作者: Mango

在本章中，您将了解一些与Gulp相关的基础知识。什么是构建系统？Build System称为任务集合（统称为任务运行器），它使重复的工作自动化。以下是可以使用构建系统处理的一些任务的列表-预处理CSS和JavaScript的编译。缩小文件以减小其大小。将文件串联在一起。触发服务器进行自动重装。创建部署版本可将生成的文件存储在一个位置。在现代的前端工作流程中，构建系统使用3个组件：包装经理预处理器任...

📅  最后修改于: 2020-10-25 06:22:47        🧑  作者: Mango

在前面的章节中，您研究了Gulp的安装和Gulp基础知识，包括Gulp的构建系统，程序包管理器，任务运行器，Gulp的结构等。在本章中，我们将看到开发应用程序的基础知识，其中包括以下内容-声明所需的依赖项为依赖项创建任务运行任务观看任务依赖声明在为应用程序安装插件时，需要指定插件的依赖性。依赖关系由包管理器（例如bower和npm）处理。让我们用一个名为gulp-imagemin的插件在配置文件中...

📅  最后修改于: 2020-10-25 06:23:12        🧑  作者: Mango

任务使模块化方法可以配置Gulp。我们需要为每个依赖项创建任务，我们会在找到并安装其他插件时将其加总。 Gulp任务将具有以下结构-其中“任务名称”是字符串名称，“函数（）”执行任务。 “ gulp.task”将函数注册为名称中的任务，并指定对其他任务的依赖关系。安装插件让我们使用一个名为minify-css的插件来合并和最小化所有CSS脚本。可以使用npm来安装它，如以下命令所示-要使用“ gu...

📅  最后修改于: 2020-10-25 06:23:29        🧑  作者: Mango

Watch方法用于监视源文件。对源文件进行任何更改后，手表将运行适当的任务。您可以使用“默认”任务来监视HTML，CSS和JavaScript文件的更改。更新默认任务在上一章中，您学习了如何使用默认任务吞并任务。我们使用了gulp-minify-css，gulp-autoprefixer和gulp-concatplugins，并创建了styles任务来缩小CSS文件。要观看CSS文件，我们需要更新...

📅  最后修改于: 2020-10-25 06:23:50        🧑  作者: Mango

Live Reload指定文件系统中的更改。BrowserSync用于查看CSS目录中的所有HTML和CSS文件，并在文件发生更改时在所有浏览器中实时重新加载到页面。 BrowserSync通过在多个设备之间同步URL，交互和代码更改来加快工作流程。安装BrowserSync插件BrowserSync插件提供跨浏览器的CSS注入，可以使用以下命令进行安装。配置BrowserSync插件要使用Bro...

📅  最后修改于: 2020-10-25 06:24:07        🧑  作者: Mango

在本章中，您将学习如何优化CSS和JavaScript。需要进行优化以从源文件中删除不必要的数据（例如，空格和未使用的字符）。它减小了文件的大小，并允许它们更快地加载安装插件以优化CSS和JavaScript从命令行转到“工作”目录，并使用以下命令安装“ gulp-uglify”，“ gulp-minify-css”和“ gulp-concat”插件-声明依赖关系并创建任务在配置文件gulpfil...

📅  最后修改于: 2020-10-25 06:24:23        🧑  作者: Mango

在本章中，您将学习如何优化图像。优化将减小图像的大小并有助于更快地加载。安装插件以优化图像从命令行转到“工作”目录，并使用以下命令安装“ gulp-changed”和“ gulp-imagemin”插件。声明依赖关系并创建任务在配置文件gulpfile.js中，首先声明依赖项，如以下命令所示。接下来，您需要创建任务以优化图像，如以下代码所示。imagemin任务将接受src / images /文...

📅  最后修改于: 2020-10-25 06:24:55        🧑  作者: Mango

Gulp提供了一些有用的插件，可用于HTML和CSS，JavaScript，图形和其他一些功能，如下表所述。HTML和CSS插件Sr.No.Plugin & Description1autoprefixerIt automatically includes prefixes to CSS properties.2gulp-browser-syncIt is used to watch all HT...

📅  最后修改于: 2020-10-25 06:25:11        🧑  作者: Mango

在本章中，您将学习如何清除生成的文件。由于我们会自动生成文件，因此请确保在运行构建之前删除不需要的文件。此过程称为清洁。del插件可用于此目的。安装del插件在命令行中，通过输入以下命令来安装插件。声明依赖关系并创建任务在配置文件gulpfile.js中，声明依赖性，如以下命令所示。接下来，创建一个任务，如以下代码所示。上面的任务将清理整个构建。 clean任务清除所有图像捕获并删除构建中存在的所...

📅  最后修改于: 2020-10-25 06:25:23        🧑  作者: Mango

Gulp是使用Node.js作为平台的任务运行程序。它仅使用JavaScript代码，并有助于运行前端任务和大型Web应用程序。 Gulp构建系统自动化的任务，例如CSS和HTML压缩，串联库文件以及编译SASS文件。这些任务可以在命令行上使用Shell或Bash脚本运行。本教程教您如何使用Gulp通过简单的步骤运行前端任务和大型Web应用程序。完成本教程后，您会发现自己在使用Gulp方面具有中等...