100 lines
2.1 KiB
JavaScript
100 lines
2.1 KiB
JavaScript
const browserSync = require("browser-sync").create();
|
|
const child = require("child_process");
|
|
const gulp = require("gulp");
|
|
const gutil = require("gulp-util");
|
|
const mainCSS = "src/style.css"; /* Main stylesheet (pre-build) */
|
|
const siteRoot = "_site";
|
|
const tailwindConfig = "tailwind.js"; /* Tailwind config */
|
|
|
|
/**
|
|
* Fix Windows compatibility issue
|
|
*/
|
|
const jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll";
|
|
|
|
/**
|
|
* Build Jekyll Site
|
|
*/
|
|
gulp.task("jekyll-build", function() {
|
|
browserSync.notify("Building Jekyll site...");
|
|
|
|
return child.spawn(jekyll, ["build"], { stdio: "inherit" });
|
|
});
|
|
|
|
/**
|
|
* Custom PurgeCSS Extractor
|
|
* https://github.com/FullHuman/purgecss
|
|
*/
|
|
class TailwindExtractor {
|
|
static extract(content) {
|
|
return content.match(/[A-z0-9-:\/]+/g);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Compile CSS
|
|
*/
|
|
gulp.task("css", ["jekyll-build"], function() {
|
|
const atimport = require("postcss-import");
|
|
const autoprefixer = require("gulp-autoprefixer");
|
|
const cleancss = require("gulp-clean-css");
|
|
const postcss = require("gulp-postcss");
|
|
const purgecss = require("gulp-purgecss");
|
|
const tailwindcss = require("tailwindcss");
|
|
|
|
browserSync.notify("Compiling CSS...");
|
|
|
|
return gulp
|
|
.src(mainCSS)
|
|
.pipe(postcss([atimport(), tailwindcss(tailwindConfig)]))
|
|
.pipe(
|
|
purgecss({
|
|
content: ["_site/**/*.html"],
|
|
extractors: [
|
|
{
|
|
extractor: TailwindExtractor,
|
|
extensions: ["html", "js"]
|
|
}
|
|
]
|
|
})
|
|
)
|
|
.pipe(
|
|
autoprefixer({
|
|
browsers: ["last 2 versions"],
|
|
cascade: false
|
|
})
|
|
)
|
|
.pipe(cleancss())
|
|
.pipe(gulp.dest("assets/css/"))
|
|
.pipe(gulp.dest("_site/assets/css/"));
|
|
});
|
|
|
|
/**
|
|
* Serve site with Browsersync
|
|
*/
|
|
gulp.task("serve", ["css"], () => {
|
|
browserSync.init({
|
|
files: [siteRoot + "/**"],
|
|
open: "local",
|
|
port: 4000,
|
|
server: {
|
|
baseDir: siteRoot
|
|
}
|
|
});
|
|
|
|
gulp.watch(
|
|
[
|
|
mainCSS,
|
|
tailwindConfig,
|
|
"**/*.html",
|
|
"**/*.md",
|
|
"**/*.yml",
|
|
"!_site/**/*",
|
|
"!node_modules"
|
|
],
|
|
{ interval: 500 },
|
|
["css"]
|
|
);
|
|
});
|
|
|
|
gulp.task("default", ["serve"]);
|