什么是gobble-cssnext
gobble-cssnext是一个通过预处理CSS文件为它们添加现代CSS特性的工具链。它可以使您的CSS在大多数浏览器上更加现代化和优化。
gobble-cssnext基于PostCSS和CSSNext的跨平台工具。CSSNext将最新的CSS规范转换为CSS，而PostCSS可以添加插件实现未来的CSS规范，例如autoprefixer等，从而使得CSS更加简单、优雅以及兼容性更好。
安装gobble-cssnext
使用gobble-cssnext前必须先在本地安装gobble-cssnext和它依赖的PostCSS和CSSNext。
使用npm安装：
npm install --global gobble-cssnext
查看版本：
gobble-cssnext --version
使用gobble-cssnext
基本使用
使用gobble-cssnext编译文件非常容易，并且可以使用gobble的语法来过滤和转换CSS文件。
使用以下命令来转换一个CSS文件：
gobble-cssnext input.css output.css
如果您有许多CSS文件需要转换，可以使用Gobble实现全局分数转换：
var gobble = require('gobble');
module.exports = gobble('src/css')
.transform('cssnext')
.moveTo('dist/css');使用CSSNext特性
gobble-cssnext已经为您默认启用了CSSNext，您可以使用CSSNext特性编写您的CSS文件，例如：
div {
flex: 1;
filter: grayscale(50%);
&:hover{
filter: none;
}
}使用 PostCSS 插件
如果您需要添加更多特性或您的使用场景需要，请使用gobble-cssnext添加PostCSS插件。
使用以下例子添加autoprefixer插件：
-- -------------------- ---- -------
--- ------ - ------------------
--- ------------ - ------------------------
-------------- - -----------------
--------------------- -
-------- -
------------
-
--
--------------------配置选项
您也可以使用一些选项来配置插件的行为：
browsers
设置Autoprefixer要支持的浏览器，现实情况下，你可能只需要使用大多数人使用的浏览器
-- -------------------- ---- -------
--- ------ - ------------------
--- ------------ - ------------------------
-------------- - -----------------
--------------------- -
-------- -
----------------------- --- ---- --- -----
-
--
--------------------sourcemap
选择是否为CSS启用sourcemap。有四个选项：
- inline：使用base64 data-uri作为内联sourcemap
- external：使用外部.map文件
- both：生成inline sourcemaps和外部.map文件
- false：不生成sourcemaps
-- -------------------- ---- -------
--- ------ - ------------------
--- ------------ - ------------------------
-------------- - -----------------
--------------------- -
-------- -
----------------------- --- ------
--
---------- ----
--
--------------------示例代码
以下是使用gobble-cssnext的示例代码：
-- -------------------- ---- -------
-- -------------
--- ------ - ------------------
--- ------------ - ------------------------
-------------- - -----------------
--------------------- -
-------- -
----------------------- --- ------
--
---------- ----
--
---------------------- -------------------- ---- -------
-- ----------------- --
--- -
----- --
------- ---------------
--------
------- -----
-
-结论
gobble-cssnext是一个优秀的工具链，可以让您的CSS更加现代和兼容，它的用法简单方便，并且可以使用PostCSS插件扩展它的功能。
如果您正在使用gobble来编写前端代码，那么gobble-cssnext将会是一个必备的工具，可以大大提高您的工作效率并且改善您的代码质量。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee73ea