silverstripe-framework/gulpfile.js

const packageJson = require('./package.json');
const autoprefixer = require('autoprefixer');
const babelify = require('babelify'); // eslint-disable-line no-unused-vars
const browserify = require('browserify');
const eventStream = require('event-stream');
const glob = require('glob');
const gulp = require('gulp');
const coffee = require('gulp-coffee');
const concat = require('gulp-concat');
const merge = require('merge-stream');
const order = require('gulp-order');
const babel = require('gulp-babel');
const diff = require('gulp-diff');
const gulpif = require('gulp-if');
const notify = require('gulp-notify');
const postcss = require('gulp-postcss');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const gulpUtil = require('gulp-util');
const path = require('path');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const semver = require('semver');
const sprity = require('sprity');
const watchify = require('watchify');
const flatten = require('gulp-flatten');

const isDev = typeof process.env.npm_config_development !== 'undefined';

process.env.NODE_ENV = isDev ? 'development' : 'production';

const PATHS = {
  MODULES: './node_modules',
  ADMIN: './admin',
  ADMIN_IMAGES: './admin/client/dist/images',
  ADMIN_CSS_SRC: './admin/client/src/styles',
  ADMIN_CSS_DIST: './admin/client/dist/styles',
  ADMIN_THIRDPARTY: './admin/thirdparty',
  ADMIN_JS_SRC: './admin/client/src',
  ADMIN_JS_DIST: './admin/client/dist/js',
  ADMIN_SPRITES_SRC: './admin/client/src/sprites',
  ADMIN_SPRITES_DIST: './admin/client/dist/images/sprites',
  FRAMEWORK: '.',
  FRAMEWORK_CSS_SRC: './client/src/styles',
  FRAMEWORK_CSS_DIST: './client/dist/styles',
  FRAMEWORK_THIRDPARTY: './thirdparty',
  INSTALL_CSS_SRC: './dev/install/client/src/styles',
  INSTALL_CSS_DIST: './dev/install/client/dist/styles',
  FRAMEWORK_JS_SRC: './client/src',
  FRAMEWORK_JS_DIST: './client/dist/js',
};

// Map of *.scss locations to their compile target folders
const scssFolders = {
  [PATHS.FRAMEWORK_CSS_SRC]: PATHS.FRAMEWORK_CSS_DIST,
  [PATHS.ADMIN_CSS_SRC]: PATHS.ADMIN_CSS_DIST,
  [PATHS.INSTALL_CSS_SRC]: PATHS.INSTALL_CSS_DIST,
};

const browserifyOptions = {
  debug: true,
  paths: [PATHS.ADMIN_JS_SRC, PATHS.FRAMEWORK_JS_SRC],
};

const babelifyOptions = {
  presets: ['es2015', 'es2015-ie', 'react'],
  plugins: ['transform-object-assign', 'transform-object-rest-spread'],
  ignore: /(node_modules|thirdparty)/,
  comments: false,
};

const uglifyOptions = {
  mangle: false,
};

// Used for autoprefixing css properties (same as Bootstrap Aplha.2 defaults)
const supportedBrowsers = [
  'Chrome >= 35',
  'Firefox >= 31',
  'Edge >= 12',
  'Explorer >= 9',
  'iOS >= 8',
  'Safari >= 8',
  'Android 2.3',
  'Android >= 4',
  'Opera >= 12',
];

const blueimpFileUploadConfig = {
  src: `${PATHS.MODULES}/blueimp-file-upload`,
  dest: `${PATHS.FRAMEWORK_THIRDPARTY}/jquery-fileupload`,
  files: [
    '/cors/jquery.postmessage-transport.js',
    '/cors/jquery.xdr-transport.js',
    '/jquery.fileupload-ui.js',
    '/jquery.fileupload.js',
    '/jquery.iframe-transport.js',
  ],
};

const blueimpLoadImageConfig = {
  src: `${PATHS.MODULES}/blueimp-load-image`,
  dest: `${PATHS.FRAMEWORK_THIRDPARTY}/javascript-loadimage`,
  files: ['/load-image.js'],
};

const blueimpTmplConfig = {
  src: `${PATHS.MODULES}/blueimp-tmpl`,
  dest: `${PATHS.FRAMEWORK_THIRDPARTY}/javascript-templates`,
  files: ['/tmpl.js'],
};

const jquerySizesConfig = {
  src: `${PATHS.MODULES}/jquery-sizes`,
  dest: `${PATHS.ADMIN_THIRDPARTY}/jsizes`,
  files: ['/lib/jquery.sizes.js'],
};

