mediumra.re gulpfile for insight and pipeline themes...

gulpfile.js

/* 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);
}