前言
现今互联网时代，距离移动化设备普及已经不远了。而对于前端开发者而言，保证网站响应式布局适配性，优化性能，提高开发效率已经成为必备的技能之一。在众多的前端工具中，Gulp 是一种非常流行的自动化构建工具，它能够帮助我们更加高效的完成前端构建工作。本文将分享使用 Gulp 自动化响应式设计的实践经验，希望能够为前端开发者提供一些指导意义。
Gulp 简介
Gulp 是一种基于 Node.js 的自动化构建工具，它能够帮助前端开发者优化工作流程，提高开发效率。与 Grunt 不同的是，Gulp 使用了更方便易懂的 API，并且采用了流（stream）的概念，这使得我们可以更好的组合任务，增加任务的灵活性。
Gulp 基本使用
安装 Gulp
在使用 Gulp 之前，您需要先安装 Node.js 和 npm，详细的安装方法可以参考 Node.js 官网。安装完成之后，您可以在终端中输入以下命令进行 Gulp 的全局安装：
npm install gulp -g
编写 Gulp 文件
创建一个名为 gulpfile.js 的文件，此文件便是 Gulp 的配置文件，在其中您可以编辑您所需的各项任务。此处我们以在 Sass 中自动添加浏览器前缀为例：
-- -------------------- ---- -------
--- ---- - ----------------
--- ---- - ---------------------
--- ------------ - -----------------------------
----------------- -------- -- -
------ ----
------------------------
------------ ------------ --------- -------------- ---------------
------
--------------
-------- -----
------- ------
--
-
--------------------------
---
-------------------- ----------在上面的代码中，我们首先引入了 Gulp、Sass 和 Autoprefixer 的依赖包，在 gulp.task() 中我们定义了一个名为 sass 的任务，这个任务会自动将 Sass 文件编译成 CSS 文件，并自动添加浏览器前缀。在任务定义之后，我们使用 gulp.watch() 方法监听 Sass 文件的变化，在文件发生变化时自动执行 sass 任务。
运行 Gulp
在完成 Gulp 文件的编写之后，您可以在命令行中运行以下命令来执行 default 任务：
gulp
或者指定某个任务名：
gulp taskname
这样 Gulp 就会自动运行相应的任务了。
Gulp 实践经验
响应式设计
响应式设计是指网站在不同设备上展示相应的布局及内容，以及保证在不同窗口尺寸、不同分辨率的 PC 及移动设备上都能得到合适的展示。为了优化前端开发效率，我们可以使用 Gulp 实现响应式设计的自动化。
在进行响应式设计时，我们可能需要编写多个版本的样式表，例如针对手机、平板、PC 等不同设备的样式表，这样就会出现多次重复编写的情况。为了避免这种情况，我们可以使用 Gulp 实现 Sass 的自动编译，以及 CSS 压缩与合并，从而实现自动化。
-- -------------------- ---- -------
--- ---- - ----------------
--- ---- - ---------------------
--- ------------ - -----------------------------
--- ------- - ------------------------
--- ------ - -----------------------
----------------- -------- -- -
------ ----
------------------------
------------ ------------ --------- -------------- ---------------
------
--------------
-------- -----
------- ------
--
-
-------------------------
----------------
-------------- -------- ---------- ---
--------------------------
---
------------------ --------- -------- -- -
------------------------------ ----------
---在上述代码中，我们首先引入了 cssnano 和 rename 两个 Gulp 插件，分别用于 CSS 压缩和文件重命名。在 sass 任务中，我们通过 gulp.src() 方法指定 Sass 文件的来源路径，然后编译 Sass 文件，添加浏览器前缀，并将编译后的 CSS 文件通过 gulp.dest() 方法输出到指定的路径中。接着，我们使用 cssnano() 方法实现 CSS 的压缩，使用 rename() 方法重命名文件后再次输出。
自动化优化性能
优化性能是前端开发中不可缺少的一部分，而使用 Gulp 可以帮助我们自动化优化性能。
一种简单的性能优化方式是合并 JS 和 CSS 文件、压缩图片等。例如，我们可以使用 Imagemin 实现图片压缩：
-- -------------------- ---- -------
--- ---- - ----------------
--- -------- - -------------------------
--------------------- -------- -- -
------ ----
-------------------------------------------
-----------------
----------------------------------
---在上述代码中，我们引入了 Gulp 和 Imagemin，使用 gulp.src() 方法指定图片来源路径，然后使用 imagemin() 方法实现图片压缩，最后使用 gulp.dest() 方法将压缩后的图片输出到指定的目录中。
指定文件 Watch
在开发的过程中，当项目变得复杂时，我们避免了一些没必要的监听，可以指定我们要监听的文件。如果不存在指定，Gulp 也可以监听所有的文件，然而，我们该如何指定呢？
方法一
或许是最直观的方法。我们可以使用对象类型的变量，将两个中括号肆意使用：
var paths = {
html: ['./**/*.html', '!./node_modules/**/*.html'], // 忽略 node_modules 中的 html
css: ['./**/*.css', '!./node_modules/**/*.css'],
js: ['./**/*.js', '!./node_modules/**/*.js'],
};
gulp.watch([paths.html, paths.css, paths.js], ['reload']);方法二
也可以使用数组的方式。
gulp.watch(['*.html', 'assets/css/*.css', 'assets/js/*.js'], { cwd: 'app' }, ['reload']);可以看到，我们在 gulp.watch() 中第一个参数传入了一个数组，这个数组包含了要监听的文件的路径。由于我们希望在相应的文件变化时自动执行 reload 任务，因此我们在第二个参数中指定了 ['reload']。此外，为了让命令在正确的目录下运行，我们还添加了 cwd: 'app' 参数。注意，这些被监听的文件路径也可以在 Gulp 的配置文件中被定义，这样可以避免重复的问题。例如：
-- -------------------- ---- -------
--- ----- - -
------- -
---- ---------------------- -----------------------
----- ---------------
--
-------- -
---- -----------------------
----- ----------------
--
------- -
---- -------------------------------------
----- ---------------
--
--
------------------ -------- -- -
---------------------------- ------------
----------------------------- -------------
---------------------------- ------------
---在上述代码中，我们创建了一个名为 paths 的对象，它包含了各个任务所需要处理的文件路径。然后，我们在 gulp.task() 中分别定义了三个任务，并分别指明了它们所要监听的文件路径。
同步执行任务
有时候，我们需要确保某些任务执行完毕后才能执行其他任务，可以使用 run-sequence 插件。
-- -------------------- ---- -------
--- ---- - ----------------
--- ----------- - ----------------------------------
--- ---- - ---------------------
--- ------- - ------------------------
--- ------ - -----------------------
------------------- -------- -- -
------ ----
------------------------------
------------------------- --------------
----------------
-------------- ------- ------ ---
----------------------------------
---
------------------ -------- -- -
------ --------------------- -----------
---在上述代码中，我们首先引入了 run-sequence 插件，并使用 gulp.task() 定义了两个任务 styles 和 build。其中，styles 任务负责编译 Sass 文件，并将编译后的 CSS 文件压缩、重命名后输出到 ./dist/styles 目录中。build 任务将会依次执行 styles 和 scripts 任务。
结论
通过 Gulp 的自动化处理，可以大幅提高开发效率，减少重复工作量，并且能够提高前端开发者的工作乐趣。本文介绍了 Gulp 的基本使用方法，分享了在响应式设计、自动化优化性能、指定文件 Watch 以及同步执行任务等方面的实践经验。希望这些实践经验能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3dbedf40ec5a964e54d1f