gulp (scss) fix

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.0.3 (2020-05-28)
+
+- Fixed gulp script (cssnano)
+- Seperated scss tasks
+- minor structure update
+
 ## 3.0.2 (2020-05-04)
 
 - Updated npm dependencies

gulpfile.js

@@ -1,7 +1,8 @@
-'use strict'
+'use strict';
 
-//----------------
+//------------------------
 //:: Initiate npm-modules
+
 const   gulp            = require('gulp'),
         sass            = require('gulp-sass'),
         concat          = require('gulp-concat'),
@@ -15,8 +16,10 @@ const   gulp            = require('gulp'),
         merge2          = require('merge2'),
         rimraf          = require('rimraf');
 
-//----------------
-//:: configs
+
+//------------------------
+//:: Config parameter
+
 var Config = {
     inputDir: '_source/',
     outputDir: '_dist/'
@@ -30,22 +33,18 @@ var SassConfig = {
     }
 }
 
-var postcss_plugins = [
-    cssnano,
-    autoprefixer
-];
 
-//----------------
+//------------------------
 //:: Tasks
 
 // compile scss
-function scss() {
+function scss_addons() {
     var onError = function(err) {
         notify.onError({
-            title:    'gulp',
-            subtitle: 'Error!',
-            message:  '❌  <%= error.message %>',
-            sound:    'Submarine'
+            title:      'scss_addons',
+            subtitle:   'Error!',
+            message:    '❌  <%= error.message %>',
+            sound:      'Submarine'
         })(err);
     this.emit('end');
     };
@@ -55,22 +54,44 @@ function scss() {
             'node_modules/sanitize.css/sanitize.css'
     ]))
     .pipe(concat('addons.css'))
+    .pipe(postcss([autoprefixer()]))
     .pipe(gulp.dest(SassConfig.outputDir))
-    .pipe(postcss(postcss_plugins))
-    .pipe(rename({suffix: '.min'}))
-    .pipe(gulp.dest(SassConfig.outputDir)),
-
-    gulp.src(SassConfig.inputDir + '*.scss')
-    .pipe(concat('styles.css'))
-    .pipe(plumber({errorHandler: onError}))
-    .pipe(postcss(postcss_plugins))
-    .pipe(sass(SassConfig.options).on('error', sass.logError))
-    .pipe(gulp.dest(SassConfig.outputDir))
+    .pipe(postcss([cssnano()]))
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest(SassConfig.outputDir))
     .pipe(livereload())
     .pipe(notify({
-        title:      'gulp',
+        title:      'scss_addons',
+        subtitle:   'Success!',
+        message:    '✅  SCSS compiled',
+        timeout:    '2'
+    }));
+}
+
+function scss_main() {
+    var onError = function(err) {
+        notify.onError({
+            title:      'scss_main',
+            subtitle:   'Error!',
+            message:    '❌  <%= error.message %>',
+            sound:      'Submarine'
+        })(err);
+    this.emit('end');
+    };
+
+    return gulp
+    .src(SassConfig.inputDir + '*.scss')
+    .pipe(concat('styles.css'))
+    .pipe(plumber({errorHandler: onError}))
+    .pipe(sass(SassConfig.options).on('error', sass.logError))
+    .pipe(postcss([autoprefixer()]))
+    .pipe(gulp.dest(SassConfig.outputDir))
+    .pipe(postcss([cssnano()]))
+    .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest(SassConfig.outputDir))
+    .pipe(livereload())
+    .pipe(notify({
+        title:      'scss_main',
         subtitle:   'Success!',
         message:    '✅  SCSS compiled',
         timeout:    '2'
@@ -79,16 +100,16 @@ function scss() {
 
 // Copy those other files
 function copy(done) {
-    gulp.src([Config.inputDir + '*.*'])
+    gulp.src([Config.inputDir + '**/*.*'])
         .pipe(gulp.dest(Config.outputDir))
         .pipe(livereload())
     done();
 };
 
-// watch for changes
+// Watch for changes
 function watch() {
     livereload.listen();
-    gulp.watch(SassConfig.inputDir + '*.scss', scss);
+    gulp.watch(SassConfig.inputDir + '*.scss', scss_main);
     gulp.watch(Config.inputDir + '*.html', copy);
 };
 
@@ -97,14 +118,16 @@ function cleanup(cb) {
     return rimraf(Config.outputDir + '*', cb)
 };
 
-//----------------
-//:: Export tasks
+
+//------------------------
+//:: Define tasks
 
 // complex tasks
-const build = gulp.series(cleanup, gulp.parallel(copy, scss));
+const build = gulp.series(cleanup, gulp.parallel(copy, scss_addons, scss_main));
 
 // export tasks
-exports.scss = scss;
+exports.scss_main = scss_main;
+exports.scss_addons = scss_addons;
 exports.copy = copy;
 exports.watch = watch;
 exports.cleanup = cleanup;

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "website_template",
-	"version": "3.0.2",
+	"version": "3.0.3",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "website_template",
 	"description": "npm & gulp development template",
-	"version": "3.0.2",
+	"version": "3.0.3",
 	"author": "Jan Jastrow",
 	"license": "MIT",
 	"homepage": "https://jan.jastrow.me",