VSCode task, Gulp-sass concat many js to one minify js, sass to compressed css

'use strict';

const gulp = require('gulp');

const autoprefixer = require('gulp-autoprefixer');

const sourcemaps = require('gulp-sourcemaps');

const concat = require('gulp-concat');

const uglify = require('gulp-uglify');

const sass = require('gulp-sass');

const path = require('path');

var _adminSassInc = path.resolve(__dirname, 'private/themes/admin/scss');

var _adminSass = './private/themes/admin/scss/*.scss';

var _adminSassMain = './private/themes/admin/scss/*.scss';

var _adminCssDest = './public/themes/admin/css/';

var _adminJsPrivate = [

    './private/themes/admin/jss/*.js'

];

var _adminJsPublic = './public/themes/admin/js/';

var _admin_js_name = 'ajs.js';

var _siteSassInc = path.resolve(__dirname, 'private/themes/default/scss');

var _siteSass = './private/themes/default/scss/*.scss';

var _siteSassMain = './private/themes/default/scss/*.scss';

var _siteCssDest = './public/themes/default/css/';

var _siteJsPrivate = [

    './private/themes/default/jss/jishee.js',

    './private/themes/default/jss/scripts.js'

];

var _siteJsPublic = './public/themes/default/js/';

var _site_js_name = 'sjs.js';

var _outputStyle = 'compressed';

var config = {

    sass: {

        style: 'expanded',

        outputStyle: _outputStyle,

        errLogToConsole: true,

        sourceMap: true

    },

    autoprefixer: {

        browsers: ['last 2 versions'],

        cascade: false

    }

};

/**

 * for admin themes

 */

var admin_css_task = function () {

    config.sass.includePaths = _adminSassInc;

    gulp.src(_adminSassMain)

        .pipe(sass(config.sass))

        .pipe(gulp.dest(_adminCssDest));

};

gulp.task('admin-css', admin_css_task);

var admin_js_task = function () {

    gulp.src(_adminJsPrivate)

        .pipe(concat(_admin_js_name))

        .pipe(uglify())

        .pipe(gulp.dest(_adminJsPublic))

};

gulp.task('admin-js', admin_js_task);

/**

 * for site themes

 */

var site_css_task = function () {

    config.sass.includePaths = _siteSassInc;

    gulp.src(_siteSassMain)

        .pipe(sass(config.sass))

        .pipe(gulp.dest(_siteCssDest));

};

gulp.task('site-css', site_css_task);

var site_js_task = function () {

    gulp.src(_siteJsPrivate)

        .pipe(concat(_site_js_name))

        .pipe(uglify())

        .pipe(gulp.dest(_siteJsPublic))

};

gulp.task('site-js', site_js_task);

/**

 * .pipe(sourcemaps.init())

        .pipe(sass(config.sass))

        .pipe(sourcemaps.write({ includeContent: false }))

        .pipe(sourcemaps.init({ loadMaps: true }))

        .pipe(autoprefixer(config.autoprefixer))

        .pipe(sourcemaps.write('.'))

 */

gulp.task('watch', function () {

    var changeHandler = function (evt) {

        console.log(

            '[watcher] File ' + evt.path.replace(/.*(?=sass)/, '') + ' was ' + evt.type + ', compiling...'

        );

    };

    

    gulp.watch(_adminSass, function () {

        setTimeout(function () {

            admin_css_task();

        }, 500);

    }).on('change', changeHandler);

    gulp.watch(_adminJsPrivate, admin_js_task);

    gulp.watch(_siteSass, function () {

        setTimeout(function () {

            site_css_task();

        }, 500);

    }).on('change', changeHandler);

    gulp.watch(_siteJsPrivate, site_js_task);

});

gulp.task('run', ['admin-css', 'site-css', 'admin-js', 'site-js', 'watch']);

Dynamically injects @import statements into the main app.less file

// gulpfile.js
var gulp = require('gulp'),
    less = require('gulp-less'),
    inject = require('gulp-inject');

gulp.task('less', function() {
    return gulp.src('src/styles/main.less')
    /**
     * Dynamically injects @import statements into the main app.less file, allowing
     * .less files to be placed around the app structure with the component
     * or page they apply to.
     */
        .pipe(inject(gulp.src(['../**/*.less'], {read: false, cwd: 'src/styles/'}), {
            starttag: '/* inject:imports */',
            endtag: '/* endinject */',
            transform: function (filepath) {
                return '@import ".' + filepath + '";';
            }
        }))
        .pipe(less())
        .pipe(gulp.dest('build/styles'));
});

How to Automate Tasks in Visual Studio Code

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');

var jsSrc = './js/src/**/*.js';
var sassSrc = './css/sass/**/*.scss';

gulp.task( 'scripts', function() {
  return  gulp.src( jsSrc )
                .pipe( uglify() )
                .pipe( gulp.dest( './js' ) )
});

