new gulp tasks

Author: pgalias

afsa

@@ -1,25 +1,43 @@
 const gulp =        require('gulp'),
     sourcemaps =    require('gulp-sourcemaps'),
-    sass =          require('gulp-sass'),
     autoprefixer =  require('gulp-autoprefixer'),
     less =          require('gulp-less'),
     LessPrefix =    require('less-plugin-autoprefix'),
     cssnano =       require('gulp-cssnano'),
-    rename =        require('gulp-rename');
+    rename =        require('gulp-rename'),
+    argv =          require('yargs').argv;
 
 const prefixOpt = {browsers: ['last 2 versions']};
 
-gulp.task('sass:compile', () => {
-    gulp.src('./sass/**/*.scss')
-        .pipe(sourcemaps.init())
-        .pipe(sass())
-        .pipe(autoprefixer(prefixOpt))
-        .pipe(sourcemaps.write('./'))
+gulp.task('theme', () => {
+    let name = argv.name,
+        cleanName = name.replace('_', '');
+    return gulp.src('./less/themes/' + name + '.less')
+        .pipe(less({
+            plugins: [new LessPrefix(prefixOpt)]
+        }))
+        .pipe(rename('components-' + cleanName + '.theme.css'))
         .pipe(gulp.dest('./css'))
+        .on('end', () => {
+            console.log("Emitted file: components-" + cleanName + '.theme.css');
+        })
 });
 
-gulp.task('less:compile', () => {
+gulp.task('components', () => {
     gulp.src('./less/components.less')
+        .pipe(less({
+            plugins: [new LessPrefix(prefixOpt)]
+        }))
+        .pipe(rename('components-alone.css'))
+        .pipe(gulp.dest('./css'))
+        .on('end', () => {
+            console.log("Emitted file: components-alone.css");
+        });
+});
+
+gulp.task('compile', () => {
+    gulp.src('./less/all.less')
+        .pipe(rename('components.css'))
         .pipe(sourcemaps.init())
         .pipe(less({
             plugins: [new LessPrefix(prefixOpt)]
@@ -28,9 +46,15 @@ gulp.task('less:compile', () => {
         .pipe(gulp.dest('./css'))
 });
 
-gulp.task('css:minify', () => {
-    gulp.src('./css/components.css')
+gulp.task('minify', () => {
+    gulp.src(['./css/*.css', '!./css/*.min.css'])
         .pipe(cssnano())
-        .pipe(rename('components.min.css'))
+        .pipe(rename({
+            suffix: '.min'
+        }))
         .pipe(gulp.dest('./css/'))
+});
+
+gulp.task('default', ['less:compile', 'css:minify'], () => {
+    console.log('Compiling and minify all');
 });

css/components.css

@@ -1,4 +1,5 @@
 @import "mixins/_misc";
 @import "mixins/_centering";
 @import "mixins/_text-alignment";
-@import "mixins/_transition";
+@import "mixins/_transition";
+@import "mixins/_create-selector-js";

css/components.css.map

@@ -1,3 +1,6 @@
+@import "_variables";
+@import "../_mixins";
+
 .accordion {
   display: block;
   list-style: none;

css/components.min.css

@@ -1,3 +1,6 @@
+@import "_variables";
+@import "../_mixins";
+
 .accordion {
   &__object {
     margin: @margin;
@@ -36,27 +39,6 @@
 
   &__content {
     /* styles for each accordion element */
-
-
     margin: @content-margin;
   }
-
-  &--blue {
-    label.accordion__header {
-      background: @blue-base;
-      border-radius: @blue-border-radius @blue-border-radius 0 0;
-
-      color: @blue-header-color;
-
-      &:hover {
-        background: @blue-hover;
-      }
-    }
-
-    .accordion__content {
-      background: @blue-content-background;
-      color: @blue-text-color;
-      border-radius: 0 0 @blue-border-radius @blue-border-radius;
-    }
-  }
 }

gulpfile.js

@@ -0,0 +1,2 @@
+@import "components";
+@import "themes";

less/_mixins.less

@@ -1,7 +1,5 @@
 // mixins
 @import "_mixins";
-// themes
-@import "_themes";
 
 // components
 @import "_accordion";