"use strict";
const autoprefixer = require("autoprefixer");
const browsersync = require("browser-sync").create();
const cssnano = require("cssnano");
const gulp = require("gulp");
const replace = require("gulp-replace");
const postcss = require("gulp-postcss");
const svgstore = require("gulp-svgstore");
const sass = require('gulp-sass')(require('sass'));
const globImporter = require("node-sass-glob-importer");
const sourcemaps = require("gulp-sourcemaps");
const webpack = require("webpack");
const webpackconfig = require("./webpack.config.js");
const webpackstream = require("webpack-stream");
const source = {
src: "./theme/_src/",
};
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./",
directory: true,
},
files: ["./html/*.html", "./css/*.css", "./js/*.js", "./img/**/*"],
files : [ './views/**' ],
watchEvents : [ 'change', 'add', 'unlink', 'addDir', 'unlinkDir' ],
rewriteRules: [
{
match: new RegExp("theme/css/common.css"),
fn: function () {
return "./theme/css/common.css";
},
},
{
match: new RegExp("theme/js/"),
fn: function () {
return "./theme/js/";
},
},
],
serveStatic: ["./"],
notify: false,
open: false,
});
done();
}
// BrowserSync Reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
// CSS
function css() {
return gulp
.src(source.src + "scss/*.{sass,scss}")
.pipe(sourcemaps.init())
.pipe(
sass({
importer: globImporter(),
outputStyle: "expanded", // nested, expanded, compact, compressed
precision: 5,
includePaths: ["node_modules", "./theme/_src/sass"],
}).on("error", sass.logError)
)
// .pipe(replace(new RegExp("(../){2,}", "g"), "../"))
.pipe(postcss([autoprefixer, cssnano]))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./theme/css/"))
.pipe(browsersync.stream());
}
function sprite() {
return gulp
.src("theme/_src/svg-ico/*.svg")
.pipe(svgstore())
.pipe(gulp.dest("theme/img"));
}
// JS
function scripts() {
return (
gulp
.src([source.src + "js/*.js"])
.pipe(webpackstream(webpackconfig, webpack))
// folder only, filename is specified in webpack config
.pipe(gulp.dest("./theme/js/"))
.pipe(browsersync.stream())
);
}
// Watch files
function watchFiles() {
gulp.watch(source.src + "scss/**/*", css);
gulp.watch(source.src + "js/**/*", gulp.series(scripts));
gulp.watch(source.src + "svg-ico/*.svg", gulp.series(sprite));
}
// define complex tasks
const js = gulp.series(scripts);
const build = gulp.parallel(css, js, sprite);
const watch = gulp.parallel(build, watchFiles, browserSync);
// export tasks
exports.css = css;
exports.js = js;
exports.build = build;
exports.watch = watch;
exports.default = watch;const watch = gulp.parallel(build, watchFiles, serve)