Skip to content

Instantly share code, notes, and snippets.

@robmoggach robmoggach/gulpfile.js
Last active Jan 24, 2019

Embed
What would you like to do?
mediumra.re gulpfile for insight and pipeline themes...
/* eslint-disable */
// REQUIRE STATEMENTS
const fs = require('fs'),
path = require('path'),
gulp = require('gulp'),
pixrem = require( 'gulp-pixrem' ),
log = require('fancy-log'),
newer = require('gulp-newer'),
runSequence = require('run-sequence'),
sass = require('gulp-sass'),
cssImporter = require('node-sass-css-importer')({
import_paths: ['./scss']
}),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
replace = require('gulp-replace'),
del = require('del'),
eslint = require('gulp-eslint'),
htmlPrettify = require('gulp-prettify'),
concat = require('gulp-concat'),
browserSync = require('browser-sync'),
rename = require('gulp-rename'),
babel = require('gulp-babel'),
embedSvg = require('gulp-embed-svg'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify'),
spawn = require( 'child_process' ).spawn,
reload = browserSync.reload,
browsers = "Safari > 10, Firefox > 40, Chrome > 40, ie >= 11";
// THEME DEFINITION
const themes = {
"insight": {
paths: {
root: "./Insight_1.0.1",
scss: "./Insight_1.0.1/scss",
js: "./Insight_1.0.1/js",
pages: "./Insight_1.0.1/pages"
}
},
"pipeline": {
paths: {
root: "./Pipeline_1.0.1",
scss: "./Pipeline_1.0.1/scss",
js: "./Pipeline_1.0.1/js",
pages: "./Pipeline_1.0.1/pages"
}
}
}
// PATH DEFINITION
const paths = {
pages: {
folder: 'pages',
all: ['pages/**/*'],
html: 'pages/*.html',
includes: 'pages/include/',
layouts: 'pages/layouts'
},
js: {
all: "js/**/*",
bootstrap: [
"js/bootstrap/util.js",
"js/bootstrap/alert.js",
"js/bootstrap/button.js",
"js/bootstrap/carousel.js",
"js/bootstrap/collapse.js",
"js/bootstrap/dropdown.js",
"js/bootstrap/modal.js",
"js/bootstrap/tooltip.js",
"js/bootstrap/popover.js",
"js/bootstrap/scrollspy.js",
"js/bootstrap/tab.js"
],
mrare: ["js/mrare/**/*.js"]
},
scss: {
folder: 'scss',
all: 'scss/**/*',
root: 'scss/*.scss',
themeScss: ['scss/theme.scss' ] // removed '!scss/user.scss', '!scss/user-variables.scss'
},
assets: {
all: 'pages/assets/**/*',
folder: 'pages/assets',
allFolders: [
'pages/assets/css',
'pages/assets/img',
'pages/assets/fonts',
'pages/assets/video'
],
},
css: {
folder: 'assets/css',
},
fonts: {
folder: 'assets/fonts',
all: 'assets/fonts/*.*',
},
images: {
folder: 'assets/img',
all: 'assets/img/*.*',
},
videos: {
folder: 'assets/video',
all: 'assets/video/*.*',
},
dist: {
packageFolder: '',
folder: 'dist',
pages: 'dist/pages',
all: 'dist/**/*',
assets: 'dist/assets',
img: 'dist/img',
css: 'dist/css',
scssSources: 'dist/src/scss',
js: 'dist/js',
jsSources: 'dist/src/js',
fonts: 'dist/fonts',
video: 'dist/video',
documentation: 'dist/documentation',
exclude: [
'!**/desktop.ini',
'!**/.DS_store'
],
},
user: {
folder: 'user',
all: 'user/**/*'
},
copyDependencies: [
{
files: "jquery.min.js",
from: "node_modules/jquery/dist",
to: "vendor/js" // "pages/assets/js"
},
{
files: "jquery.countdown.min.js",
from: "node_modules/jquery-countdown/dist",
to: "vendor/js" // "pages/assets/js"
},
{
files: "jquery.smartWizard.min.js",
from: "node_modules/smartwizard/dist/js",
to: "vendor/js" // "pages/assets/js"
},
{
files: "flickity.pkgd.js",
from: "node_modules/flickity/dist",
to: "vendor/js" // "pages/assets/js"
},
{
files: "flickity.min.css",
from: "node_modules/flickity/dist",
to: "vendor/css" // "pages/assets/css"
},
{
files: "jquery.fancybox.min.css",
from: "node_modules/@fancyapps/fancybox/dist",
to: "vendor/css" // "scss/custom/components/plugins"
},
{
files: "jquery.fancybox.min.js",
from: "node_modules/@fancyapps/fancybox/dist",
to: "vendor/js" // "pages/assets/js"
},
{
files: 'autosize.min.js',
from: 'node_modules/autosize/dist',
to: "vendor/js" // 'pages/assets/js',
},
{
files: 'dropzone.min.js',
from: 'node_modules/dropzone/dist/min',
to: "vendor/js" // 'pages/assets/js',
},
{
files: '*.*',
from: 'node_modules/inter-ui/Inter UI (web)',
to: "fonts" // 'pages/assets/fonts',
},
{
files: "isotope.pkgd.min.js",
from: "node_modules/isotope-layout/dist",
to: "vendor/js" // "pages/assets/js"
},
{
files: 'list.min.js',
from: 'node_modules/list.js/dist',
to: "vendor/js" // 'pages/assets/js',
},
{
files: "popper.min.js",
from: "node_modules/popper.js/dist/umd",
to: "vendor/js" // "pages/assets/js"
},
{
files: "popper.min.js.map",
from: "node_modules/popper.js/dist/umd",
to: "vendor/js" // "pages/assets/js"
},
{
files: "prism.js",
from: "node_modules/prismjs",
to: "vendor/js" // "pages/assets/js"
},
{
files: "prism.css",
from: "node_modules/prismjs/themes",
to: "vendor/css" // "scss/custom/components/plugins"
},
{
files: "prism-okaidia.css",
from: "node_modules/prismjs/themes",
to: "vendor/css" // "scss/custom/components/plugins"
},
{
files: "scrollMonitor.js",
from: "node_modules/scrollmonitor",
to: "vendor/js" // "pages/assets/js"
},
{
files: 'draggable.bundle.legacy.js',
from: 'node_modules/@shopify/draggable/lib/es5',
to: "vendor/js" // 'pages/assets/js',
},
{
files: 'swap-animation.js',
from: 'node_modules/@shopify/draggable/lib/es5/plugins',
to: "vendor/js" // 'pages/assets/js',
},
{
files: "smooth-scroll.polyfills.js",
from: "node_modules/smooth-scroll/dist",
to: "vendor/js" // "pages/assets/js"
},
{
files: "zoom-vanilla.min.js",
from: "node_modules/zoom-vanilla.js/dist",
to: "vendor/js" // "pages/assets/js"
},
{
files: "zoom.css",
from: "node_modules/zoom-vanilla.js/dist",
to: "vendor/css" // "scss/custom/components/plugins"
}
]
};
// PRETTYFY OPTIONS
const prettifyOptions = {
condense: false,
indent_inner_html: true,
indent_size: 2,
indent_char: " ",
unformatted: [
"code",
"pre",
"strong",
"em",
"a",
"b",
"i",
"u"
],
preserve_newlines: true,
max_preserve_newlines: 1,
brace_style: "expand",
wrap_line_length: 0,
};
////////////////////////////////
//Tasks//
////////////////////////////////
// Build task to be used for building once without invoking watch or browsersync
gulp.task('build', function(cb) {
return runSequence(
'dist:clean',
'dist:assets',
[
'dist:html',
'dist:sass-min',
'dist:bootstrapjs',
'dist:mrarejs'
],
cb
);
});
// Clean out the dist folder for a clean slate on first run
gulp.task('dist:clean', function(done) {
del.sync([
paths.dist.all
], {
force: true
});
done();
});
// Copy html files to dist
gulp.task('dist:html', function(done) {
Object.keys( themes ).forEach( (theme) => {
gulp.src(`${themes[theme].paths.root}/${paths.pages.html}`)
.pipe(newer(`${paths.dist.folder}/${theme}`))
.pipe(embedSvg({
selectors: 'img.icon, img.bg-triangle',
root: `${themes[theme].paths.root}/pages`,
attrs: /class/
}))
.pipe(htmlPrettify(prettifyOptions)) // .pipe(rename({ prefix: `${theme}-` }))
.pipe(gulp.dest(`${paths.dist.folder}/${theme}`))
.on('finish', reload);
});
done();
});
// Produce theme.css and sourcemaps from scss.
gulp.task('dist:sass', function(done) {
Object.keys( themes ).forEach(
(theme) => {
gulp.src(paths.scss.themeScss.map(function(a) {return `${themes[theme].paths.root}/` + a}))
.pipe(sourcemaps.init())
.pipe(sass({ importer: cssImporter }).on('error', sass.logError))
.pipe(autoprefixer({ browsers }))
.pipe(rename( { prefix: `${theme}-` } ))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.dist.css))
.pipe(reload({ stream: true }));
}
);
done();
});
// Produce minified theme.css and sourcemaps from scss.
gulp.task('dist:sass-min', function(done) {
Object.keys( themes ).forEach(
(theme) => {
gulp.src(paths.scss.themeScss.map(function(a) {return `${themes[theme].paths.root}/` + a}))
.pipe(sourcemaps.init())
.pipe(sass({ importer: cssImporter }).on('error', sass.logError))
.pipe(cleanCSS({ compatibility: 'ie9' }))
.pipe(autoprefixer({ browsers }))
.pipe( rename({ prefix: `${theme}-`, suffix: '.min' }))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(`${paths.dist.css}`))
.pipe(reload({ stream: true }));
}
);
done();
});
// Compile bootstrap.js
gulp.task('dist:bootstrapjs', function(done) {
Object.keys( themes ).forEach(
theme => gulp.src(paths.js.bootstrap.map(function(a) {return `${themes[theme].paths.root}/` + a}))
.pipe(concat('bootstrap.js'))
.pipe(replace(/^(export|import).*/gm, ''))
.pipe(
babel({
compact: false,
presets: [
[
'env',
{
modules: false,
loose: true,
},
],
],
plugins: [
process.env.PLUGINS && 'transform-es2015-modules-strip',
'@babel/proposal-object-rest-spread',
].filter(Boolean),
}),
)
.pipe(gulp.dest(paths.dist.js))
.pipe(uglify())
.pipe(
rename({
suffix: '.min',
}),
)
.pipe(gulp.dest(paths.dist.js))
.pipe(reload({ stream: true }))
);
done();
});
// Compile mrare js into theme.js
gulp.task('dist:mrarejs', function(done) {
Object.keys( themes ).forEach(
theme => gulp.src(paths.js.mrare.map(function(a) {return `${themes[theme].paths.root}/` + a}))
.pipe(eslint({
rules: {
"operator-linebreak":0,
"no-multiple-empty-lines": 0
}
}))
.pipe(eslint.format())
.pipe(eslint.failAfterError())
.pipe(concat('theme.js'))
.pipe(replace(/^(export|import).*/gm, ''))
.pipe(
babel({
compact: false,
presets: [
[
'env',
{
modules: false,
loose: true,
},
],
],
plugins: ['transform-es2015-modules-strip'],
}),
)
.pipe(rename({ prefix: `${theme}-`}))
.pipe(gulp.dest(paths.dist.js))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(paths.dist.js))
.pipe(reload({ stream: true }))
);
done();
});
// Copy assets from pages/assets to dist/assets
gulp.task('dist:assets', function(done) {
Object.keys( themes ).forEach(
theme => copyNewer(
`${themes[theme].paths.root}/${paths.assets.all}`,
`${paths.dist.folder}/${theme}/assets`
)
);
done();
});
// Copy dependencies from node_modules to assets folders
// using paths.copyDependencies array above
gulp.task('dist:deps', function(done) {
paths.copyDependencies.forEach(function(files) {
gulp.src(`${files.from}/${files.files}`)
.pipe(newer(files.to))
.pipe(gulp.dest(`${paths.dist.folder}/${files.to}`));
});
done();
});
// watch files for changes and reload
gulp.task('serve', function() {
return browserSync({
server: {
baseDir: './dist',
index: 'index.html',
},
});
});
// Run django server
gulp.task( 'serve:django', function( cb ) {
var cmd = spawn(
'python',
[ '../studio/manage.py', 'runserver', '0.0.0.0:5000' ],
{ stdio: 'inherit'}
);
cmd.on( 'close', function( code ) {
console.log( 'serve:django exited with code ' + code );
cb( code );
} );
} );
gulp.task( 'watch', function() {
gulp.watch( paths.sass + '/*.scss', [ 'dist:scss' ] );
Object.keys( paths.themes ).forEach(
theme => gulp.watch( paths.themes[ theme ].scss, [ 'dist:scss' ] )
);
gulp.watch( paths.js + '/*.js', [ 'dist:dependencies' ] ).on( "change", reload );
// gulp.watch( paths.images + '/*', [ 'dist:imagecompress' ] );
gulp.watch( paths.templates + '/**/*.html' ).on( "change", reload );
} );
gulp.task('watchAlt', function() {
// // PAGES - Watch only .html pages as they can be recompiled individually
// Object.keys( themes ).forEach(
// theme => gulp.watch(
// [`${themes[theme].paths.root}/${paths.pages.html}`],
// { cwd: './' },
// gulp.parallel('dist:html')
// )
// );
// // SCSS - Any .scss file change will trigger a sass rebuild
// Object.keys( themes ).forEach(
// theme => gulp.watch(
// [`${themes[theme].paths.root}/${paths.scss.all}`],
// { cwd: './' },
// gulp.parallel('dist:sass')
// )
// );
// // JS - Rebuild bootstrap js if files change
// Object.keys( themes ).forEach(
// theme => gulp.watch(
// [`${themes[theme].paths.root}/${paths.js.bootstrap}`],
// { cwd: './' },
// gulp.parallel('dist:bootstrapjs')
// )
// );
// // Rebuild mrare js if files change
// Object.keys( themes ).forEach(
// theme => gulp.watch(
// [`${themes[theme].paths.root}/${paths.js.mrare}`],
// { cwd: './' },
// gulp.parallel('dist:mrarejs')
// )
// );
// Watch all other static assets
const assetsWatcher = gulp.watch(
[paths.assets.all, paths.assets.allFolders],
{ cwd: './' },
gulp.parallel('dist:assets'),
);
// Handle file deletions between source and dist
assetsWatcher.on('change', function(event) {
const changedDistFile = path.resolve(
paths.dist.assets,
path.relative(path.resolve(paths.assets.folder), event.path),
);
log(`${event.type} ${path.basename(changedDistFile)}`);
if (event.type === 'deleted') {
del.sync(changedDistFile);
}
});
return assetsWatcher;
});
// Default task builds then opens browsersync server and watches for changes.
gulp.task(
'default',
gulp.series(
'dist:clean',
'dist:assets',
gulp.parallel('dist:html', 'dist:sass-min', 'dist:bootstrapjs', 'dist:mrarejs'),
gulp.parallel('serve:django'),
function(done) {
done();
},
),
);
// Utility function for copying only newer files
function copyNewer(from, to) {
return gulp
.src(from)
.pipe(newer(to))
.pipe(gulp.dest(to))
.on('end', reload);
}
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.