Gulp multi task slow to start

Question

I've looked through the site trying to find a solution to this problem but I don't completely understand the solutions. Have I done something wrong here to cause a slow load time?

var gulp = require('gulp');
    jade = require('gulp-jade');
    sass = require('gulp-sass');
    postcss = require('gulp-postcss');
    browserSync = require('browser-sync');
    autoprefixer = require('autoprefixer-core');

gulp.task('sass', function(){
  var processors = [
    autoprefixer
  ];

  return gulp.src('sass/main.scss')
    .pipe(sass())
    .pipe(postcss(processors))
    .pipe(gulp.dest('css'));
});

gulp.task('jade', function() {
  return gulp.src('jade/index.jade')
  .pipe(jade({pretty: true}))
  .pipe(gulp.dest(''));
});

gulp.task('watch', function(){
  browserSync({
    server: {
      baseDir: ''
    }
  });
  gulp.watch('**/*.sass', ['doc-watch']);
  gulp.watch('**/*.jade', ['doc-watch']);
  gulp.watch('**/*.js', ['doc-watch']);
});

gulp.task('doc-watch', ['sass', 'jade'], browserSync.reload);

gulp.task('default', ['doc-watch']);

Thanks for any advice.

Answer 1

'use strict';

//Dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');



////////////////////
// - SCSS/CSS
////////////////////

var SCSS_SRC = '.src/Assets/Assets/*.scss';
var SCSS_DEST = './src/Assets/css';

//Compile SCSS
gulp.task('compile_scss', gulp.series(function(){
  gulp.src(SCSS_SRC)
  .pipe(sass().on('error', sass.logError))
  .pipe(minifyCSS())
  .pipe(rename({ suffix: '.min' }))
  .pipe(changed(SCSS_DEST))
  .pipe(gulp.dest(SCSS_DEST));
}));

//Detect changes in SCSS
gulp.task('watch_scss', gulp.series(function(){
  gulp.watch(SCSS_SRC, gulp.series(['compile_scss']))
}));


//Run tasks
gulp.task('default', gulp.series(['watch_scss']));