前言
在现代 Web 开发中，我们通常使用 CSS 媒体查询来针对不同设备进行页面排版。为了方便维护，我们可能会将媒体查询放在单独的 CSS 文件中，但这也会带来一些问题，例如增加 HTTP 请求次数，影响网页性能等。因此，将媒体查询与普通样式进行分离，同时合并为一个 CSS 文件，是一种比较好的解决方案。
在此背景下，gulp-extract-media-query-ng 这个 npm 包应运而生。本篇文章将会介绍此包的使用方法，以及它的深度和教学意义。
gulp-extract-media-query-ng 简介
gulp-extract-media-query-ng 是一个用于提取 CSS 中媒体查询并分离出来的 gulp 插件。它能自动地将所有媒体查询提取成单独的 CSS 文件，同时将原本的 CSS 文件中的媒体查询针对不同规格的设备添加相应前缀，以支持多种屏幕尺寸的设备。
使用 gulp-extract-media-query-ng，您可以将原本的 CSS 文件转换成两个文件，一个文件包含所有的媒体查询，一个文件包含所有的普通样式。这样，在加载 CSS 文件时，浏览器只需要加载并缓存普通样式文件一次，而需要根据不同设备加载不同的媒体查询文件，大大减轻了页面的加载时间和带宽消耗。
安装和使用
首先，您需要在项目中安装 gulp 和 gulp-extract-media-query-ng：
npm install --save-dev gulp gulp-extract-media-query-ng
然后，在您的 gulpfile.js 中定义相关任务：
const gulp = require('gulp');
const mediaQuery = require('gulp-extract-media-query-ng');
gulp.task('css', function() {
return gulp.src('src/**/*.css')
.pipe(mediaQuery())
.pipe(gulp.dest('dist/'));
});其中，src/**/*.css 表示匹配 src 目录及其所有子目录中的所有 .css 文件，dist/ 则是输出路径。
执行命令 gulp css 即可开始提取 CSS 中的媒体查询并分离出来。
深入学习
1. 支持哪些媒体查询
gulp-extract-media-query-ng 支持以下媒体查询：
- screen，用于电脑屏幕和平板电脑；
- print，用于打印；
- all，用于所有设备（默认情况下，所有普通样式都将添加此媒体查询）；
- speech，用于屏幕阅读器。
如果您需要支持额外的媒体查询，可以像这样在 gulpfile.js 中定义：
const mediaQuery = require('gulp-extract-media-query-ng');
mediaQuery.add('not print and (min-width: 700px)');其中，add() 方法接收一个字符串参数，表示要添加的媒体查询。此方法可以在处理样式文件之前调用。
2. 如何配置 CSS 文件输出路径
您可以在调用 mediaQuery() 函数时传递参数，以配置媒体查询文件和普通样式文件的输出路径。例如：
-- -------------------- ---- -------
----- ---------- - ---------------------------------------
---------------- ---------- -
------ ------------------------
------------------
----- --------
--------- -----------
---
--------------------------
---其中，path 表示输出目录路径，filename 表示输出文件名。
3. 如何自定义媒体查询前缀
gulp-extract-media-query-ng 默认使用以下媒体查询前缀：
- .lt-（小于等于某个尺寸）；
- .gt-（大于某个尺寸）；
- .lt-and-gt-（在两个尺寸之间）。
如果您需要自定义媒体查询前缀，可以像这样在 gulpfile.js 中定义：
const mediaQuery = require('gulp-extract-media-query-ng');
mediaQuery.prefix({
space: '-',
lt: 'w',
gt: 'm'
});其中，prefix() 方法接收一个对象参数，包含 space、lt 和 gt 三个键名。space 表示前缀字符串的连接符，默认为 -；lt 和 gt 则分别表示小于某个尺寸和大于某个尺寸的前缀字符串。如果您不希望使用某个前缀，可以将其设为 false。
示例代码
-- -------------------- ---- -------
-- ---------- --
---- -
------- --
-------- --
---------- -----
-
---------- -
---------- ------
------- - -----
-
------ ------ --- ----------- ----- -
---------- -
---------- -------
-
-
------ ------ --- ----------- ----- -
---------- -
---------- -------
-
-/* screen.css */
.container.lt-75em {
max-width: 1200px;
}
.container.lt-40em {
max-width: 960px;
}-- -------------------- ---- ------- -- ------- -- ---- - ------- -- -------- -- ---------- ----- - ---------- - ------- - ----- - ------------------ - ---------- ------ -
总结
在本文中，我们介绍了 npm 包 gulp-extract-media-query-ng 的使用方法，并深入学习了相关内容。此包能够帮助我们将 CSS 中的媒体查询分离出来，提高页面的性能和用户体验，是 Web 前端开发中的重要工具。希望通过本文的介绍和实例，能够对读者有所帮助和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663681e8991b448e2273