如何在 gulp 中使用 WindiCSS?

Question

前端

如何在 gulp 中使用 WindiCSS?

Answer 1

@[toc]

Windi CSS是Tailwind CSS的下一代编译器。

如果您已经熟悉Tailwind CSS，可以考虑用Windi CSS替代Tailwind CSS，它提供了更快的加载时间，并支持Tailwind CSS v2.0及更高版本中的所有功能。

如果您不熟悉Tailwind CSS，则可以将Windi CSS视为实用程序优先的CSS库。

数值:

p-${float[0,...infinite]} -> padding: ${float/4}rem

p-2.5 -> padding: 0.625rem;
p-3.2 -> padding: 0.8rem;

尺寸:

// ${size} must end up with rem|em|px|vh|vw|ch|ex
p-${size} -> padding: ${size}

p-3px -> padding: 3px;
p-4rem -> padding: 4rem;

分数:

w-${fraction} -> width: ${fraction -> precent}

w-9/12 -> width: 75%;

颜色:

bg-${color} -> background-color: rgba(...)

bg-gray-300 -> background-color: rgba(209, 213, 219, var(--tw-bg-opacity);

bg-hex-${hex} -> background-color: rgba(...)

bg-hex-1c1c1e -> background-color: rgba(28, 28, 30, var(--tw-bg-opacity));

变量:

bg-${variableName}

.bg-$test-variable {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--test-variable), var(--tw-bg-opacity));
}

windicss对上面所示的处理更简单, 不需要像Tailwind CSS那样需要在配置文件里就行大量的配置,

附, windicss支持的框架:

Frameworks	Package
CLI	Built-in
VSCode Extension	windicss-intellisense
Vite	vite-plugin-windicss
Rollup	rollup-plugin-windicss
Webpack	windicss-webpack-plugin
Vue (Webpack)	vue-windicss-preprocess
Nuxt	nuxt-windicss
Svelte	svelte-windicss-preprocess
Vue CLI	vue-cli-plugin-windicss

更多有点, 自行浏览windicss官方文档: https://windicss.org/guide/introduction.html

由于windicss没有支持gulp的插件, 自己也没写过gulp的插件, 那么就只能曲线救国了。

1. 添加一个监听 html 的任务

const src = {
    root: basedir + 'src/',

    tailwind: basedir + 'src/tailwind/tailwind.css',

    html: basedir + 'src/*.html',
    in_html: basedir + 'src/**/*.html'
}

gulp.task('auto_task_other', function (done) {
    // 监听所有HTML文件, 路径根据项目结构, 自行更改
    const watcherHtml = gulp.watch(src.in_html)
    watcherHtml.on('change', async function (path) {
	// 监听到html文件改动时, 执行编译
        await compileTailwind()
        console.log(`File ${path} was changed`)
    })
    watcherHtml.on('add', async function (path) {
	// 监听到添加html文件时, 执行编译
        await compileTailwind()
        console.log(`File ${path} was added`)
    })
    watcherHtml.on('unlink', function (path) {
        console.log(`File ${path} was removed`)
    })
    done()
})

2. 编写编译`windicss`的方法

由于windicss没有支持 gulp 的插件, 但是有CLI, 所以这里我们就通过CLI来编译, 那么就需要用到gulp-shell这个插件, 可以在 gulp 里执行 sheel 命令

具体命令, 请参考官方文档: https://windicss.org/guide/cli.html

# yarn add windicss gulp-shell --dev

这里需要注意, src.tailwind对应的文件, 最好先创建好, 空文件就行, 编译后的 css 会保存到这个文件, 后续也可以继续对这个文件进行处理

const wait = require('gulp-wait')
const shell = require('gulp-shell')

const compileTailwindSheel = async () => {
    await new Promise(resolve => {
        gulp.src([src.tailwind])
            .pipe(wait(200))
            .pipe(shell(["npx windicss './" + src.in_html + "' -to " + src.tailwind]))
            .on('end', function () {
                console.log('compile_tailwind_end')
                resolve()
            })
    })
}

const compileTailwind = async () => {
    await compileTailwindSheel()
    await scssTask() // 这里可以对生成的css进行后续的postcss处理
}

这里只简单的说明了下, 如何自动编译windicss, 完整的配置请参考仓库: https://github.com/lincenying/gulp-startup