You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.5 KiB
109 lines
3.5 KiB
import gulp from "gulp";
|
|
import path from "path";
|
|
import sourcemaps from "gulp-sourcemaps";
|
|
import babel from "gulp-babel";
|
|
import PluginError from "plugin-error";
|
|
import rename from "gulp-rename";
|
|
import uglify from "gulp-uglify";
|
|
import dartSass from 'sass';
|
|
import gulpSass from "gulp-sass";
|
|
import {getBlockName} from "../helpers.js";
|
|
|
|
const sass = gulpSass(dartSass);
|
|
|
|
export function setupWatcher(viewSync) {
|
|
|
|
const watchSCSS = gulp.watch(['blocks/**/*.scss'], {delay: 400});
|
|
watchSCSS.on('change', async function (filepath, stats) {
|
|
const pathArray = filepath.split('/', 3);
|
|
pathArray.shift();
|
|
const block = getBlockName(pathArray.join('/'));
|
|
|
|
buildStyleFiles(path.join('blocks', '@' + block.project, block.name), () => {
|
|
viewSync.syncTemplate(block.blockName, 'styleUpdate');
|
|
})
|
|
});
|
|
|
|
const watchJS = gulp.watch(['blocks/**/*.js', '!blocks/**/*.min.js'], {delay: 400});
|
|
watchJS.on('change', async function (filepath) {
|
|
const pathArray = filepath.split('/', 3);
|
|
pathArray.shift();
|
|
const block = getBlockName(pathArray.join('/'));
|
|
|
|
buildScriptFiles(path.join('blocks', '@' + block.project, block.name), () => {
|
|
viewSync.syncTemplate(block.blockName, 'scriptUpdate');
|
|
})
|
|
});
|
|
|
|
const watchHBS = gulp.watch(['blocks/**/*.hbs'], {delay: 400});
|
|
watchHBS.on('change', async function (filepath) {
|
|
const pathArray = filepath.split('/', 3);
|
|
pathArray.shift();
|
|
const block = getBlockName(pathArray.join('/'));
|
|
|
|
await viewSync.syncTemplate(block.blockName);
|
|
});
|
|
|
|
}
|
|
|
|
export function buildAssetFiles(projectPath) {
|
|
// Register tasks.
|
|
gulp.task('build-script-files', (done) => buildScriptFiles(projectPath, done));
|
|
gulp.task('build-styling-files', (done) => buildStyleFiles(projectPath, done));
|
|
|
|
// Run first build.
|
|
return new Promise((resolve) => {
|
|
gulp.series('build-script-files', 'build-styling-files', function () {
|
|
resolve();
|
|
})();
|
|
});
|
|
}
|
|
|
|
function showError(errorMessage) {
|
|
console.log(errorMessage);
|
|
|
|
// TODO: Send this message to browser.
|
|
// So the developer can understand there is an error.
|
|
}
|
|
|
|
function buildScriptFiles(projectPath = '', done) {
|
|
const files = getJSBundleFiles(projectPath);
|
|
const stream = gulp.src(files, {base: path.posix.join(projectPath, 'src')})
|
|
.pipe(sourcemaps.init({}))
|
|
.pipe(babel()).on('error', function (error) {
|
|
showError(new PluginError('JavaScript', error).toString());
|
|
done();
|
|
})
|
|
.pipe(gulp.src(path.join(projectPath, 'vendor/*.js')))
|
|
// .pipe(gulp.dest('src/'))
|
|
.pipe(rename({extname: '.min.js'}))
|
|
.pipe(uglify())
|
|
.pipe(sourcemaps.write('.'))
|
|
.pipe(gulp.dest(path.posix.join(projectPath, 'src')));
|
|
|
|
stream.on('end', done);
|
|
|
|
return stream;
|
|
}
|
|
|
|
function getJSBundleFiles(projectPath = '') {
|
|
return [path.posix.join(projectPath, "src/**/*.js"), path.posix.join(projectPath, "src/**/*.mjs"), "!" + path.posix.join(projectPath, "src/**/*.min.js")];
|
|
}
|
|
|
|
function buildStyleFiles(projectPath = '', done) {
|
|
const stream = gulp.src(path.join(projectPath, 'src/**/*.scss'), {base: path.posix.join(projectPath, 'src')})
|
|
.pipe(sourcemaps.init({}))
|
|
.pipe(sass.sync({outputStyle: 'compressed'}).on('error', function (error) {
|
|
showError(new PluginError('SCSS', error.messageFormatted).toString());
|
|
// sass.logError(error);
|
|
done();
|
|
}))
|
|
// .pipe(gulp.dest('src/'))
|
|
.pipe(rename({extname: '.min.css'}))
|
|
.pipe(sourcemaps.write('.', {}))
|
|
.pipe(gulp.dest(path.posix.join(projectPath, 'src')));
|
|
|
|
stream.on('end', done);
|
|
|
|
return stream;
|
|
}
|
|
|