gulp-web/gulpfile.js

140 lines
3.2 KiB
JavaScript
Raw Normal View History

2020-05-19 14:58:29 +00:00
const { src, dest, series, parallel, watch } = require('gulp');
2020-05-01 14:30:14 +00:00
2020-05-19 14:58:29 +00:00
const path = require('path');
const del = require('del');
const babel = require('gulp-babel');
const terser = require('gulp-terser');
const mustache = require('gulp-mustache');
2020-05-19 15:17:41 +00:00
const fileInclude = require('gulp-file-include');
2020-05-19 16:17:40 +00:00
const svgmin = require('gulp-svgmin');
2020-05-19 14:58:29 +00:00
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const postcssPresetEnv = require('postcss-preset-env');
const cssnano = require('cssnano');
const browserSync = require('browser-sync');
2020-05-01 14:30:14 +00:00
2020-05-19 14:58:29 +00:00
sass.compiler = require('node-sass');
2020-05-01 14:30:14 +00:00
2020-06-19 10:38:09 +00:00
const server = browserSync.create();
2020-05-19 14:58:29 +00:00
const babelConfig = require('./babel.config.js');
2020-05-01 14:30:14 +00:00
const postcssPlugins = [postcssPresetEnv(), cssnano()];
2020-05-19 14:58:29 +00:00
const srcDir = './src/';
2020-06-19 10:38:09 +00:00
const buildDir = './build/';
2020-05-19 14:58:29 +00:00
const jsSrc = path.join(srcDir, 'js/**/*.js');
const jsDest = path.join(buildDir, 'js/');
const scssSrc = path.join(srcDir, 'scss/**/*.scss');
const cssDest = path.join(buildDir, 'css/');
2020-06-19 10:38:09 +00:00
const htmlSrc = path.join(srcDir, 'html/**/*.html');
const mustacheSrc = path.join(srcDir, 'html/templates/**/*.mustache');
2020-05-19 16:17:40 +00:00
const includeBaseDir = path.join(srcDir, 'includes/');
const includeSrc = path.join(includeBaseDir, '**/*');
const svgSrc = path.join(srcDir, 'svg/**/*.svg');
const svgDest = path.join(includeBaseDir, 'svg/');
2020-06-19 10:38:09 +00:00
const htmlDest = buildDir;
2020-05-19 14:58:29 +00:00
const assetSrc = path.join(srcDir, 'assets/**/*');
const assetDest = path.join(buildDir, 'assets/');
2020-05-01 14:30:14 +00:00
function jsClean() {
2020-05-19 14:58:29 +00:00
return del(jsDest, { force: true });
2020-05-01 14:30:14 +00:00
}
function cssClean() {
2020-05-19 14:58:29 +00:00
return del(cssDest, { force: true });
2020-05-01 14:30:14 +00:00
}
2020-06-19 10:38:09 +00:00
function htmlClean() {
return del(path.join(htmlDest, '*.html'), { force: true });
}
2020-05-01 17:39:31 +00:00
function assetClean() {
2020-05-19 14:58:29 +00:00
return del(assetDest, { force: true });
2020-05-01 17:39:31 +00:00
}
2020-05-01 14:30:14 +00:00
function jsTranspile() {
2020-05-19 14:58:29 +00:00
return src(jsSrc, { sourcemaps: true })
.pipe(babel(babelConfig))
.pipe(terser())
.pipe(dest(jsDest, { sourcemaps: true }));
2020-05-01 14:30:14 +00:00
}
function scssCompile() {
2020-05-19 14:58:29 +00:00
return src(scssSrc, { sourcemaps: true })
.pipe(sass().on('error', sass.logError))
.pipe(postcss(postcssPlugins))
2020-06-19 10:38:09 +00:00
.pipe(dest(cssDest, { sourcemaps: true }))
.pipe(server.stream());
2020-05-01 14:30:14 +00:00
}
2020-05-19 16:17:40 +00:00
function svgOptimise() {
return src(svgSrc)
.pipe(svgmin())
.pipe(dest(svgDest));
}
2020-06-19 10:38:09 +00:00
function htmlCompile() {
return src(htmlSrc)
.pipe(mustache())
.pipe(
fileInclude({
basepath: includeBaseDir,
})
)
.pipe(dest(htmlDest));
}
2020-05-01 17:39:31 +00:00
function assetCompile() {
2020-05-19 14:58:29 +00:00
return src(assetSrc).pipe(dest(assetDest));
2020-05-01 17:39:31 +00:00
}
2020-06-19 10:38:09 +00:00
function serve(done) {
server.init({
open: false,
server: {
baseDir: buildDir,
},
// or instead of server
// proxy: "example.home"
});
done();
}
function reload(done) {
server.reload();
done();
}
2020-05-01 14:30:14 +00:00
const jsWatch = () =>
2020-06-19 10:38:09 +00:00
watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile, reload));
2020-05-19 16:17:40 +00:00
2020-05-01 14:30:14 +00:00
const cssWatch = () =>
2020-05-19 14:58:29 +00:00
watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));
2020-05-19 16:17:40 +00:00
const svgWatch = () =>
watch(svgSrc, { ignoreInitial: false }, series(svgOptimise));
2020-06-19 10:38:09 +00:00
const htmlWatch = () =>
watch(
[htmlSrc, includeSrc, mustacheSrc],
{ ignoreInitial: false },
series(htmlClean, htmlCompile, reload)
);
2020-05-01 17:39:31 +00:00
const assetWatch = () =>
2020-06-19 10:38:09 +00:00
watch(
assetSrc,
{ ignoreInitial: false },
series(assetClean, assetCompile, reload)
);
exports.default = parallel(
jsWatch,
cssWatch,
svgWatch,
htmlWatch,
assetWatch,
serve
);
2020-05-19 16:17:40 +00:00