|
|
@ -21,6 +21,7 @@ import sanitizeHtml from 'sanitize-html'; |
|
|
import {escape} from "lodash-es"; |
|
|
import {escape} from "lodash-es"; |
|
|
import archiver from 'archiver'; |
|
|
import archiver from 'archiver'; |
|
|
import {getBlockConfigs, getConfigs, readJSONFile} from "./helpers.js"; |
|
|
import {getBlockConfigs, getConfigs, readJSONFile} from "./helpers.js"; |
|
|
|
|
|
import PluginError from 'plugin-error'; |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Constants |
|
|
* Constants |
|
|
@ -28,10 +29,6 @@ import {getBlockConfigs, getConfigs, readJSONFile} from "./helpers.js"; |
|
|
|
|
|
|
|
|
const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs(); |
|
|
const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs(); |
|
|
const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life'; |
|
|
const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life'; |
|
|
const sass = gulpSass(dartSass); |
|
|
|
|
|
|
|
|
|
|
|
buildStyleFiles() |
|
|
|
|
|
buildScriptFiles() |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Init server |
|
|
* Init server |
|
|
@ -41,6 +38,7 @@ let port = 3000; // This variable is used in `*.hbs` and it will be updated once |
|
|
let previewFrameUrl = `http://localhost:${port}`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
|
|
|
let previewFrameUrl = `http://localhost:${port}`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
|
|
|
const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data'))); |
|
|
const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data'))); |
|
|
const app = express(); |
|
|
const app = express(); |
|
|
|
|
|
const sass = gulpSass(dartSass); |
|
|
|
|
|
|
|
|
const hbs = create({ |
|
|
const hbs = create({ |
|
|
extname: '.hbs', defaultLayout: false, partialsDir: ['.'], helpers: { |
|
|
extname: '.hbs', defaultLayout: false, partialsDir: ['.'], helpers: { |
|
|
@ -173,6 +171,9 @@ app.use(express.static(path.join(projectPath, 'src'))); |
|
|
app.use(express.static(path.join(projectPath, 'design'))); |
|
|
app.use(express.static(path.join(projectPath, 'design'))); |
|
|
app.use(express.static(path.join(modulesPath, 'layouts'))); |
|
|
app.use(express.static(path.join(modulesPath, 'layouts'))); |
|
|
|
|
|
|
|
|
|
|
|
// Setup Gulp
|
|
|
|
|
|
await buildAssetFiles(); |
|
|
|
|
|
|
|
|
// BrowserSync
|
|
|
// BrowserSync
|
|
|
const bsOptions = await startBrowserSync(); |
|
|
const bsOptions = await startBrowserSync(); |
|
|
port = bsOptions.port; |
|
|
port = bsOptions.port; |
|
|
@ -212,12 +213,12 @@ function startBrowserSync() { |
|
|
const bs = browserSync.create(); |
|
|
const bs = browserSync.create(); |
|
|
|
|
|
|
|
|
const files = getJSBundleFiles(); |
|
|
const files = getJSBundleFiles(); |
|
|
gulp.watch(files, {delay: 400}, gulp.series([buildScriptFiles, function (cb) { |
|
|
gulp.watch(files, {delay: 400}, gulp.series(['build-script-files', function (cb) { |
|
|
browserSyncReload(bs, 'js', 'Script Files Change'); |
|
|
browserSyncReload(bs, 'js', 'Script Files Change'); |
|
|
return cb(); |
|
|
return cb(); |
|
|
}])); |
|
|
}])); |
|
|
|
|
|
|
|
|
gulp.watch(path.join(projectPath, 'src/**/*.scss'), {delay: 400}, gulp.series([buildStyleFiles, function (cb) { |
|
|
gulp.watch(path.join(projectPath, 'src/**/*.scss'), {delay: 400}, gulp.series(['build-styling-files', function (cb) { |
|
|
browserSyncReload(bs, 'css', 'Style Files Change'); |
|
|
browserSyncReload(bs, 'css', 'Style Files Change'); |
|
|
return cb(); |
|
|
return cb(); |
|
|
}])); |
|
|
}])); |
|
|
@ -263,11 +264,14 @@ function getJSBundleFiles() { |
|
|
return [path.join(projectPath, 'src/**/*.js'), path.join(projectPath, 'src/**/*.mjs'), '!' + path.join(projectPath, 'src/**/*.min.js')]; |
|
|
return [path.join(projectPath, 'src/**/*.js'), path.join(projectPath, 'src/**/*.mjs'), '!' + path.join(projectPath, 'src/**/*.min.js')]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function buildScriptFiles() { |
|
|
function buildScriptFiles(done) { |
|
|
const files = getJSBundleFiles(); |
|
|
const files = getJSBundleFiles(); |
|
|
return gulp.src(files) |
|
|
return gulp.src(files) |
|
|
.pipe(sourcemaps.init({})) |
|
|
.pipe(sourcemaps.init({})) |
|
|
.pipe(babel()) |
|
|
.pipe(babel()).on('error', function (error) { |
|
|
|
|
|
showError(new PluginError('JavaScript', error).toString()); |
|
|
|
|
|
done(); |
|
|
|
|
|
}) |
|
|
.pipe(gulp.src(path.join(projectPath, 'vendor/*.js'))) |
|
|
.pipe(gulp.src(path.join(projectPath, 'vendor/*.js'))) |
|
|
// .pipe(gulp.dest('src/'))
|
|
|
// .pipe(gulp.dest('src/'))
|
|
|
.pipe(uglify()) |
|
|
.pipe(uglify()) |
|
|
@ -276,16 +280,40 @@ function buildScriptFiles() { |
|
|
.pipe(gulp.dest(path.join(projectPath, 'src/'))); |
|
|
.pipe(gulp.dest(path.join(projectPath, 'src/'))); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function buildStyleFiles() { |
|
|
function buildStyleFiles(done) { |
|
|
return gulp.src(path.join(projectPath, 'src/**/*.scss')) |
|
|
return gulp.src(path.join(projectPath, 'src/**/*.scss')) |
|
|
.pipe(sourcemaps.init({})) |
|
|
.pipe(sourcemaps.init({})) |
|
|
.pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError)) |
|
|
.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(gulp.dest('src/'))
|
|
|
.pipe(rename({extname: '.min.css'})) |
|
|
.pipe(rename({extname: '.min.css'})) |
|
|
.pipe(sourcemaps.write('.', {})) |
|
|
.pipe(sourcemaps.write('.', {})) |
|
|
.pipe(gulp.dest(path.join(projectPath, 'src'))) |
|
|
.pipe(gulp.dest(path.join(projectPath, 'src'))) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function buildAssetFiles() { |
|
|
|
|
|
// Register tasks.
|
|
|
|
|
|
gulp.task('build-script-files', buildScriptFiles); |
|
|
|
|
|
gulp.task('build-styling-files', buildStyleFiles); |
|
|
|
|
|
|
|
|
|
|
|
// Run first build.
|
|
|
|
|
|
return new Promise((resolve) => { |
|
|
|
|
|
gulp.series('build-script-files', 'build-styling-files', function (cb) { |
|
|
|
|
|
resolve(); |
|
|
|
|
|
})(); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function showError(errorMessage) { |
|
|
|
|
|
console.log(errorMessage); |
|
|
|
|
|
|
|
|
|
|
|
// TODO: Send this message to browser.
|
|
|
|
|
|
// So the developer can understand there is an error.
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function prepareListOfDataFiles(dataFiles) { |
|
|
function prepareListOfDataFiles(dataFiles) { |
|
|
return dataFiles |
|
|
return dataFiles |
|
|
.filter((fileName) => fileName.split('.').pop() === 'json') |
|
|
.filter((fileName) => fileName.split('.').pop() === 'json') |
|
|
|
