gulpfile.js

var gulp = require('gulp'),

// Include Our Plugins
    // debug = require('gulp-debug'),  // uncomment plugin when debugging
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    urlAdjuster = require('gulp-css-url-adjuster'),
    concat = require('gulp-concat'),
    handlebars = require('gulp-compile-handlebars'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify'),
    streamQueue = require('streamqueue'),
    autoprefixer = require('autoprefixer'),
    mqpacker = require('css-mqpacker'),
    stylelint = require('stylelint'),
    syntax_scss = require('postcss-scss'),
    reporter = require('postcss-reporter'),
    postcss = require('gulp-postcss'),
    flatten = require('gulp-flatten'),
    watch = require('gulp-watch'),
    imagemin = require('gulp-imagemin');

    browserSync = require('browser-sync').create();

// Sass, HTML, Js Files - the folder, files to look for, and destination
var paths = {
  styles: {
    src: './scss',
    files: './assets/scss/*.scss',
    minify: './assets/css/styles.css',
    // BrowserSync
    syncFiles: '.',  
    // directories to exclude (from compiling, etc.)
    exclude: ['!./Content/global/scss_converted/**/*', '!./Components/**/*'],
    dest: './assets/css'
  },

  html: {
    files: ['*.html', '*/*.html', '*/**/*.html']
  },

  js: {
    files: ['./assets/js/*.js']
  },

  img: {
    files: ['./assets/img/*/**']
  },

  hbcpages: {
    files: ['./pages/*.hbs', './pages/**/*.hbs']
  }  
};

// BrowserSync: automatically refresh browser(s) & watch for changes to files
// Static Server + watching scss/html files
gulp.task('browsersync', ['minify', 'html', 'scripts'], function() {
  browserSync.init({
      server: "./dist/"
  });
  gulp.watch([paths.html.files, paths.js.files ]).on('change', browserSync.reload);
});

// Handlebars Templating Task
gulp.task('html', () => {
  gulp.watch(paths.hbcpages.files)
  .on('change', function () {
    return gulp.src(paths.hbcpages.files)
      .pipe(handlebars({}, {
        ignorePartials: true,
        batch: ['./partials']
      }))
      .pipe(rename({
        extname: '.html'
      }))
      .pipe(gulp.dest('./dist'));
    });
});

// Image Compression 
gulp.task('img-compress', () =>
    gulp.src(paths.img.files)
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/assets/img'))
);

// Watch for changes to Sass files on all Pages and produce Sourcemap
gulp.task('scss', function () {
  gulp.watch(paths.styles.files)
  .on('change', function () {
    return gulp.src(paths.styles.files) // Gets all files ending with .scss in content/global
      .pipe(sourcemaps.init())
        // Keep the outputStyle as 'nested' otherwise line #'s get thrown off in sourcemaps debugging
        .pipe(sass({ outputStyle: 'nested', precision: 6 }).on('error', sass.logError))  // add '.' for ext
        .pipe(sourcemaps.write())  
        .pipe(gulp.dest('./assets/css/'))
    // Output to same destination as src
    /* .pipe(gulp.dest(function (file) {
      return file.base;
    })) */
    .pipe(browserSync.stream());
  });
});

// Run PostCSS, strip out the sourcemap, then minify 
gulp.task('minify', function () {
  gulp.watch(paths.styles.minify)
  .on('change', function (file) {
    var destPath = file.path.replace('styles.css', '.'),
        // PostCSS Plugins for Production CSS (PostCSS tasks must be AFTER the Sass task)
        processorsProd = [
          autoprefixer({ browsers: ['last 2 versions', 'not ie < 11'] }),
          //mqpacker(),
        ];

    gulp.src(file.path)
      .pipe(postcss(processorsProd))
      .pipe(rename({ suffix: '.min' }))
      .pipe(cleanCSS({ debug: true, rebase: false }, function (details) {
        console.log('---- Minify CSS for Prod ----');
        console.log(file.path + ': ');
        console.log(details.stats.originalSize + ' original size' + ' --- '
        + details.stats.minifiedSize + ' minified size.');  //details.name + ': ' +
      }))
    .pipe(gulp.dest(destPath));
  });
});

// Main Task for compiling, minifying - simply run 'gulp' OR 'yarn start' via CLI
gulp.task('default', ['scss', 'scripts', 'html', 'copy-files', 'browsersync' ]);  // 'img-compress'

// Concantenate JavaScript 
// In production, the file is minified
gulp.task('scripts', function() {
    return gulp.src([
      './node_modules/jquery/dist/jquery.min.js',
      './node_modules/what-input/dist/what-input.min.js',
      './node_modules/foundation-sites/dist/js/foundation.min.js',
      './assets/js/fontawesome.js',
      './assets/js/font-qts.js',
      './assets/js/custom.js',
    ])
    .pipe(sourcemaps.init())
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./assets/js/'))
    .pipe(rename('scripts.min.js'))
    .pipe(uglify()) 
    // .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./assets/js/'))
});

// Copy All Assets (if file changed) to the Dist folder
var source = './assets',  
    destination = './dist/assets';

gulp.task('copy-files', function() {  
  gulp.src(source + '/**/*', {base: source})
    .pipe(watch(source, {base: source}))
    .pipe(gulp.dest(destination));
});
  
// Copy Component/Content Fonts to public folder relative to compiled CSS file
gulp.task('fonts-copy', function () {
  return gulp.src(['./Components/*/fonts/*', './Content/*/fonts/*',])
  .pipe(flatten())
  .pipe(gulp.dest('./Content/fonts'));
});

// Stylelint Task for analyzing Sass files by running through Stylelint & produces report
gulp.task('analyze-scss', function () {
  return gulp.src(paths.styles.files)
    .pipe(postcss([
      stylelint(),
      reporter()],
      {syntax: syntax_scss}
    ));
});


// SAVE the Commented Out Task Directly Below!!!! Autoprefixer Check -
// Uncomment & run gulp via CLI to see the browser list, rules, selectors, & properties covered
// var info = autoprefixer({ browsers: ['last 3 versions', 'not ie < 11'] }).info();
// console.log(info);


// ---------------------------------------------------------------------------
// Compile and Minify a One-off Sass file (i.e.- Font-Icons-Fallback, etc.) - Run task seperately/independently!!!
gulp.task('compile-file', function (file) {
  var fileWatch = './Content/Css/font-icons-fallback.scss';  // change file name here
  gulp.watch(fileWatch);
    return gulp.src(fileWatch) // Gets all files ending with .scss in app/scss
      .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
      .pipe(rename({ suffix: '.min' }))
      .pipe(cleanCSS({ debug: true, rebase: false }, function (details) {
        console.log('---- Compile & Minify CSS for Prod ----');
        console.log(file.path + ': ');
        console.log(details.stats.originalSize + ' original size' + ' --- '
        + details.stats.minifiedSize + ' minified size.');
      }))
    .pipe(gulp.dest('./Content/Css/'));
});