@next

bulma-css-vars.config.js

@@ -0,0 +1,21 @@
+const { hsl } = require('bulma-css-vars')
+
+const appColors = {
+  white: '#fff',
+  primary: hsl(226, 77, 56), // '#3861e5',
+  dark: hsl(226, 34, 24), // '#283252',
+  link: hsl(229, 53, 53), // '#485fc7',
+  info: hsl(200, 97, 45), // '#039be5',
+  success: hsl(164, 95, 43), // '#06d6a0',
+  warning: hsl(35, 95, 62), // '#faae42',
+  danger: hsl(341, 79, 53), // '#e62965',
+}
+
+module.exports = {
+  jsOutputFile: 'src/scss/bulma-generated/bulma-colors.ts',
+  sassOutputFile: 'src/scss/bulma-generated/generated-vars.sass',
+  cssFallbackOutputFile: 'src/scss/bulma-generated/generated-fallback.css',
+  colorDefs: appColors,
+  sassEntryFile: 'src/scss/main.scss',
+  transition: null,
+}

config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	config: {
 		port: 9050
 	},

gulpfile.js

@@ -1,31 +1,30 @@
-const { src, dest, task, watch, series, parallel } = require('gulp');
-const del = require('del');
-const options = require("./config");
-const browserSync = require('browser-sync').create();
-
-const sass = require('gulp-sass');
-const bourbon = require('node-bourbon').includePaths;
-const postcss = require('gulp-postcss');
-const concat = require('gulp-concat');
-const uglify = require('gulp-uglify');
-const imagemin = require('gulp-imagemin');
-const cleanCSS = require('gulp-clean-css');
-const purgecss = require('gulp-purgecss');
-const sourcemaps = require('gulp-sourcemaps');
-const autoprefixer = require('gulp-autoprefixer');
-const panini = require('panini');
-
-const browserify = require("browserify");
-const babelify = require("babelify");
-const source = require("vinyl-source-stream");
-const nodepath = 'node_modules/';
-
-sass.compiler = require('sass');
+import gulp from "gulp";
+
+import gulpSass from "gulp-sass";
+import bourbon from "node-bourbon";
+import concat from "gulp-concat";
+import imagemin from "gulp-imagemin";
+import sourcemaps from "gulp-sourcemaps";
+import autoprefixer from "gulp-autoprefixer";
+import panini from "panini";
+import sassCompiler from "sass";
+import del from "del";
+import browserify from "browserify";
+import babelify from "babelify";
+import source from "vinyl-source-stream";
+import logSymbols from "log-symbols";
+import BrowserSync from "browser-sync";
+
+import options from "./config.js";
+
+const { src, dest, watch, series, parallel } = gulp;
+const browserSync = BrowserSync.create();
+const nodepath = "node_modules/";
+const sass = gulpSass(sassCompiler);
 
 //Note : Webp still not supported in major browsers including forefox
 //const webp = require('gulp-webp'); //For converting images to WebP format
 //const replace = require('gulp-replace'); //For Replacing img formats to webp in html
-const logSymbols = require('log-symbols'); //For Symbolic Console logs :) :P 
 
 //Load Previews on Browser on dev
 function livePreview(done) {
@@ -45,21 +44,6 @@ function setupBulma() {
     .pipe(dest('src/sass/'));
 }
 
-//Compile Sass code
-function compileSASS() {
-  console.log("\n\t" + logSymbols.info, "Compiling Bulma Sass..\n");
-  return src(['src/sass/bulma.sass'])
-    .pipe(sass({
-      outputStyle: 'compressed',
-      sourceComments: 'map',
-      sourceMap: 'sass',
-      includePaths: bourbon
-    }).on('error', sass.logError))
-    .pipe(autoprefixer('last 2 versions'))
-    .pipe(dest('dist/assets/css'))
-    .pipe(browserSync.stream());
-}
-
 //Compile Scss code
 function compileSCSS() {
   console.log("\n\t" + logSymbols.info, "Compiling App SCSS..\n");
@@ -68,7 +52,7 @@ function compileSCSS() {
       outputStyle: 'compressed',
       sourceComments: 'map',
       sourceMap: 'scss',
-      includePaths: bourbon
+      includePaths: bourbon.includePaths
     }).on('error', sass.logError))
     .pipe(autoprefixer('last 2 versions'))
     .pipe(dest('dist/css'))
@@ -186,14 +170,17 @@ const buildTasks = [
   ),
 ]
 
-exports.setup = series(setupBulma);
-
-exports.build = series(
-  ...buildTasks,
-);
-
-exports.default = exports.dev = series(
-  ...buildTasks,
-  livePreview, // Live Preview Build
-  watchFiles // Watch for Live Changes
-);
+export const build = (done) => {
+  series(devClean, resetPages, parallel(...buildTasks, devImages))();
+  done();
+};
+
+export default (done) => {
+  series(
+    devClean,
+    resetPages,
+    parallel(...buildTasks),
+    parallel(livePreview, watchFiles)
+  )();
+  done();
+};