const tinymceConfig = {
  src: `${PATHS.MODULES}/tinymce`,
  dest: `${PATHS.FRAMEWORK_THIRDPARTY}/tinymce`,
  files: [
    '/tinymce.min.js', // Exclude unminified file to keep repository size down
    '/jquery.tinymce.min.js',
    '/themes/**',
    '/skins/**',
    '/plugins/**',
  ],
};

/**
 * Copies files from a source directory to a destination directory.
 *
 * @param object libConfig
 * @param string libConfig.src - The source directory
 * @param string libConfig.dest - The destination directory
 * @param array libConfig.files - The list of files to copy from the source to
 *                                the destination directory
 */
function copyFiles(libConfig) {
  libConfig.files.forEach((file) => {
    const dir = path.parse(file).dir;

    gulp.src(libConfig.src + file)
      .pipe(gulp.dest(libConfig.dest + dir));
  });
}

/**
 * Diffs files in a source directory against a destination directory.
 *
 * @param object libConfig
 * @param string libConfig.src - The source directory
 * @param string libConfig.dest - The destination directory
 * @param array libConfig.files - The list of files to copy from the source
 *                                to the destination directory
 */
function diffFiles(libConfig) {
  libConfig.files.forEach((file) => {
    const dir = path.parse(file).dir;

    gulp.src(libConfig.src + file)
      .pipe(diff(libConfig.dest + dir))
      .pipe(diff.reporter({ fail: true, quiet: true }))
      .on('error', () => {
        console.error(new Error( // eslint-disable-line
          `Sanity check failed. ${libConfig.dest}${file} has been modified.`
        ));
        process.exit(1);
      });
  });
}

/**
 * Transforms the passed JavaScript files to UMD modules.
 *
 * @param array files - The files to transform.
 * @param string dest - The output directory.
 * @return object
 */
function transformToUmd(files, dest) {
  return eventStream.merge(files.map((file) => { // eslint-disable-line
    return gulp.src(file)
      .pipe(babel({
        presets: ['es2015'],
        moduleId: `ss.${path.parse(file).name}`,
        plugins: ['transform-es2015-modules-umd'],
        comments: false,
      }))
      .on('error', notify.onError({
        message: 'Error: <%= error.message %>',
      }))
      .pipe(gulp.dest(dest));
  }));
}

// Make sure the version of Node being used is valid.
if (!semver.satisfies(process.versions.node, packageJson.engines.node)) {
  console.error( // eslint-disable-line
    `Invalid Node.js version. You need to be using ${packageJson.engines.node}. ` +
    'If you want to manage multiple Node.js versions try https://github.com/creationix/nvm'
  );
  process.exit(1);
}

if (isDev) {
  browserifyOptions.cache = {};
  browserifyOptions.packageCache = {};
  browserifyOptions.plugin = [watchify];
}

gulp.task('build', ['umd', 'bundle']);

gulp.task('bundle', ['bundle-lib', 'bundle-legacy', 'bundle-framework']);

