Outsideonline gulpfile.js

gulpfile.js

// Include gulp
const gulp = require('gulp');

// Include Our Plugins
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const autoprefixer = require('gulp-autoprefixer');
const file = require('gulp-file');
const headerComment = require('gulp-header-comment');
const rollup = require('rollup');
const rollupResolve = require('rollup-plugin-node-resolve');
const rollupReplace = require('rollup-plugin-replace');
const rollupBabel = require('rollup-plugin-babel');
const rollupEslint = require('rollup-plugin-eslint');
const rollupUglify = require('rollup-plugin-uglify-es');
const rollupCommonjs = require('rollup-plugin-commonjs');
const rollupVue = require('rollup-plugin-vue').default;
const rollupAlias = require('rollup-plugin-alias');
const glob = require('glob-fs')({ gitignore: true });
const message = require('gulp-message');
const moment = require('moment');

// Set browsersync proxies.
const bs1 = browserSync.create("proxy1");
const bs2 = browserSync.create("proxy2");

// Fetch command line arguments.
const arg = (argList => {
  let arg = {}, a, opt, thisOpt, curOpt;
  for (a = 0; a < argList.length; a++) {
    thisOpt = argList[a].trim();
    opt = thisOpt.replace(/^\-+/, '');
    if (opt === thisOpt) {
      // argument value
      if (curOpt) arg[curOpt] = opt;
      curOpt = null;
    }
    else {
      // argument name
      curOpt = opt;
      arg[curOpt] = true;
    }
  }
  return arg;
})(process.argv);

// Get possible src files.
const srcBundleFiles = glob.readdirSync('../../modules/custom/**/js/src/*.js');

// Generate Header Comment.
const getHeaderCommentTxt = filename => {
  return (arg['env'] && arg['env'] == 'dev' ? '¡DEV FILE, NOT FOR PRODUCTION!' + '\n' + 'Generated on: ' + moment().format('LLLL') : '') + '\n' + filename;
};

// Bundle our JS.
gulp.task('bundle', function (done) {
  if (arg['bundle']) {
    /*
     * Looks through our `/modules/custom/` folder
     * for `src/` js files and then lints, compiles
     * and streams them.
     */
    let files = srcBundleFiles.filter(function(file){
          return arg['bundle'] === 'all' || file.indexOf('/' + arg['bundle'] + '/') !== -1
        }),
        bundles = [],
        completed = [],
        // Minifies our css based on enviroment var.
        uglify = arg['env'] && arg['env'] === 'dev' ? function() {return this;} : rollupUglify;
    // Gather bundle info.
    files.forEach(function(script) {
      let path_segments = script.split('/');
      bundles.push({
        src: script,
        filename: path_segments.slice(-1)[0].replace('.js', '.min.js'),
        dest: path_segments.slice(0, -2).join('/') + '/dist/'
      });
    });
    // Process each bundle.
    return bundles.map(function (obj) {
      return rollup.rollup({
        input: obj.src,
        external: ['jquery', 'Drupal'],
        plugins: [
          rollupCommonjs(
            {
              include: [
                'node_modules/jquery/**',
                'node_modules/localforage/**',
                'node_modules/vue-localforage/**',
                'node_modules/vue-scrollto/**',
                'node_modules/vue-lazyload/**',
                'node_modules/glfx-es6/**',
                'node_modules/vue-script2/**',
                'node_modules/wallop/**',
                'node_modules/in-view/**',
                'node_modules/smoothscroll-polyfill/**',
                'node_modules/lory.js/**',
              ]
            }
          ),
          rollupVue(),
          rollupResolve({
            jsnext: true,
            browser: true,
            customResolveOptions: {
              // Path from custom module js/src file to theme node modules.
              moduleDirectory: '../../../../../themes/outside/node_modules'
            }
          }),
          rollupAlias({
            out: '../../modules/custom/outside_js/js/src/modules/outside-global.js',
            vueFull: '../../themes/outside/node_modules/vue/dist/vue.esm.js'
          }),
          rollupEslint({
            configFile: './.eslintrc',
            exclude: [
              '../../modules/contrib/**',
              '../../modules/custom/outside_js/js/src/modules/*.js',
              '../../modules/custom/**/*.vue'
            ]
          }),
          rollupReplace({
            'process.env.NODE_ENV': JSON.stringify((arg['env'] == 'dev' ? 'development' : 'production'))
          }),
          rollupBabel({
            presets: [
              [require.resolve('babel-preset-env'), {
                "targets": {
                  "browsers": [
                    "last 2 ios_saf major versions",
                    "last 2 Safari major versions",
                    "last 2 ChromeAndroid major versions",
                    "last 2 Chrome major versions",
                    "last 2 Firefox major versions",
                    "last 2 Edge major versions",
                    "Explorer >= 11"
                  ]
                },
                "modules": false
              }]
            ],
            babelrc: false,
            exclude: 'node_modules/**'
          }),
          uglify()
        ],
        onwarn: function (warning) {
          // https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
          if (warning.code === 'THIS_IS_UNDEFINED') {
            console.error(warning.message);
            return;
          }
        }
      })
      .then(bundle => {
        return bundle.generate({
          format: 'iife',
          globals: {
            jquery: 'jQuery',
            Drupal: 'Drupal',
          }
        })
      })
      .then(gen => {
        message.info('Bundling File: ' + obj.dest + obj.filename);
        completed.push(obj);
        if (bundles.length == completed.length) {
          message.info('[Bundling ' + bundles.length + ' Files Complete]');
          done();
        }
        return file(obj.filename, gen.code, {src: true})
          // Set header comment on bundled files.
          .pipe(headerComment(getHeaderCommentTxt(obj.filename)))
          .pipe(gulp.dest(obj.dest))
      });
    });
  }
});

// Reload all Browsers
gulp.task('bs-reload', function () {
  bs1.reload();
  bs2.reload();
});

// Compile Our Sass
gulp.task('sass', function() {
  return gulp.src('css/**/*.scss')
    .pipe(sass({
      outputStyle: 'compressed'
    }))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest('css'))
    .pipe(bs1.stream())
    .pipe(bs2.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.parallel('sass', 'bundle', function() {
  bs1.init({
    proxy: "outside.lndo.site:8000",
    open: false,
    port: 3010,
    ui: {
      port: 3011
    }
  });
  bs2.init({
    proxy: "outside.dd:8083",
    open: false,
    port: 3012,
    ui: {
      port: 3013
    }
  });
  gulp.watch('css/**/*.scss', gulp.series('sass'));
  gulp.watch('**/*.php', gulp.series('bs-reload'));
  gulp.watch('../../modules/custom/**/js/!(dist){src,includes}/**/*.{js,vue}', gulp.series('bundle'));
  // Reload for compiled files.
  gulp.watch('../../modules/custom/**/dist/*.min.js', gulp.series('bs-reload'));
}));

// Autoprefixer browser settings.
const autoprefixerOptions = {
  browsers: [
    'last 2 versions',
    'Explorer >= 10',
    'Android >= 4.1',
    'Safari >= 7',
    'iOS >= 7'
  ]
};

// Watch Files For Changes
gulp.task('watch', function() {
  gulp.watch('css/**/*.scss', gulp.parallel('sass'));
  // JS modules/includes.
  gulp.watch('../../modules/custom/**/js/!(dist){src,includes}/**/*.{js,vue}', gulp.parallel('bundle'));
});

// Default Task
gulp.task('default', gulp.parallel('sass', 'bundle', 'watch'));