gulp.task( 'styles', function() {
  return  gulp.src( sassSrc )
                .pipe( sass( { outputStyle: 'compressed' } ) )
                .pipe( gulp.dest( './css' ) );
});

gulp.task( 'automate', function() {
  gulp.watch( [ sassSrc, jsSrc ], [ 'scripts', 'styles' ] );
});

gulp.task( 'default', ['scripts', 'styles', 'automate'] );

CSS3 SASS MIXINS

// ---- CSS3 SASS MIXINS ----
// https://github.com/madr/css3-sass-mixins
//
//  Copyright (C) 2011 by Anders Ytterström
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//  copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
//  The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
//

// ---- LEGACY IE SUPPORT USING FILTERS ----
//  Should IE filters be used or not?
//  PROS: gradients, drop shadows etc will be handled by css.
//  CONS: will harm the site performance badly,
//        especially on sites with heavy rendering and scripting.
$useIEFilters: 0;
// might be 0 or 1. disabled by default.
// ---- /LEGACY IE SUPPORT USING FILTERS ----


@mixin background-size ($value) {
  -webkit-background-size: $value;
          background-size: $value;
}

@mixin border-image ($path, $offsets, $repeats) {
     -moz-border-image: $path $offsets $repeats;
       -o-border-image: $path $offsets $repeats;
  -webkit-border-image: $path $offsets $repeats;
          border-image: $path $offsets $repeats;
}

@mixin border-radius ($values) {
     -moz-border-radius: $values;
  -webkit-border-radius: $values;
          border-radius: $values;
             -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
                  background-clip: padding-box;
}

@mixin box-shadow ($x, $y, $offset, $hex, $ie: $useIEFilters) {
     -moz-box-shadow: $x $y $offset $hex;
  -webkit-box-shadow: $x $y $offset $hex;
          box-shadow: $x $y $offset $hex;
 
  @if $ie == 1 {
    $iecolor: '#' + red($hex) + green($hex) + blue($hex);
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}'));
  }
}

@mixin box-sizing($value) {
     -moz-box-sizing: $value;
  -webkit-box-sizing: $value;
          box-sizing: $value;
}

// requires sass 3.2
//@mixin keyframes {
//     @-moz-keyframes { @content; }
//      @-ms-keyframes { @content; }
//       @-o-keyframes { @content; }
//  @-webkit-keyframes { @content; }
//          @keyframes { @content; }
//}

@mixin linear-gradient($from, $to, $ie: $useIEFilters) {
  @if $ie != 1 { background-color: $to; }
 
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $from),color-stop(1, $to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -ms-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(top, bottom, $from, $to);

  @if $ie == 1 {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}'));
  }
}

@mixin rgba-bg ($hex, $alpha, $ie: $useIEFilters) {    
  @if $ie == 1 {
    background-color: none;
    $hexopac: ie-hex-str(rgba($hex, $alpha));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}'));
  }
  @else {
    background-color: $hex;
    background-color: rgba($hex, $alpha);
  }
}

@mixin perspective($perspective) {
     -moz-perspective: $perspective;
      -ms-perspective: $perspective;
  -webkit-perspective: $perspective;
          perspective: $perspective;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

@mixin transform ($transforms) {
  -moz-transform: $transforms;
    -o-transform: $transforms;
   -ms-transform: $transforms;
-webkit-transform: $transforms;
          transform: $transforms;
}

    @mixin matrix ($a, $b, $c, $d, $e, $f) {
      -moz-transform: matrix($a, $b, $c, $d, #{$e}px, #{$f}px);
        -o-transform: matrix($a, $b, $c, $d, $e, $f);
       -ms-transform: matrix($a, $b, $c, $d, $e, $f);
    -webkit-transform: matrix($a, $b, $c, $d, $e, $f);
              transform: matrix($a, $b, $c, $d, $e, $f);
    }

    @mixin rotate ($deg) {
      @include transform(rotate(#{$deg}deg));
    }

    @mixin scale ($size) {
      @include transform(scale(#{$size}));
    }

    @mixin translate ($x, $y) {
    @include transform(translate($x, $y));
    }

@mixin transition ($value) {
     -moz-transition: $value;
       -o-transition: $value;
      -ms-transition: $value;
  -webkit-transition: $value;
          transition: $value;
}

// ==== /CSS3 SASS MIXINS ====

how to make gradient color for IE8 using sass mixin

@mixin gradient($from-color, $to-color) {
    background-color: mix($from-color, $to-color); /* Fallback */
    background-image: -webkit-gradient
      (linear, 0% 0%, 0% 100%, from($from-color), to($to-color));
    background-image: -webkit-linear-gradient
      (top, $from-color, $to-color); 
    background-image:    -moz-linear-gradient
      (top, $from-color, $to-color);
    background-image:     -ms-linear-gradient
      (top, $from-color, $to-color);
    background-image:      -o-linear-gradient
      (top, $from-color, $to-color);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#{$from-color}', EndColorStr='#{$to-color}')";
}

don't forget # of startColorStr='#{$from-color}'