arnaud-lecat · June 15, 2020 13:37 · Jun 15, 2020
diff --git a/gulp.js b/gulp.js
@@ -0,0 +1,141 @@
+////////////////////////////////
+// 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;