大口是前端开发过程中构建代码的工具，是构建自动化项目的利器；它不仅可以优化网站资源，还可以在开发过程中用正确的工具自动完成许多重复的任务。使用它，我们不仅可以愉快地编写代码，还可以大大提高我们的工作效率。

大口是继咕噜之后的后起之秀，主张代码优于配置，api简单方便，基于流程的操作快捷方便。目前所有大型网站都在使用这项技术。

gulp的特点

，好用。大口比咕噜更简洁，下面的代码比配置策略更好。维护大口更像是写代码。

第二，效率高。Grunt比Grunt更有设计感，其核心设计基于Unix stream的概念，通过管道连接，无需编写中间文件。

第三，高质量。grave的每个插件只完成一个功能，这也是Unix的设计原则之一。所有功能通过流程集成，复杂任务完成。比如Grunt的imagemin插件，不仅压缩图片，还包含缓存功能。这意味着缓存是glaugh中的另一个插件，可以被其他插件使用，从而提升了插件的可重用性。目前官方列出的插件有673个。

第四，容易学。大口只有五个核心API。掌握了五个API之后，就可以学习大口，然后通过流水线流程组合自己想要的任务。

第五，流量。在使用Grunt的I/O过程中，会生成一些中间临时文件，一些任务会生成临时文件，其他任务可能会基于临时文件进行再处理，生成最终的后期构建文件。使用glaugh的好处是以流的方式处理文件，通过管道连接多个任务和操作，因此只有一个I/O进程，进程更清晰、更纯粹。

第六，代码比配置好。维护suggest更像是写代码，suggest遵循CommonJS规范，所以和写Node程序没什么区别。

前端工程师不仅要熟练html、css、js，还要透彻理解一些国内外知名的、实用的框架和工具，更高效地应用到项目中。

glaugh是一个基于Nodejs的自动任务运行器，可以自动测试、检查、合并、压缩和格式化javascript、coffee、sass、less、html、image、css等文件，自动刷新浏览器，生成部署文件，监控文件在更改后重复指定的步骤。在实现上借鉴了Unix操作系统的pipe思想，前一阶段的输出直接成为下一阶段的输入，使得操作非常简单。通过这节课，我们将学习如何使用大口来改变开发过程，从而使开发更快、更高效。大口的中国官方网站：http://www.gulpjs.com.cn/

gulp前端自动化开发课程如何讲授

主要突出以下几点：

，循序渐进。本课程从基础开始，讲解简单的大口API。

第二，项目驱动。学习知识点的整个过程都是由项目带动的，让我们在实际项目中看到大口的力量和实用性。

第三，注重实战。听完导师的面授指导，学生要自己完成另一个新项目。

大口前端自动化项目开发过程主要由以下几个部分组成：

首先，什么是大口及其作用

第二，nodeJS环境的安装和包管理器npm的使用

第三，大口的安装和四个API的详细讲解

第四，安装和使用常用的大口插件

第五，在实际工作项目中大量应用

具体内容如下：

部分

gulp是什么以及gulp的作用。

这一部分主要包括三个方面：

什么是大口：

大口是基于流的构建工具，代码优于控件。

大口的作用：

首先，自动压缩JS文件。

第二，自动压缩CSS文件。

第三，自动合并文件。

第四，自动编译Less/Sass源文件。

第五，自动压缩图片。

第六，自动刷新浏览器。

等等。

第二部分

nodeJS环境的安装以及包管理器npm的使用。

节点环境的设置：

官网：http://nodejs.cn/

Node.js是一个javascript运行环境。实际上，它封装了GoogleV8引擎。V8引擎执行javascript非常快，性能非常好。Nodejs本身提供了基本模块，但是在开发实际应用的过程中仍然需要更多的工作来依赖这些基本模块。幸运的是，Nodejs库和框架帮助我们减少了工作量，但是数百个库或框架管理起来非常麻烦。使用npm，您可以快速找到特定服务使用的包，下载、安装和管理已安装的包。

包管理器npm的使用：

全名是node package manager，它是一个与nodejs一起安装的包管理和分发工具。javascript开发人员可以方便地下载、安装、上传和管理已安装的包。它已经成为发布节点模块(包)的非官方标准。要使用npm，必须安装nodejs。

Package.json文件的作用：npm的配置文件。当一个新项目需要建立或者有人与你合作开发时，我们不需要将项目中使用的所有模块(文件大小可能是几百兆)上传到git，只需要将一个配置文件带到项目中。对方得到项目后，只需要一个命令npm install，节点就可以自动读取项目的配置文件，自动下载所有相关模块。

第三部分

gulp的安装以及4个API的详细讲解。

大口安装：

基于nodejs，需要先安装节点环境。安装完成后，打开一个命令窗口，输入：nodev，检查Node是否安装好。全局安装命令：npm安装-全局安装。作为项目的devDependencies安装gulf的命令：NPM install-save-dev gulf。

4种原料药的详细说明：

Gulpfile.js文件：这是gulp的配置文件，放在项目的根目录下。

个，glaugh . src(globs[，options]):Output(emissions)符合提供的匹配模式(glob)或globs数组的文件，这会返回一个乙烯基文件流(虚拟文件流)，可以通过管道连接到其他插件。

Globs参数：类型是字符串或数组、要读取的glob或包含glob的数组。

选项参数：类型为object，具体使用方法参照公文。

第二，glaugh . dest(path[，options]):可以管道输入，会写文件，再次发出所有数据，所以可以管道输入到多个文件夹。如果文件夹不存在，将自动创建它。

Path参数：类型为string或function，文件将写入路径(输出目录)。您也可以传入一个函数，并在函数中返回响应路径。

