@area17/a17-boilerplate/tasks/watch.js

The official AREA 17 boilerplate

const path = require('path');
const fs = require('fs-extra');
const watch = require('watch');
const spawn = require('cross-spawn');
const utils = require('../utils');
const createLogger = require('logging').default;
const bs = require('browser-sync').create();

const data = require(utils.getManifestPath());

const logger = createLogger('Watch');

const FE_PATH = path.resolve('frontend');
const distFolder = path.resolve(data.paths.dist);
const distIcons = path.resolve(data.paths.dist, data.paths.icons);
const sourceImages = path.resolve(data.paths.source, 'images/');
const sourceFonts = path.resolve(data.paths.source, data.paths.fonts);

let resolvedPaths = {};
resolvedPaths.scss = utils.attemptResolve(path.join(__dirname, '../tasks', 'styles'));
resolvedPaths.js = utils.attemptResolve(path.join(__dirname, '../tasks', 'scripts'));
resolvedPaths.icons = utils.attemptResolve(path.join(__dirname, '../tasks', 'icons'));
resolvedPaths.images = utils.attemptResolve(path.join(__dirname, '../tasks', 'images'));
resolvedPaths.fonts = utils.attemptResolve(path.join(__dirname, '../tasks', 'fonts'));

let watchOptions = {
  'ignoreDotFiles' : true,
  'interval' : 2,
  'ignoreDirectoryPattern' : /node_modules/
};

logger.info('Starting watch');

// use webpack own js watch
spawn('node', [resolvedPaths.js].concat('--watch'), {stdio: 'inherit'});

// establish watch tree
watch.watchTree(FE_PATH, watchOptions, (f, curt, prev)=>{
  let result = {};
  result.status = 0;

  if (typeof f === 'object' && prev === null && curt === null) {
    logger.info('Start to watch non-js files');
  } else if (f != null){
    if (f.includes(sourceImages)) { // Watch Images
      result = spawn.sync('node', [resolvedPaths.images], {stdio: 'inherit'});
    } else if (f.includes(sourceFonts)) { // Watch Fonts
      result = spawn.sync('node', [resolvedPaths.fonts], {stdio: 'inherit'});
    } else { // Other files
      let fileType = f.split('.').pop();

      // Watch Other files using their extension
      switch(fileType) {
        case 'scss' :
          result = spawn.sync('node', [resolvedPaths.scss], {stdio: 'inherit'});
          break;
        case 'svg' :
          result = spawn.sync('node', [resolvedPaths.icons], {stdio: 'inherit'});
          break;
      }
    }
  }

  if (result.status !== 0) {
    logger.error('Something went wrong');
    process.exit(result.status);
  }
});

//browsersync
if (data.config.bs && data.config.bs.watchExtra) {
  data.config.bs.watchExtra.forEach(path => {
    bs.watch(path).on('change', bs.reload);
  });
}

bs.watch('./' + path.relative('./', distFolder) + '/styles/*.css', (event, file) => {
    bs.reload(file);
});

bs.watch('./' + path.relative('./', distFolder) + '/scripts/*.js', (event, file) => {
    bs.reload(file);
});

bs.watch('./' + path.relative('./', distIcons) + '/*.svg', (event, file) => {
  bs.reload(file);
});


let bsOtions = {
  proxy: data.config.devUrl,
  snippetOptions: {
    whitelist: data.config.whitelist,
    blacklist: data.config.blacklist
  }
};

if(data.config.customPorts) {
  bsOtions.ui = {
    port: data.config.customPorts.bsUiPort
  };

  bsOtions.port = data.config.customPorts.bsPort;
}

bs.init(bsOtions);