Refactor build to split up reading and gettings configs into utils
This commit is contained in:
Dan Mindru
Dan Mindru
parent
6ab7b8d962
commit
7cd7e53300
129
tasks/build.js
129
tasks/build.js
|
|
@ -4,15 +4,12 @@ const minifyHTML = require('gulp-minify-html');
|
||||||
const minifyInline = require('gulp-minify-inline');
|
const minifyInline = require('gulp-minify-inline');
|
||||||
const preprocess = require('gulp-preprocess');
|
const preprocess = require('gulp-preprocess');
|
||||||
const rename = require('gulp-rename');
|
const rename = require('gulp-rename');
|
||||||
const klaw = require('klaw');
|
|
||||||
const fs = require('fs');
|
|
||||||
const del = require('del');
|
const del = require('del');
|
||||||
const inlineimg = require('gulp-inline-images-no-http');
|
const inlineimg = require('gulp-inline-images-no-http');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const { getConfigsForDir, getFilePathsForDir } = require('./util/util');
|
||||||
|
|
||||||
function buildTask(options) {
|
function buildTask(options) {
|
||||||
const { configurationFile } = options;
|
|
||||||
|
|
||||||
// Requires: 'dupe', 'less', 'sass', 'postcss', 'lint'.
|
// Requires: 'dupe', 'less', 'sass', 'postcss', 'lint'.
|
||||||
gulp.task('build', function build(done) {
|
gulp.task('build', function build(done) {
|
||||||
/**
|
/**
|
||||||
|
|
@ -23,68 +20,45 @@ function buildTask(options) {
|
||||||
* @param {Array} confItems A list of configurations objects (usually persons) to make templates from.
|
* @param {Array} confItems A list of configurations objects (usually persons) to make templates from.
|
||||||
*/
|
*/
|
||||||
function makeTemplates(dir, confItems) {
|
function makeTemplates(dir, confItems) {
|
||||||
return confItems.map(conf => {
|
return confItems.map(async conf => {
|
||||||
const cwd = options.workingDir + '/' + dir;
|
const cwd = `${options.workingDir}/${dir}`;
|
||||||
const files = [];
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Find stylesheets relative to the CWD & generate <link> tags.
|
* Find stylesheets relative to the CWD & generate <link> tags.
|
||||||
* This way we can automagically inject them into <head>.
|
* This way we can automagically inject them into <head>.
|
||||||
*/
|
*/
|
||||||
return new Promise(resolve => {
|
const files = await getFilePathsForDir(cwd);
|
||||||
klaw(cwd)
|
const context = Object.assign(conf, {
|
||||||
.on('readable', function walkTemplateDir() {
|
stylesheets: files
|
||||||
let file;
|
.filter(file => !!file.match(/.*\.css/)) // Read only CSS files.
|
||||||
|
.reduce((acc, cur) => {
|
||||||
while ((file = this.read())) {
|
const cssPath = path.win32.basename(cur);
|
||||||
const relativePath =
|
return (acc += '<link rel="stylesheet" href="' + cssPath + '">');
|
||||||
__dirname.substring(0, __dirname.lastIndexOf('/')) +
|
}, '')
|
||||||
'/tmp/' +
|
|
||||||
dir;
|
|
||||||
files.push(file.path.replace(relativePath, ''));
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.on('end', function finishedTemplateDirWalk() {
|
|
||||||
/**
|
|
||||||
* Creates a context of stylesheets to inject them into HTML files later.
|
|
||||||
* Generates a list of <link> tags with the found stylesheets.
|
|
||||||
*/
|
|
||||||
const context = Object.assign(conf, {
|
|
||||||
stylesheets: files
|
|
||||||
.filter(file => !!file.match(/.*\.css/)) // Read only CSS files.
|
|
||||||
.reduce((acc, cur) => {
|
|
||||||
const cssPath = path.win32.basename(cur);
|
|
||||||
return (acc +=
|
|
||||||
'<link rel="stylesheet" href="' + cssPath + '">');
|
|
||||||
}, '')
|
|
||||||
});
|
|
||||||
|
|
||||||
options
|
|
||||||
.src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html'])
|
|
||||||
.pipe(preprocess({ context }))
|
|
||||||
.pipe(inlineimg())
|
|
||||||
.pipe(
|
|
||||||
inlineCss({
|
|
||||||
applyTableAttributes: true,
|
|
||||||
applyWidthAttributes: true,
|
|
||||||
preserveMediaQueries: true,
|
|
||||||
removeStyleTags: false
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.pipe(minifyHTML({ quotes: true }))
|
|
||||||
.pipe(minifyInline())
|
|
||||||
.pipe(
|
|
||||||
rename(function rename(path) {
|
|
||||||
path.dirname = dir;
|
|
||||||
path.basename += '-' + conf.id;
|
|
||||||
return path;
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.pipe(gulp.dest(options.dist));
|
|
||||||
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return options
|
||||||
|
.src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html'])
|
||||||
|
.pipe(preprocess({ context }))
|
||||||
|
.pipe(inlineimg())
|
||||||
|
.pipe(
|
||||||
|
inlineCss({
|
||||||
|
applyTableAttributes: true,
|
||||||
|
applyWidthAttributes: true,
|
||||||
|
preserveMediaQueries: true,
|
||||||
|
removeStyleTags: false
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.pipe(minifyHTML({ quotes: true }))
|
||||||
|
.pipe(minifyInline())
|
||||||
|
.pipe(
|
||||||
|
rename(function rename(path) {
|
||||||
|
path.dirname = dir;
|
||||||
|
path.basename += '-' + conf.id;
|
||||||
|
return path;
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.pipe(gulp.dest(options.dist));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -93,42 +67,13 @@ function buildTask(options) {
|
||||||
* For each found config, a template group will be generated through `makeTemplates`.
|
* For each found config, a template group will be generated through `makeTemplates`.
|
||||||
*/
|
*/
|
||||||
return del(options.dist)
|
return del(options.dist)
|
||||||
.then(function buildStart() {
|
.then(() => {
|
||||||
/**
|
/**
|
||||||
* Loop through dirs and load their conf files.
|
* Loop through dirs and load their conf files.
|
||||||
* Promisify all 'makeTemplate' calls and when resolved, let gulp know we're done.
|
* Promisify all 'makeTemplate' calls and when resolved, let gulp know we're done.
|
||||||
*/
|
*/
|
||||||
const promises = [];
|
const configs = getConfigsForDir(options.workingDir, options.configurationFile);
|
||||||
|
return Promise.all(configs.map(({ dir, confItems }) => makeTemplates(dir, confItems)));
|
||||||
fs.readdirSync(options.workingDir).forEach(function readConfigurations(
|
|
||||||
dir
|
|
||||||
) {
|
|
||||||
const confPath = `../tmp/${dir}/${configurationFile}`;
|
|
||||||
|
|
||||||
/** Exit with warn if no configuration file found. */
|
|
||||||
if (!fs.existsSync(path.resolve(options.workingDir, confPath))) {
|
|
||||||
return console.warn(
|
|
||||||
`Missing configuration in "${dir}". Did you remember to create "${dir}/${configurationFile}"?`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let current = null;
|
|
||||||
let confItems;
|
|
||||||
|
|
||||||
delete require.cache[require.resolve(confPath)]; // NB: For 'watch' to properly work, the cache needs to be deleted before each require.
|
|
||||||
current = require(confPath);
|
|
||||||
|
|
||||||
// Handle single objects or arrays of configs.
|
|
||||||
if (current && current.length) {
|
|
||||||
confItems = [...current];
|
|
||||||
} else {
|
|
||||||
confItems = [current];
|
|
||||||
}
|
|
||||||
|
|
||||||
promises.push(makeTemplates(dir, confItems));
|
|
||||||
});
|
|
||||||
|
|
||||||
Promise.all(promises);
|
|
||||||
})
|
})
|
||||||
.then(() => done())
|
.then(() => done())
|
||||||
.catch(err => console.log(err));
|
.catch(err => console.log(err));
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const klaw = require('klaw');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given a directory, scans all directories in it (not deep) and returns found config items.
|
||||||
|
*
|
||||||
|
* @param { string } rootDir Dir to look into.
|
||||||
|
* @param { string } configFileName Files to look for in each dir, i.e. conf.json
|
||||||
|
*/
|
||||||
|
const getConfigsForDir = (rootDir, configFileName) => {
|
||||||
|
return fs
|
||||||
|
.readdirSync(rootDir)
|
||||||
|
.map(dir => {
|
||||||
|
const confPath = `${dir}/${configFileName}`;
|
||||||
|
|
||||||
|
/** Exit with warn if no configuration file found. */
|
||||||
|
if (!fs.existsSync(path.resolve(rootDir, confPath))) {
|
||||||
|
console.warn(`Missing configuration in "${dir}". Did you remember to create "${dir}/${configFileName}"?`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
let current = null;
|
||||||
|
let confItems;
|
||||||
|
|
||||||
|
delete require.cache[require.resolve(rootDir, confPath)]; // NB: For 'watch' to properly work, the cache needs to be deleted before each require.
|
||||||
|
current = require(path.resolve(rootDir, confPath));
|
||||||
|
|
||||||
|
// Handle single objects or arrays of configs.
|
||||||
|
if (current && current.length) {
|
||||||
|
confItems = [...current];
|
||||||
|
} else {
|
||||||
|
confItems = [current];
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
dir,
|
||||||
|
confItems
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter(config => config);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given a directory, gets all file paths in it.
|
||||||
|
*/
|
||||||
|
const getFilePathsForDir = dir => {
|
||||||
|
const files = [];
|
||||||
|
|
||||||
|
return new Promise(resolve => {
|
||||||
|
klaw(dir)
|
||||||
|
.on('readable', function walkTemplateDir() {
|
||||||
|
let file;
|
||||||
|
|
||||||
|
while ((file = this.read())) {
|
||||||
|
const relativePath = `${__dirname.substring(0, __dirname.lastIndexOf('/'))}/${dir}`;
|
||||||
|
files.push(file.path.replace(relativePath, ''));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on('end', function finishedTemplateDirWalk() {
|
||||||
|
resolve(files);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getConfigsForDir,
|
||||||
|
getFilePathsForDir
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue