Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Outsideonline 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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.