'use strict'; const { src, dest, watch, series, parallel } = require('gulp'); const del = require('del'); const concat = require('gulp-concat'); const gulpIf = require('gulp-if'); const postcss = require('gulp-postcss'); const sourcemaps = require('gulp-sourcemaps'); const pug = require('gulp-pug'); const favicons = require('gulp-favicons'); const inject = require('gulp-inject'); const appConfig = require('./package.json'); const production = (process.argv.indexOf('production') > -1); function taskInfo(cb) { console.log(`Running in ${production ? 'production' : 'development'} mode`); cb(); } function taskHTML(cb) { return src('./templates/*.pug') .pipe(pug({ basedir: './templates/includes', ...(!production && {pretty: true}) })) .pipe(dest('./assets')); } function taskLESS(cb) { return src('./css/*.less') .pipe(gulpIf(!production, sourcemaps.init())) .pipe(concat('app.css')) .pipe(require('gulp-less')({ math: 'strict', strictUnits: true })) .pipe(postcss([ require('postcss-flexbugs-fixes'), require('postcss-preset-env')(), require('postcss-normalize')(), require('cssnano')() ])) .pipe(gulpIf(!production, sourcemaps.write())) .pipe(dest('./assets/css')); } function taskCSS(cb) { return src('./css/*.css') .pipe(gulpIf(!production, sourcemaps.init())) .pipe(concat('vendor.css')) .pipe(postcss([ require('cssnano')() ])) .pipe(gulpIf(!production, sourcemaps.write())) .pipe(dest('./assets/css')); } function taskJS(cb) { return src('./js/*.js') .pipe(gulpIf(!production, sourcemaps.init())) .pipe(concat('app.js')) .pipe(require('gulp-uglify')()) .pipe(gulpIf(!production, sourcemaps.write())) .pipe(dest('./assets/js')); } function taskFonts(cb) { return src('./fonts/**/*') .pipe(dest('./assets/fonts')); } function taskFavicon(cb) { return src('./images/favicon.png') .pipe(favicons({ path: '/', appName: appConfig.appName || appConfig.name || "", appDescription: appConfig.description || "", logging: false, html: 'favicon.html', pipeHTML: true, replace: true, ...(appConfig.version && {version: appConfig.version}), ...(appConfig.iconBackgroundColor && {background: appConfig.iconBackgroundColor}), ...(appConfig.themeColor && {theme_color: appConfig.themeColor}), ...(appConfig.url && {url: appConfig.url}), ...(appConfig.scope && {scope: appConfig.scope}), icons: { android: true, appleIcon: false, appleStartup: false, windows: false, yandex: false, } })) .pipe(dest('./assets')); } function taskInjectFavicon(cb) { return src('./assets/index.html') .pipe(inject(src(['./assets/favicon.html']), { starttag: '', transform: function(filePath, file) { return file.contents.toString('utf8').replace(/[\n\r]+/g, ''); }, removeTags: true })) .pipe(dest('./assets')); } function taskCleanFavicon(cb) { return del(['./assets/favicon.html']); } function taskClean(cb) { return del(['./assets/**/*'], cb); } function taskWatch(cb) { taskInfo(() => {}); watch(['./templates/**/*.pug'], series(taskFavicon, taskHTML, taskInjectFavicon, taskCleanFavicon)); watch(['./css/**/*.css'], taskCSS); watch(['./css/**/*.less'], taskLESS); watch(['./js/**/*.js'], taskJS); watch(['./fonts/**/*'], taskFonts); watch(['./images/favicon.png'], series(taskFavicon, taskHTML, taskInjectFavicon, taskCleanFavicon)); } exports.clean = taskClean; exports.watch = taskWatch; exports.build = series(taskInfo, taskClean, series(taskFavicon, taskHTML, taskInjectFavicon, taskCleanFavicon), parallel(taskLESS, taskCSS, taskJS, taskFonts)); exports.default = exports.watch;