Is there an alternative solution for watching and compiling Tailwind CSS / JavaScript using Gulp

115 Views Asked by At

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.

0

There are 0 best solutions below