chore: add dart sass workfows with gulpfile.js

Author: thingsym

gulpfile.js

@@ -3,23 +3,41 @@
 const gulp = require('gulp');
 const $ = require('gulp-load-plugins')();
 
+var Fiber = require('fibers');
+
+var sass = require('gulp-sass');
+sass.compiler = require('node-sass');
+
+var dart_sass = require('gulp-sass');
+dart_sass.compiler = require('sass');
+
 require('es6-promise').polyfill();
 
 const browserSync = require('browser-sync').create();
+const browserSync_baseDir = 'docs';
 
-const src_paths = {
+const entry_paths = {
   sass: ['sass/_flexbox-grid-mixins.scss'],
   docs_sass: ['docs/sass/*.scss'],
-  docs_static: ['docs/*.html', 'docs/**/*.html']
+  dart_sass: ['dart-sass/_flexbox-grid-mixins.scss'],
+  docs_dart_sass: ['docs/dart-sass/*.scss'],
 };
 
 const dest_paths = {
-  browserSync: 'docs',
-  docs_css: 'docs/css/'
+  docs_css: 'docs/css/',
+  docs_css_dart_sass: 'docs/css-dart-sass/'
+};
+
+const watch_paths = {
+  sass: ['sass/_flexbox-grid-mixins.scss'],
+  docs_sass: ['docs/sass/*.scss', 'docs/sass/**/*.scss'],
+  dart_sass: ['dart-sass/_flexbox-grid-mixins.scss'],
+  docs_dart_sass: ['docs/dart-sass/*.scss', 'docs/dart-sass/**/*.scss'],
+  docs_static: ['docs/*.html', 'docs/**/*.html']
 };
 
 function lint_sass() {
-  return gulp.src(src_paths.sass)
+  return gulp.src(entry_paths.sass, entry_paths.dart_sass)
     .pipe($.plumber({
       errorHandler: function(err) {
         console.log(err.messageFormatted);
@@ -46,27 +64,47 @@ function lint_sass() {
 };
 
 function docs_sass() {
-  return gulp.src(src_paths.docs_sass)
+  return gulp.src(entry_paths.docs_sass)
     .pipe($.plumber({
       errorHandler: function(err) {
         console.log(err.messageFormatted);
         this.emit('end');
       }
     }))
-    .pipe($.sass({
+    .pipe(sass({
+      fiber: Fiber,
       outputStyle: 'expanded'
-    }).on( 'error', $.sass.logError ) )
+    }).on( 'error', sass.logError ) )
     .pipe($.autoprefixer({
         cascade: false
     }))
     .pipe(gulp.dest(dest_paths.docs_css))
     .pipe(browserSync.stream());
 }
 
+function docs_dart_sass() {
+  return gulp.src(entry_paths.docs_dart_sass)
+    .pipe($.plumber({
+      errorHandler: function(err) {
+        console.log(err.messageFormatted);
+        this.emit('end');
+      }
+    }))
+    .pipe(dart_sass({
+      fiber: Fiber,
+      outputStyle: 'expanded'
+    }).on( 'error', dart_sass.logError ) )
+    .pipe($.autoprefixer({
+        cascade: false
+    }))
+    .pipe(gulp.dest(dest_paths.docs_css_dart_sass))
+    .pipe(browserSync.stream());
+}
+
 function browser_sync(done) {
   browserSync.init({
     server: {
-      baseDir: dest_paths.browserSync
+      baseDir: browserSync_baseDir
     },
     reloadOnRestart: true
   });
@@ -79,12 +117,15 @@ function watch_files(done) {
     done();
   };
 
-  gulp.watch(src_paths.sass).on('change', gulp.series(lint_sass, docs_sass, browserReload));
-  gulp.watch(src_paths.docs_sass).on('change', gulp.series(lint_sass, docs_sass, browserReload));
-  gulp.watch(src_paths.docs_static).on('change', browserReload);
+  gulp.watch(watch_paths.sass, { usePolling: true }).on('change', gulp.series(lint_sass, docs_sass, browserReload));
+  gulp.watch(watch_paths.docs_sass, { usePolling: true }).on('change', gulp.series(lint_sass, docs_sass, browserReload));
+  gulp.watch(watch_paths.dart_sass, { usePolling: true }).on('change', gulp.series(lint_sass, docs_dart_sass, browserReload));
+  gulp.watch(watch_paths.docs_dart_sass, { usePolling: true }).on('change', gulp.series(lint_sass, docs_dart_sass, browserReload));
+  gulp.watch(watch_paths.docs_static, { usePolling: true }).on('change', browserReload);
 }
 
-exports.docs_sass = docs_sass;
-exports.lint = lint_sass;
+exports.docs_sass = docs_sass();
+exports.docs_dart_sass = docs_dart_sass();
+exports.lint = lint_sass();
 exports.serve = gulp.series(browser_sync, watch_files);
-exports.default = gulp.series(lint_sass, docs_sass);
+exports.default = gulp.series(lint_sass, docs_sass, docs_dart_sass);