gulp.task('bundle-lib', function bundleLib() {
  const bundleFileName = 'bundle-lib.js';

  const es6 = browserify(Object.assign({}, browserifyOptions,
    { entries: `${PATHS.ADMIN_JS_SRC}/bundles/lib.js` }
  ))
    .on('update', bundleLib)
    .on('log', (msg) =>
      gulpUtil.log('Finished', `bundled ${bundleFileName} ${msg}`)
    )
    .transform('babelify', babelifyOptions)
    .require('deep-freeze-strict',
      { expose: 'deep-freeze-strict' }
    )
    .require('react',
      { expose: 'react' }
    )
    .require('tether',
      { expose: 'tether' }
    )
    .require('react-bootstrap-4',
      { expose: 'react-bootstrap-4' }
    )
    .require('react-addons-css-transition-group',
      { expose: 'react-addons-css-transition-group' }
    )
    .require('react-addons-test-utils',
      { expose: 'react-addons-test-utils' }
    )
    .require('react-dom',
      { expose: 'react-dom' }
    )
    .require('react-redux',
      { expose: 'react-redux' }
    )
    .require('redux',
      { expose: 'redux' }
    )
    .require('redux-thunk',
      { expose: 'redux-thunk' }
    )
    .require('react-router',
      { expose: 'react-router' }
    )
    .require('react-router-redux',
      { expose: 'react-router-redux' }
    )
    .require('page.js',
      { expose: 'page.js' }
    )
    .require(`${PATHS.MODULES}/bootstrap/dist/js/umd/collapse.js`,
      { expose: 'bootstrap-collapse' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/Form/Form`,
      { expose: 'components/Form/Form' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/Form/FormConstants`,
      { expose: 'components/Form/FormConstants' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/FormAction/FormAction`,
      { expose: 'components/FormAction/FormAction' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/FormBuilder/FormBuilder`,
      { expose: 'components/FormBuilder/FormBuilder' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/GridField/GridField`,
      { expose: 'components/GridField/GridField' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/GridField/GridFieldCell`,
      { expose: 'components/GridField/GridFieldCell' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/GridField/GridFieldHeader`,
      { expose: 'components/GridField/GridFieldHeader' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/GridField/GridFieldHeaderCell`,
      { expose: 'components/GridField/GridFieldHeaderCell' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/GridField/GridFieldRow`,
      { expose: 'components/GridField/GridFieldRow' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/GridField/GridFieldTable`,
      { expose: 'components/GridField/GridFieldTable' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/HiddenField/HiddenField`,
      { expose: 'components/HiddenField/HiddenField' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/TextField/TextField`,
      { expose: 'components/TextField/TextField' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/Toolbar/Toolbar`,
      { expose: 'components/Toolbar/Toolbar' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/Breadcrumb/Breadcrumb`,
      { expose: 'components/Breadcrumb/Breadcrumb' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/state/breadcrumbs/BreadcrumbsActions`,
      { expose: 'state/breadcrumbs/BreadcrumbsActions' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/PopoverField/PopoverField`,
      { expose: 'components/PopoverField/PopoverField' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/SingleSelectField/SingleSelectField`,
      { expose: 'components/SingleSelectField/SingleSelectField' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/components/FormBuilderModal/FormBuilderModal`,
      { expose: 'components/FormBuilderModal/FormBuilderModal' }
    )
    .require(`${PATHS.FRAMEWORK_JS_SRC}/i18n.js`,
      { expose: 'i18n' }
    )
    .require(`${PATHS.FRAMEWORK_JS_SRC}/i18nx.js`,
      { expose: 'i18nx' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/lib/Config`,
      { expose: 'lib/Config' }
    )
    .require(`${PATHS.FRAMEWORK_JS_SRC}/jQuery.js`,
      { expose: 'jQuery' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/lib/ReducerRegister.js`,
      { expose: 'lib/ReducerRegister' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/lib/ReactRouteRegister.js`,
      { expose: 'lib/ReactRouteRegister' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/lib/Injector.js`,
      { expose: 'lib/Injector' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/lib/Router.js`,
      { expose: 'lib/Router' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/lib/SilverStripeComponent`,
      { expose: 'lib/SilverStripeComponent' }
    )
    .require(`${PATHS.ADMIN_JS_SRC}/lib/Backend`,
      { expose: 'lib/Backend' }
    )
    .bundle()
    .on('error', notify.onError({ message: `${bundleFileName}: <%= error.message %>` }))
    .pipe(source(bundleFileName))
    .pipe(buffer());

  const chosen = gulp.src([
    `${PATHS.MODULES}/chosen/coffee/lib/*.coffee`,
    `${PATHS.MODULES}/chosen/coffee/chosen.jquery.coffee`,
  ])
    .pipe(concat('chosen.js'))
    .pipe(coffee());

  return merge(es6, chosen)
    .pipe(order([`**/${bundleFileName}`, '**/chosen.js']))
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(concat(bundleFileName, { newLine: '\r\n;\r\n' }))
    .pipe(uglify(uglifyOptions))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(PATHS.ADMIN_JS_DIST));
});

gulp.task('bundle-legacy', function bundleLeftAndMain() {
  const bundleFileName = 'bundle-legacy.js';

  return browserify(Object.assign({}, browserifyOptions,
    { entries: `${PATHS.ADMIN_JS_SRC}/bundles/legacy.js` }
  ))
    .on('update', bundleLeftAndMain)
    .on('log', (msg) =>
      gulpUtil.log('Finished', `bundled ${bundleFileName} ${msg}`)
    )
    .transform('babelify', babelifyOptions)
    .external('config')
    .external('jQuery')
    .external('i18n')
    .external('i18nx')
    .external('lib/Router')
    .external('react-dom')
    .external('react-bootstrap-4')
    .external('components/FormBuilderModal/FormBuilderModal')
    .bundle()
    .on('update', bundleLeftAndMain)
    .on('error', notify.onError({ message: `${bundleFileName}: <%= error.message %>` }))
    .pipe(source(bundleFileName))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify(uglifyOptions))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(PATHS.ADMIN_JS_DIST));
});

gulp.task('bundle-framework', function bundleBoot() {
  const bundleFileName = 'bundle-framework.js';

  return browserify(Object.assign({}, browserifyOptions,
    { entries: `${PATHS.ADMIN_JS_SRC}/boot/index.js` }
  ))
    .on('update', bundleBoot)
    .on('log', (msg) => {
      gulpUtil.log('Finished', `bundled ${bundleFileName} ${msg}`);
    })
    .transform('babelify', babelifyOptions)
    .external('bootstrap-collapse')
    .external('components/Breadcrumb/Breadcrumb')
    .external('state/breadcrumbs/BreadcrumbsActions')
    .external('components/FormAction/FormAction')
    .external('components/FormBuilder/FormBuilder')
    .external('components/GridField/GridField')
    .external('components/Toolbar/Toolbar')
    .external('deep-freeze-strict')
    .external('i18n')
    .external('i18nx')
    .external('jQuery')
    .external('lib/Backend')
    .external('lib/ReducerRegister')
    .external('lib/ReactRouteRegister')
    .external('lib/SilverStripeComponent')
    .external('page.js')
    .external('react-addons-test-utils')
    .external('react-dom')
    .external('tether')
    .external('react-bootstrap-4')
    .external('react-redux')
    .external('react-router-redux')
    .external('react-router')
    .external('react')
    .external('redux-thunk')
    .external('redux')
    .bundle()
    .on('update', bundleBoot)
    .on('error', notify.onError({ message: `${bundleFileName}: <%= error.message %>` }))
    .pipe(source(bundleFileName))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify(uglifyOptions))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(PATHS.ADMIN_JS_DIST));
});

gulp.task('sanity', () => {
  diffFiles(blueimpFileUploadConfig);
  diffFiles(blueimpLoadImageConfig);
  diffFiles(blueimpTmplConfig);
  diffFiles(jquerySizesConfig);
  diffFiles(tinymceConfig);
});

gulp.task('thirdparty', () => {
  copyFiles(blueimpFileUploadConfig);
  copyFiles(blueimpLoadImageConfig);
  copyFiles(blueimpTmplConfig);
  copyFiles(jquerySizesConfig);
  copyFiles(tinymceConfig);
});

gulp.task('umd', ['umd-admin', 'umd-framework'], () => {
  if (isDev) {
    gulp.watch(`${PATHS.ADMIN_JS_SRC}/legacy/*.js`, ['umd-admin']);
    gulp.watch(`${PATHS.FRAMEWORK_JS_SRC}/**/*.js`, ['umd-framework']);
  }
});

gulp.task('umd-admin', () => {
  const files = glob.sync(
    `${PATHS.ADMIN_JS_SRC}/legacy/*.js`,
    { ignore: `${PATHS.ADMIN_JS_SRC}/LeftAndMain.!(Ping).js` }
  );

  return transformToUmd(files, PATHS.ADMIN_JS_DIST);
});

gulp.task('umd-framework', () => { // eslint-disable-line
  return transformToUmd(glob.sync(
    `${PATHS.FRAMEWORK_JS_SRC}/**/*.js`),
    PATHS.FRAMEWORK_JS_DIST
  );
});

/*
 * Takes individual images and compiles them together into sprites
 */
gulp.task('sprites', () => { // eslint-disable-line
  return sprity.src({
    src: `${PATHS.ADMIN_SPRITES_SRC}/**/*.{png,jpg}`,
    cssPath: '../images/sprites',
    style: './_sprity.scss',
    processor: 'sass',
    split: true,
    margin: 0,
  })
  .pipe(
    gulpif(
      '*.png',
      gulp.dest(PATHS.ADMIN_SPRITES_DIST),
      gulp.dest(`${PATHS.ADMIN_CSS_SRC}/legacy`)
    )
  );
});

gulp.task('css', ['compile:css'], () => {
  if (isDev) {
    Object.keys(scssFolders).forEach((sourceFolder) => {
      gulp.watch(`${sourceFolder}/**/*.scss`, ['compile:css']);
    });
  }
});

/*
 * Compiles scss into css
 * Watches for changes if --development flag is given
 */
gulp.task('compile:css', () => {
  const tasks = Object.keys(scssFolders).map((sourceFolder) => { // eslint-disable-line
    const targetFolder = scssFolders[sourceFolder];
    return gulp.src(`${sourceFolder}/**/*.scss`)
      .pipe(sourcemaps.init())
      .pipe(
        sass({
          outputStyle: 'compressed',
          importer: (url, prev, done) => {
            if (url.match(/^compass\//)) {
              done({ file: 'client/src/styles/_compasscompat.scss' });
            } else {
              done();
            }
          },
        })
        .on('error', notify.onError({
          message: 'Error: <%= error.message %>',
        }))
      )
      .pipe(postcss([autoprefixer({ browsers: supportedBrowsers })]))
      .pipe(sourcemaps.write())
      .pipe(flatten()) // avoid legacy/ paths in CSS output
      .pipe(gulp.dest(targetFolder));
  });

  return tasks;
});