选项参数：类型为object，具体使用方法参照公文。

再次，大口。task(name[，deps]，fn):建立任务。

名称参数：任务的名称。如果您需要在命令行上运行某些任务，请不要在名称中使用空格。

Deps参数：类型是array，它包含一个在当前任务运行之前将要完成的任务列表。

Fn参数：该函数定义了任务要执行的一些操作。一般来说会是回头客的形式. src()。pipe (someplugin())。

您的任务在这些预相关任务完成之前运行过吗？确保您所依赖的任务列表中的所有任务都使用正确的异步执行方法：使用回调，或者返回一个承诺或流。

第四，大口。手表(glob，tasks):监控文件，当文件发生变化时做点什么。它总是返回一个事件发射器来发出)变更事件

Glob参数：类型是字符串或数组、glob字符串或包含多个glob字符串的数组，用于指定监控哪些文件的更改。

Tasks参数：type array，由glant . task()创建的一个或多个在文件更改后需要执行的任务的名称。

第五，pipe():使用pipe()将源文件流式传输到一个插件，类似于通道。文件通过pipe()和gulp.src流传输到目标文件夹

第四部分

常用的gulp插件安装以及使用。

首先，文件只重命名插件大口-重命名： NPM我-d大口-重命名。

第二：Js文件压缩插件大口-丑：大口-丑：npm i -D大口-丑。

第三：Css文件压缩插件大口-清洁-CSS:NPMI-d大口-清洁-CSS。

第四：Html文件压缩插件大口-imagemin:NPM I-d大口-imagemin。

第五：Html文件压缩插件大口-迷你fy-html:NPM I-d大口-迷你fy-HTMl。

第六：Js/css文件合并插件大口-多联：大口-多联：npm i -D大口-多联。

第七：自动刷新插入式吞咽连接：NPM输入输出吞咽连接。

第五部分

在实际的工作项目中应用gulp

1.在您最喜欢的磁盘上创建项目文件夹。在项目文件夹中新建两个文件夹，dist(目标文件夹，也就是通过galu处理后的标书)和src(源文件夹，也就是一些要通过galu处理的文件)。

先安装nodejs环境，安装完成后打开cmd命令进入你的项目文件夹，检查nodejs是否安装成功，使用nodeV命令检查节点的版本号。如果显示版本号，则节点安装成功。

2.用npm init命令初始化。将指导您创建一个package.json文件，包括名称、版本、作者和其他信息。此时，您的项目文件夹中还会有一个package.json文件

此时，package.json文件的内容是您在命令行上设置的一些选项。

大口安装：全球大口安装(NPM安装-g大口)和本地大口安装(NPM安装-保存-开发大口/NPM安装-d大口)。

全局安装：

本地安装：

安装的同时，将信息写入package.json，如果项目路径中有package.json文件，可以直接使用npminstall方法，根据依赖关系(项目上线后的依赖包)配置安装所有的依赖包，这样在将代码提交给github时，就不需要提交文件夹node_modules了。

安装成功后，一个node_modules文件夹将出现在您的项目文件夹中，并且您安装的项目的版本号将显示在package.json文件的devDependencies选项中。

4.安装大口插件：安装完大口后，安装你在项目中用过的大口插件。使用的命令：NPM npminstall -D名称(名称表示您需要安装的插件的名称，类似于安装大口)。成功安装后自动显示在package.json文件中的devDependencies中。例如：

5.配置gulpfile.js文件

在项目文件夹中创建一个新的gulpfile.js文件。

首先，加载插件，并通过require引入所需的插件。

第二，使用glaugh . task()API创建任务(比如压缩、合并、即时刷新等。).

1.编译sass文件和压缩css任务

说下去之前，稍微解释一下。

这个大口. taskAPI是用来创建任务的。您可以通过终端输入$ gland style命令来执行上述任务。

使用sass插件将所有sass文件编译成压缩的css文件

使用pipe()将源文件流式传输到插件。使用合并插件将所有处理过的css文件合并成一个文件，并将其重命名为main.css .

gought . dest()API用于设置目的路径。一个任务可以有多个目的地，一个用于输出扩展版本，一个用于输出缩减版本。

我建议阅读grave的API文件，了解这些函数方法。他们没有看起来那么可怕！

2.压缩js任务

think . SRCapi用于定义一个或多个源文件。Glob样式，如/**/*。允许SCS匹配多个匹配的文件。返回的流使它成为一种异步机制，所以在我们收到完成通知之前，请确保任务已经完全完成。

3.压缩图片的任务

4.压缩html并重命名任务

5.立即刷新浏览器任务

也可以缩写

6.打开自动刷新服务任务(监控数据变化)

首先，您需要使用connect.server打开一个服务，并将配置项livereload选项设置为true。

为了监控一些文件的变化，并在变化发生后执行相关的任务，需要先建立一个新的任务，并使用大口. watchAPI来监控数据的变化：

请指定您想通过gland . watch收听的文件，并通过相关任务数组定义任务。执行$大口手表开始听文件。一旦有。SCS，js或图片任务被改变，相应的任务将被执行。

如有疑问，可以在大口官网查看详细的api使用方法。

整个文件配置如下：

6.配置完成后，在命令行中输入吞咽命令

执行该命令后，您的项目文件夹将变成上述状态。这时候你写的代码就没问题了。在浏览器中打开localhost:8080/main.html查看页面效果。如果效果实现了，你的项目就完成了！

以上是我们大口前端自动化工具课程的完整讲解。以后我们会努力使用，多练习。我相信一饮而尽会使你的工作更有效率和更快。