在前端开发中，定制化的样式表是必不可少的一部分。在开发多语言网站时，需要考虑到阿拉伯语、波斯语等从右到左阅读的语言，这时候就需要进行样式翻转，而 gulp-css-flipper 就是一款方便简单的用于翻转 CSS 样式表的 npm 包。
安装 gulp-css-flipper
使用 npm 进行安装：
$ npm install gulp-css-flipper --save-dev
使用示例
Gulpfile.js 配置
在 Gulpfile.js 文件中做如下操作：
const gulp = require('gulp');
const cssFlipper = require('gulp-css-flipper');
gulp.task('cssFlipper', () => {
return gulp.src('./src/css/*.css')
.pipe(cssFlipper())
.pipe(gulp.dest('./dist/css/'));
});翻转前与翻转后的 CSS
翻转前：
-- -------------------- ---- ------- ---- - ---------- ---- - --- - ------ ----- ------- - ---- - -- - ----- - ------ ------ ------- - - - ----- -
翻转后：
-- -------------------- ---- ------- ---- - ---------- ---- - --- - ------ ------ ------- - - - ----- - ----- - ------ ----- ------- - ---- - -- -
API
cssFlipper([options])
可选项：
options.warnOnUnmatched：为 true 时，当没有匹配的选择器时，控制台会产生警告信息，默认为 false。options.ignoreSelectors：一个正则表达式或字符串数组，确定那些不应该被翻转的选择器。
个性化定制
gulp-css-flipper 也允许在选择器中添加前/后缀，从而更好的支持你的文本。使用示例如下：
-- -------------------- ---- -------
----------------------- -- -- -
------ ---------------------------
------------------
---------- -
---- ---------
------- -------
-
---
--------------------------------
---翻转后的 CSS 将会是这样：
/* 翻转前 */
h1 { margin-right: 10px; }
/* 翻转后 */
h1.rtl { margin-left: 10px; }结论
gulp-css-flipper 方便又简单，是开发多语言网站中不可缺少的工具。它极大地简化了样式翻转的过程，并提供了一系列的设定，以方便我们更好的去支持适应各语言不同的阅读需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac5cb5cbfe1ea06109de