@videinfra/static-website-builder 2.0.0-beta.2 → 2.0.0-beta.3

package/.eslintrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     "env": {
         "browser": true,
         "commonjs": true,

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+    "trailingComma": "all",
+    "useTabs": false,
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 280,
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "always"
+}

package/README.md

@@ -51,7 +51,7 @@ Note: these commands are added to the project during `npm init`.
 
 ### Development server
 
-```npx run builder```
+```npx run builder watch```
 
 ### Generate production ready files
 
@@ -80,7 +80,7 @@ Built-in plugins:
 Plugins can be enabled by adding them to the `config/config.js`, eg.
 
 ```js
-exports.plugins = [
+export const plugins = [
     // Enables SASS engine and .sass and .scss file compilation
     require('@videinfra/static-website-builder/plugins/sass'),
 

package/bin/builder.js

@@ -1,20 +1,28 @@
 #!/usr/bin/env node
-const path = require('path')
+import path from 'path';
+import { fileURLToPath } from 'node:url';
+import minimist from 'minimist';
+import { fork } from 'child_process';
+import { createRequire } from 'node:module';
 
-const allArgs = require('minimist')(process.argv.slice(2));
+const require = createRequire(import.meta.url);
+const allArgs = minimist(process.argv.slice(2));
 const additionalArgs = allArgs._;
 
 if (additionalArgs[0] === 'init') {
-    const init = require('../init/index');
-    init(additionalArgs[1]);
+    import('../init/index').then(({ default: init }) => {
+        init(additionalArgs[1]);
+    });
 } else {
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
     const builderEntryDir = path.resolve(__dirname, '../gulpfile.js');
     const gulpModulePath = path.dirname(require.resolve('gulp'));
     const gulpBinaryFile = path.join(gulpModulePath, '/bin/gulp');
 
     let args = ['--gulpfile', builderEntryDir];
 
-    if(additionalArgs.length) {
+    if (additionalArgs.length) {
         args = args.concat(additionalArgs);
     }
 
@@ -25,10 +33,8 @@ if (additionalArgs[0] === 'init') {
         args = args.concat('--tasks', '');
     }
 
-    require('child_process')
-        .fork(gulpBinaryFile, args)
-        .on('exit', function(code){
-            // Exit with error if child process exited with an error
-            process.exit(code);
-        });
+    fork(gulpBinaryFile, args).on('exit', function (code) {
+        // Exit with error if child process exited with an error
+        process.exit(code);
+    });
 }

package/gulpfile.js

@@ -0,0 +1,63 @@
+import { getConfigAsync } from './lib/get-config.js';
+import generateGulpTasks from './lib/generate-gulp-tasks.js';
+
+// Set mode globally it can be used by tasks
+let hasProductionArg = false;
+
+for (let i = 0; i < process.argv.length; i++) {
+    const argValue = process.argv[i];
+    // If build task is 'build' or '...-build' then set production mode
+    if (argValue === 'build' || argValue.match(/^[a-z0-9-]+-build$/)) {
+        hasProductionArg = true;
+    }
+}
+
+global.production = global.production || hasProductionArg || process.env.NODE_ENV === 'production';
+global.development = !global.production;
+
+// Config file
+let builderConfigFile = process.env.BUILDER_CONFIG_FILE || 'config/config.js';
+
+if (process.argv.indexOf('--config') !== -1) {
+    builderConfigFile = process.argv[process.argv.indexOf('--config') + 1];
+} else {
+    for (let i = 0; i < process.argv.length; i++) {
+        if (process.argv[i].indexOf('--config=') !== -1) {
+            builderConfigFile = process.argv[i].substr(9);
+        }
+    }
+}
+
+// Load all config files and generate gulp tasks
+const gulpTasks = generateGulpTasks(await getConfigAsync(builderConfigFile));
+
+// Expose main tasks
+export const build = gulpTasks.build;
+export const watch = gulpTasks.watch;
+
+// Expose separate tasks
+export const clean = gulpTasks['clean-beforeBuild'];
+
+export const fonts = gulpTasks['fonts-build'];
+export const fontsWatch = gulpTasks['fonts-watch'];
+
+export const html = gulpTasks['html-build'];
+export const htmlWatch = gulpTasks['html-watch'];
+
+export const icons = gulpTasks['icons-build'];
+export const iconsWatch = gulpTasks['icons-watch'];
+
+export const images = gulpTasks['images-build'];
+export const imagesWatch = gulpTasks['images-watch'];
+
+export const sitemap = gulpTasks['sitemap-afterBuild'];
+export const sitemapWatch = gulpTasks['sitemap-watch'];
+
+export const staticFiles = gulpTasks['staticFiles-build'];
+export const staticFilesWatch = gulpTasks['staticFiles-watch'];
+
+export const stylesheets = gulpTasks['stylesheets-build'];
+export const stylesheetsWatch = gulpTasks['stylesheets-watch'];
+
+export const javascripts = gulpTasks['javascripts-build'];
+export const javascriptsWatch = gulpTasks['javascripts-watch'];

package/init/default/config/config.js

@@ -6,24 +6,27 @@
  * in each tasks config.js file
  */
 
-exports.clean = {};
-exports.static = {};
-exports.html = {};
-exports.data = {};
-exports.fonts = {};
-exports.icons = {};
-exports.images = {};
-exports.javascripts = {};
-exports.stylesheets = {};
-exports.browserSync = {};
-exports.sizereport = {};
+import * as sassPlugin from '@videinfra/static-website-builder/plugins/sass';
+import * as twigPlugin from '@videinfra/static-website-builder/plugins/twig';
 
-exports.plugins = [
+export const clean = {};
+export const staticFiles = {};
+export const html = {};
+export const data = {};
+export const fonts = {};
+export const icons = {};
+export const images = {};
+export const javascripts = {};
+export const stylesheets = {};
+export const browserSync = {};
+export const sizereport = {};
+
+export const plugins = [
     // Enables SASS engine and .sass and .scss file compilation
-    require('@videinfra/static-website-builder/plugins/sass'),
+    sassPlugin,
 
     // Enables TwigJS engine .twig file compilation
-    require('@videinfra/static-website-builder/plugins/twig'),
+    twigPlugin,
 ];
 
 
@@ -35,7 +38,7 @@ exports.plugins = [
  * in each tasks config.js file
  */
 
-exports.paths = {
+export const paths = {
     src: './src',
     dest: './public',
 };

package/init/default/src/html/data/global.js

@@ -4,6 +4,6 @@
  * @example
  *     <div>{{ name }}</div>
  */
-module.exports = {
+export default {
     'name': 'World',
 };

package/init/default/src/javascripts/_entries.js

@@ -2,7 +2,7 @@
 * All files listed in here are created / compiled and additionally
 * shared.js is automatically created, which contains all common JS (chunks / modules imported from more than 1 entry files).
 */
-module.exports = {
+export default {
     'main': [
         './common',
         './main'

package/init/index.js

@@ -1,56 +1,63 @@
-const path = require('../lib/get-path');
-const copyFolder = require('../lib/init/copy-folder');
-const readPackage = require('../lib/init/read-package');
-const mergePackage = require('../lib/init/merge-package');
-const folderExists = require('../lib/init/folder-exists');
-const getFolderList = require('../lib/init/get-folder-list');
-const chalk = require('chalk');
-
-module.exports = function init (template = 'default') {
-    let   templateName = template || 'default';
-    let   copyFrom = path.getBuilderPath('init', templateName);
-    const copyTo = path.getProjectPath();
+import { getBuilderPath, getProjectPath } from '../lib/get-path.js';
+import copyFolder from '../lib/init/copy-folder.js';
+import readPackage from '../lib/init/read-package.js';
+import mergePackage from '../lib/init/merge-package.js';
+import folderExists from '../lib/init/folder-exists.js';
+import getFolderList from '../lib/init/get-folder-list.js';
+
+import chalk from 'chalk';
+import { exec } from 'child_process';
+
+export default function init(template = 'default') {
+    let templateName = template || 'default';
+    let copyFrom = getBuilderPath('init', templateName);
+    const copyTo = getProjectPath();
 
     if (template === 'test' || !folderExists(copyFrom)) {
-        console.log(chalk.red(`Template "${ templateName }" doesn't exist`));
+        console.log(chalk.red(`Template "${templateName}" doesn't exist`));
 
