Skip to content

Instantly share code, notes, and snippets.

@nezamy
Last active July 9, 2020 21:28
Show Gist options
  • Save nezamy/bd9bbd1307a03749f39218b7a652771c to your computer and use it in GitHub Desktop.
Save nezamy/bd9bbd1307a03749f39218b7a652771c to your computer and use it in GitHub Desktop.
Gulp RTL support in the same file
const { src, dest, watch, series, task } = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sass = require('gulp-sass');
const { postcssRTLCSS } = require('postcss-rtlcss');
const rename = require('gulp-rename');
const rtl_support = require('postcss-rtl-support');
const cleanCss = require('gulp-clean-css');
var processors = [
autoprefixer,
];
function css(cb){
cb();
return src('./src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([rtl_support, postcssRTLCSS]))
.pipe(cleanCss({format: 'beautify', level: { 2: { restructureRules: true } } }))
.pipe(postcss(processors))
.pipe(dest('./dest'))
.pipe(postcss([cssnano]))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest('./dest'));
}
task('watch', function () {
return watch(['./src/**/*.scss'], css);
});
exports.default = css;
"devDependencies": {
"autoprefixer": "^9.8.0",
"cssnano": "^4.1.10",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"postcss-rtl-support": "^1.0.0",
"postcss-rtlcss": "^1.6.0"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment