什么是 gulp-query-styles
gulp-query-styles 是一个基于 gulp 的插件，可以让开发者通过简单的配置快速打包样式文件，并支持多种预处理器（如 Less、Sass、Stylus）。它可以进行 CSS 预处理、压缩以及 CSS sprite 等操作，提高样式代码的可维护性和性能。
安装
在安装 gulp-query-styles 之前，需要先安装好 Node.js 和 Gulp。
在终端中，使用 npm 安装 gulp-query-styles：
npm install gulp-query-styles --save-dev
将其加入你的 gulpfile.js 文件中：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------------
------------------- -- -- -
------ ---------------------------
--------------
----- - ------------ ------------ -
---
----------------------------
---然后在终端中执行：
gulp styles
参数说明
gulp-query-styles 支持不同的预处理器和配置项，以下为常见参数说明：
sass：Sass 预处理器的配置项outputStyle：输出样式的格式，可选值为 expanded（全展开）、compact（紧凑）、compressed（压缩）
less：Less 预处理器的配置项paths：导入文件的路径数组，例如['./lib', './assets']
stylus：Stylus 预处理器的配置项compress：是否压缩样式，可选值为true或false
sprite：CSS sprite 的配置项config：CSS sprite 配置文件的路径，例如./spritesmith.jsonlayout：CSS sprite 生成样式的方式，可选值为horizontal或vertical
更多参数详见 gulp-query-styles GitHub 页面。
实例
以下代码演示如何使用 gulp-query-styles 将 Sass 文件转换成 CSS 文件，并自动为每个图片生成 sprite：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------------
------------------- -- -- -
------ ---------------------------
--------------
----- - ------------ ------------ --
------- -
------- ---------------------
------- ------------
-
---
----------------------------
---其中 spritesmith.json 的配置项如下：
{
"src": "./src/images/sprites/*.png",
"imgDest": "./dist/images",
"imgPath": "../images",
"cssDest": "./src/styles",
"cssName": "_sprites.scss",
"padding": 10
}这段代码将图片文件夹中的所有 png 图片合并成一张 sprite 图，样式文件名为 _sprites.scss，其生成样式代码如下：
-- -------------------- ---- ------- ------------ - ----------------- ----------------------------- ------------------ ---------- - --------------- - -------------------- --- ---- ------ ----- ------- ----- - --------------- - -------------------- ----- ------ ------ ----- ------- ----- -
这些代码可以帮助前端开发者更快地完成样式代码的开发，并优化性能，提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601881e8991b448de3e1