gulp.js

////////////////////////////////
// Setup
////////////////////////////////

// Gulp and package
const { src, dest, parallel, series, watch } = require("gulp");
const pjson = require("./package.json");

// Plugins
const postcssimport = require("postcss-import");
const postcssnested = require("postcss-nested");
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const browserSync = require("browser-sync").create();

const cssnano = require("cssnano");
const imagemin = require("gulp-imagemin");
//const pixrem = require("pixrem");
const plumber = require("gulp-plumber");
const postcss = require("gulp-postcss");
const reload = browserSync.reload;
const rename = require("gulp-rename");
//const sass = require("gulp-sass");
const spawn = require("child_process").spawn;
const uglify = require("gulp-uglify-es").default;

// Relative paths function
function pathsConfig(appName) {
    this.app = `./${pjson.name}`;
    const vendorsRoot = "node_modules";

    return {
        app: this.app,

        css_src: `${this.app}/static/src/css`,
        css: `${this.app}/static/css`,
        fonts: `${this.app}/static/fonts`,
        images: `${this.app}/static/images`,
        js: `${this.app}/static/js`,
        templates: `${this.app}/templates`,
        vendors: "node_modules"
    };
}

var paths = pathsConfig();

////////////////////////////////
// Tasks
////////////////////////////////

// Styles autoprefixing and minification
function styles() {
    var processCss = [
        postcssimport(),
        postcssnested(),
        tailwindcss(), // tailwindcss magic !
        autoprefixer() // adds vendor prefixes
    ];

    var minifyCss = [
        cssnano({ preset: "default" }) // minify result
    ];

    return src(`${paths.css_src}/project.css`)
        .pipe(plumber()) // Checks for errors
        .pipe(postcss(processCss))
        .pipe(dest(paths.css))
        .pipe(rename({ suffix: ".min" }))
        .pipe(postcss(minifyCss)) // Minifies the result
        .pipe(dest(paths.css));
}

// Prepare vendors
function vendors() {
    return src("./node_modules/alpinejs/dist/*").pipe(dest(paths.js));
}

// Javascript minification
function scripts() {
    return src(`${paths.js}/project.js`)
        .pipe(plumber()) // Checks for errors
        .pipe(uglify()) // Minifies the js
        .pipe(rename({ suffix: ".min" }))
        .pipe(dest(paths.js));
}

// Image compression
function imgCompression() {
    return src(`${paths.images}/*`)
        .pipe(imagemin()) // Compresses PNG, JPEG, GIF and SVG images
        .pipe(dest(paths.images));
}

// Run django server
function runServer(cb) {
    var cmd = spawn("python", ["manage.py", "runserver"], { stdio: "inherit" });
    cmd.on("close", function(code) {
        console.log("runServer exited with code " + code);
        cb(code);
    });
}

// Browser sync server for live reload
function initBrowserSync() {
    browserSync.init(
        [`${paths.css}/*.css`, `${paths.js}/*.js`, `${paths.templates}/*.html`],
        {
            // https://www.browsersync.io/docs/options/#option-proxy
            proxy: "localhost:8000"
        }
    );
}

// Watch
function watchPaths() {
    watch(`${paths.css_src}/*.css`, styles);
    watch(`${paths.templates}/**/*.html`).on("change", reload);
    watch([`${paths.js}/*.js`, `!${paths.js}/*.min.js`], scripts).on(
        "change",
        reload
    );
}

// Generate all assets
const generateAssets = parallel(
    styles,
    scripts,

    imgCompression
);

// Get vendors
const copyVendors = parallel(vendors);

// Set up dev environment
const dev = parallel(runServer, initBrowserSync, watchPaths);

exports.default = series(generateAssets, dev);
exports["generate-assets"] = generateAssets;
exports["vendors"] = copyVendors;
exports["dev"] = dev;