'use strict' var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var sass = require('gulp-sass'); var del = require('del'); var replace = require('gulp-replace'); var injectPartials = require('gulp-inject-partials'); var inject = require('gulp-inject'); var sourcemaps = require('gulp-sourcemaps'); var concat = require('gulp-concat'); var merge = require('merge-stream'); gulp.task('sass', function () { return gulp.src('./scss/**/style.scss') .pipe(sourcemaps.init()) .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./css')) .pipe(browserSync.stream()); }); // Static Server + watching scss/html files gulp.task('serve', gulp.series('sass', function() { browserSync.init({ port: 3001, server: "./", ghostMode: false, notify: false }); gulp.watch('scss/**/*.scss', gulp.series('sass')); gulp.watch('**/*.html').on('change', browserSync.reload); gulp.watch('js/**/*.js').on('change', browserSync.reload); })); // Static Server without watching scss files gulp.task('serve:lite', function() { browserSync.init({ server: "./", ghostMode: false, notify: false }); gulp.watch('**/*.css').on('change', browserSync.reload); gulp.watch('**/*.html').on('change', browserSync.reload); gulp.watch('js/**/*.js').on('change', browserSync.reload); }); /* inject partials like sidebar and navbar */ gulp.task('injectPartial', function () { return gulp.src("./**/*.html", { base: "./" }) .pipe(injectPartials()) .pipe(gulp.dest(".")); }); /* inject Js and CCS assets into HTML */ gulp.task('injectCommonAssets', function () { return gulp.src('./**/*.html') .pipe(inject(gulp.src([ './vendors/typicons/typicons.css', './vendors/css/vendor.bundle.base.css', './vendors/js/vendor.bundle.base.js', ], {read: false}), {name: 'base', relative: true})) .pipe(inject(gulp.src([ './css/*.css', './js/off-canvas.js', './js/hoverable-collapse.js', './js/template.js', './js/settings.js', './js/todolist.js' ], {read: false}), {relative: true})) .pipe(gulp.dest('.')); }); /* inject Js and CCS assets into HTML */ gulp.task('injectLayoutStyles', function () { var verticalLightStream = gulp.src(['./**/vertical-default-light/**/*.html', './**/vertical-boxed/**/*.html', './**/vertical-compact/**/*.html', './**/vertical-dark-sidebar/**/*.html', './**/vertical-fixed/**/*.html', './**/vertical-hidden-toggle/**/*.html', './**/vertical-icon-menu/**/*.html', './**/vertical-toggle-overlay/**/*.html', './index.html']) .pipe(inject(gulp.src([ './css/vertical-layout-light/style.css', ], {read: false}), {relative: true})) .pipe(gulp.dest('.')); var horizontalLightStream = gulp.src('./**/horizontal-default-light/**/*.html') .pipe(inject(gulp.src([ './css/horizontal-layout-light/style.css', ], {read: false}), {relative: true})) .pipe(gulp.dest('.')); var horizontalDarkStream = gulp.src('./**/horizontal-default-dark/**/*.html') .pipe(inject(gulp.src([ './css/horizontal-layout-dark/style.css', ], {read: false}), {relative: true})) .pipe(gulp.dest('.')); var verticalDarkStream = gulp.src('./**/vertical-default-dark/**/*.html') .pipe(inject(gulp.src([ './css/vertical-layout-dark/style.css', ], {read: false}), {relative: true})) .pipe(gulp.dest('.')); return merge(verticalLightStream, horizontalLightStream, horizontalDarkStream, verticalDarkStream); }); /*replace image path and linking after injection*/ gulp.task('replacePath', function(){ var replacePath1 = gulp.src(['./pages/*/*.html'], { base: "./" }) .pipe(replace('="images/', '="../../images/')) .pipe(replace('href="pages/', 'href="../../pages/')) .pipe(replace('href="index.html"', 'href="../../index.html"')) .pipe(gulp.dest('.')); var replacePath2 = gulp.src(['./pages/*.html'], { base: "./" }) .pipe(replace('="images/', '="../../../images/')) .pipe(replace('"pages/', '"../pages/')) .pipe(replace('href="index.html"', 'href="../index.html"')) .pipe(gulp.dest('.')); var replacePath3 = gulp.src(['./*/index.html'], { base: "./" }) .pipe(replace('="images/', '="../../images/')) .pipe(gulp.dest('.')); return merge(replacePath1, replacePath2, replacePath3); }); /*sequence for injecting partials and replacing paths*/ gulp.task('inject', gulp.series('injectPartial' , 'injectCommonAssets' , 'injectLayoutStyles', 'replacePath')); gulp.task('clean:vendors', function () { return del([ 'vendors/**/*' ]); }); /*Building vendor scripts needed for basic template rendering*/ gulp.task('buildBaseVendorScripts', function() { return gulp.src([ './node_modules/jquery/dist/jquery.min.js', './node_modules/popper.js/dist/umd/popper.min.js', './node_modules/bootstrap/dist/js/bootstrap.min.js', './node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js' ]) .pipe(concat('vendor.bundle.base.js')) .pipe(gulp.dest('./vendors/js')); }); /*Building vendor styles needed for basic template rendering*/ gulp.task('buildBaseVendorStyles', function() { return gulp.src(['./node_modules/perfect-scrollbar/css/perfect-scrollbar.css']) .pipe(concat('vendor.bundle.base.css')) .pipe(gulp.dest('./vendors/css')); }); /*Scripts for addons*/ gulp.task('copyAddonsScripts', function() { var aScript1 = gulp.src(['node_modules/chart.js/dist/Chart.min.js']) .pipe(gulp.dest('./vendors/chart.js')); var aScript2 = gulp.src(['node_modules/moment/moment.js']) .pipe(gulp.dest('./vendors/moment')); var aScript3 = gulp.src(['node_modules/jquery-file-upload/js/jquery.uploadfile.min.js']) .pipe(gulp.dest('./vendors/jquery-file-upload')); var aScript4 = gulp.src(['node_modules/moment/min/moment.min.js']) .pipe(gulp.dest('./vendors/moment')); var aScript5 = gulp.src(['node_modules/codemirror/lib/codemirror.js']) .pipe(gulp.dest('./vendors/codemirror')); var aScript6 = gulp.src(['node_modules/codemirror/mode/javascript/javascript.js']) .pipe(gulp.dest('./vendors/codemirror')); var aScript7 = gulp.src(['node_modules/codemirror/mode/shell/shell.js']) .pipe(gulp.dest('./vendors/codemirror')); var aScript8 = gulp.src(['node_modules/twbs-pagination/jquery.twbsPagination.min.js']) .pipe(gulp.dest('./vendors/twbs-pagination')); var aScript9 = gulp.src(['node_modules/jquery.avgrund/jquery.avgrund.min.js']) .pipe(gulp.dest('./vendors/jquery.avgrund')); var aScript10 = gulp.src(['node_modules/pwstabs/assets/jquery.pwstabs.min.js']) .pipe(gulp.dest('./vendors/pwstabs')); var aScript11 = gulp.src(['./node_modules/summernote/dist/**/*']) .pipe(gulp.dest('./vendors/summernote/dist')); var aScript12 = gulp.src(['./node_modules/tinymce/**/*']) .pipe(gulp.dest('./vendors/tinymce')); var aScript13 = gulp.src(['./node_modules/ace-builds/src-min/**/*']) .pipe(gulp.dest('./vendors/ace-builds/src-min')); var aScript14 = gulp.src(['node_modules/select2/dist/js/select2.min.js']) .pipe(gulp.dest('./vendors/select2')); var aScript15 = gulp.src(['node_modules/typeahead.js/dist/typeahead.bundle.min.js']) .pipe(gulp.dest('./vendors/typeahead.js')); return merge(aScript1, aScript2, aScript3, aScript4, aScript5, aScript6, aScript7, aScript8, aScript9, aScript10, aScript11, aScript12, aScript13, aScript14, aScript15); }); /*Styles for addons*/ gulp.task('copyAddonsStyles', function() { var aStyle1 = gulp.src(['./node_modules/@mdi/font/css/materialdesignicons.min.css']) .pipe(gulp.dest('./vendors/mdi/css')); var aStyle2 = gulp.src(['./node_modules/@mdi/font/fonts/*']) .pipe(gulp.dest('./vendors/mdi/fonts')); var aStyle3 = gulp.src(['./node_modules/font-awesome/css/font-awesome.min.css']) .pipe(gulp.dest('./vendors/font-awesome/css')); var aStyle4 = gulp.src(['./node_modules/font-awesome/fonts/*']) .pipe(gulp.dest('./vendors/font-awesome/fonts')); var aStyle5 = gulp.src(['node_modules/jquery-file-upload/css/uploadfile.css']) .pipe(gulp.dest('./vendors/jquery-file-upload')); var aStyle6 = gulp.src(['node_modules/select2/dist/css/select2.min.css']) .pipe(gulp.dest('./vendors/select2')); var aStyle7 = gulp.src(['node_modules/codemirror/lib/codemirror.css']) .pipe(gulp.dest('./vendors/codemirror')); var aStyle8 = gulp.src(['node_modules/codemirror/theme/ambiance.css']) .pipe(gulp.dest('./vendors/codemirror')); var aStyle9 = gulp.src(['node_modules/quill/dist/quill.snow.css']) .pipe(gulp.dest('./vendors/quill')); var aStyle10 = gulp.src(['node_modules/simplemde/dist/simplemde.min.css']) .pipe(gulp.dest('./vendors/simplemde')); var aStyle11 = gulp.src(['node_modules/jsgrid/dist/jsgrid-theme.min.css']) .pipe(gulp.dest('./vendors/jsgrid')); var aStyle12 = gulp.src(['node_modules/pwstabs/assets/jquery.pwstabs.min.css']) .pipe(gulp.dest('./vendors/pwstabs')); var aStyle13 = gulp.src(['node_modules/typicons.font/src/font/*']) .pipe(gulp.dest('./vendors/typicons')); return merge(aStyle1, aStyle2, aStyle3, aStyle4, aStyle5, aStyle6, aStyle7, aStyle8, aStyle9, aStyle10, aStyle11, aStyle12, aStyle13); }); /*sequence for building vendor scripts and styles*/ gulp.task('bundleVendors', gulp.series('clean:vendors', 'buildBaseVendorStyles','buildBaseVendorScripts', 'copyAddonsStyles', 'copyAddonsScripts')); gulp.task('default', gulp.series('serve'));