I am developing a template for a website that uses CMS. I decided to use Tailwind CSS with SCSS as base, but I also needed something to bundle all styles together + minify them and send them directly via FTP to test server. Then I found Gulp and got it working, by now the main code looks like this:
gulp.task("css", () => {
const postcss = require("gulp-postcss");
return gulp
.src(["./assets/css/styles.scss"])
.pipe(
postcss([
require('postcss-partial-import')({}),
require("postcss-import"),
require("postcss-import-url"),
require("tailwindcss/nesting"),
require("tailwindcss"),
require("autoprefixer"),
])
)
.pipe(sass().on("error", sass.logError))
.pipe(cleanCSS())
.pipe(purgeCSS({
extractors: [
{
extractor: purgeCSSFromHTML,
extensions: ['tpl']
}
],
content: [
'template/**/*.{html,js,tpl}'
],
variables: false,
safelist: [
"bb-editor",
"dtitle",
"install",
"downlist",
"gallery",
"ug-gallery-wrapper",
"reputation",
'tippy',
'tippy-box',
]
}))
.pipe(convertEncoding({to: 'win1251'}))
.pipe(gulp.dest("template/assets/css"));
});
gulp.task('deploy', function () {
var conn = ftp.create({
host: '88.xx.xx.xx',
user: 'xxx',
password: 'xxx',
parallel: 8,
log: gutil.log
});
var globs = [
'template/**/*.css',
'template/**/*.tpl',
'assets/**/*.css',
'template/**/*.js',
];
return gulp
.src(globs, { base: './template', buffer: false })
.pipe(conn.newer('/templates/rework'))
.pipe(conn.dest('/templates/rework'));
});
But right now I want to migrate to Windi CSS or at least find a better replacement for Gulp, because I noticed that Gulp and it's plugins get less updates and more projects start using Webpack or other bundlers.