-        getFolderList(path.getBuilderPath('init')).then((templates) => {
+        getFolderList(getBuilderPath('init')).then((templates) => {
             console.log('Available templates:');
-            console.log(chalk.cyan(`    ${ templates.join('\n    ') }`));
+            console.log(chalk.cyan(`    ${templates.join('\n    ')}`));
         });
         return;
     }
 
-    console.log(chalk.magenta(`Generating project files using template "${ templateName }"`));
+    console.log(chalk.magenta(`Generating project files using template "${templateName}"`));
 
     // Copy files
     const filesCopied = copyFolder(copyFrom, copyTo);
 
     // Merge template package.json into projects package.json
-    const packageMerged = readPackage(path.getBuilderPath('init', templateName, 'package.json'), {}).then((package) => {
-        return mergePackage(path.getProjectPath('package.json'), package).then(() => {
-            if (package.dependencies || package.devDependencies) {
-                console.log(chalk.magenta('Installing npm dependencies'));
-
-                return new Promise((resolve, reject) => {
-                    require('child_process').exec('npm install', function (error, stdout, stderr) {
-                        resolve();
+    const packageMerged = readPackage(getBuilderPath('init', templateName, 'package.json'), {}).then((packageJSON) => {
+        return mergePackage(getProjectPath('package.json'), packageJSON)
+            .then(() => {
+                if (packageJSON.dependencies || packageJSON.devDependencies) {
+                    console.log(chalk.magenta('Installing npm dependencies'));
+
+                    return new Promise((resolve, _reject) => {
+                        exec('npm install', function (_error, _stdout, _stderr) {
+                            resolve();
+                        });
                     });
-                });
-            }
-        }).catch((err) => {
-            // Skip errors
-            return Promise.resolve();
-        });
+                }
+            })
+            .catch((_err) => {
+                // Skip errors
+                return Promise.resolve();
+            });
     });
 
-    Promise.all([filesCopied, packageMerged]).then(() => {
-        console.log(chalk.green('All done\n'));
+    Promise.all([filesCopied, packageMerged]).then(
+        () => {
+            console.log(chalk.green('All done\n'));
 
-        console.log('To start the dev server:\n' + chalk.cyan('    npm run start'));
+            console.log('To start the dev server:\n' + chalk.cyan('    npm run start'));
 
-        console.log('To build the project:\n' + chalk.cyan('    npm run build'));
-    }, (err) => {
-        throw err;
-    });
+            console.log('To build the project:\n' + chalk.cyan('    npm run build'));
+        },
+        (err) => {
+            throw err;
+        },
+    );
 }

package/init/test/config/config.js

@@ -2,14 +2,18 @@
  * Build a project for testing
  */
 
-exports.clean = {};
-exports.static = {};
-exports.html = {};
-exports.data = {};
-exports.fonts = {};
-exports.icons = {};
-exports.images = {};
-exports.javascripts = {
+import * as sassPlugin from '../../../plugins/sass.js';
+import * as twigPlugin from '../../../plugins/twig.js';
+import * as symfonyFiltersPlugin from '../../../plugins/twig/symfony-filters.js';
+
+export const clean = {};
+export const staticFiles = {};
+export const html = {};
+export const data = {};
+export const fonts = {};
+export const icons = {};
+export const images = {};
+export const javascripts = {
     entryList: [
         {
             name: '_entries.js',
@@ -22,21 +26,21 @@ exports.javascripts = {
         },
     ],
 };
-exports.stylesheets = {};
-exports.sizereport = false;
+export const stylesheets = {};
+export const sizereport = false;
 
-exports.plugins = [
+export const plugins = [
     // Enables SASS engine and .sass and .scss file compilation
-    require('../../../plugins/sass'),
+    sassPlugin,
 
     // Enables TwigJS engine .twig file compilation
-    require('../../../plugins/twig'),
+    twigPlugin,
 
     // Enables TWIG Symfony filters
-    require('../../../plugins/twig/symfony-filters'),
+    symfonyFiltersPlugin,
 ];
 
-exports.env = {
+export const env = {
     map: {
         'HOST': 'host',
         'FOO': 'foo',
@@ -56,7 +60,7 @@ exports.env = {
  * in each tasks config.js file
  */
 
-exports.paths = {
+export const paths = {
     src: './init/test/src',
     dest: './tests/build/public',
     env: ['./init/test/.env', './init/test/.env.local'],

package/init/test/src/html/data/global.js

@@ -4,7 +4,7 @@
  * @example
  *     <div>{{ name }}</div>
  */
-module.exports = {
+export default {
     'world': 'World',
     'hostFromGlobalJS': process.env.host,
 };

package/lib/camelize-file-name.js

@@ -4,7 +4,7 @@
  * @param {string} str File name
  * @returns {string} Camelized name
  */
-module.exports = function camelizeFileName (str) {
+export default function camelizeFileName (str) {
     return str
          // Remove extension
         .replace(/(.+?)\..*$/ig, '$1')

package/lib/generate-gulp-tasks.js

@@ -1,9 +1,9 @@
-const map = require('lodash/map');
-const assign = require('lodash/assign');
-const filter = require('lodash/filter');
-const { series, parallel } = require('gulp');
-const { DEFAULT_TASKS, BUILD_TASKS } = require('./task-order');
-const resolveDynamicTask = require('./gulp/resolve-dynamic-task');
+import map  from 'lodash/map.js';
+import assign  from 'lodash/assign.js';
+import filter  from 'lodash/filter.js';
+import { series, parallel }  from 'gulp';
+import { DEFAULT_TASKS, BUILD_TASKS }  from './task-order.js';
+import resolveDynamicTask  from './gulp/resolve-dynamic-task.js';
 
 /**
  * Sort tasks by .order property
@@ -21,7 +21,7 @@ function sortTasks (tasks) {
  * @param {object} taskConfig Task config
  * @returns {object} Task list
  */
-function generateTaskList (taskConfig) {
+export function generateTaskList (taskConfig) {
     const taskList = {
         'default': map(DEFAULT_TASKS, (taskName) => []),
         'build': map(BUILD_TASKS, (taskName) => []),
@@ -58,6 +58,9 @@ function generateTaskList (taskConfig) {
     taskList.default = filter(taskList.default, taskGroup => taskGroup.length).sort(sortTasks);
     taskList.build = filter(taskList.build, taskGroup => taskGroup.length).sort(sortTasks);
 
+    // Alias default to watch
+    taskList.watch = taskList.default;
+
     return taskList;
 }
 
@@ -67,7 +70,7 @@ function generateTaskList (taskConfig) {
  * @param {object} taskConfig Task config
  * @returns {object} Gulp task list
  */
-module.exports = function generateGulpTasks (taskConfig) {
+export default function generateGulpTasks (taskConfig) {
     const taskList = generateTaskList(taskConfig);
 
     // Create gulp tasks with parallel and series
@@ -76,8 +79,7 @@ module.exports = function generateGulpTasks (taskConfig) {
 
     return assign({
         'default': series(...defaultGulpTasks),
+        'watch': series(...defaultGulpTasks), // watch and default are aliases
         'build': series(...buildGulpTasks),
     }, taskList.separate);
 }
-
-module.exports.generateTaskList = generateTaskList;