Merge pull request #79 from locomotivemtl/update-compilation-2020

Update compilation

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env"]
-}

.editorconfig

@@ -9,9 +9,8 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.md]
+[*.{md,markdown}]
 trim_trailing_whitespace = false
 
-[{*.yml,*.json}]
-indent_size = 4
-indent_style = space
+[*.{ms,mustache}]
+insert_final_newline = false

.nvmrc

@@ -0,0 +1 @@
+v14.15.1

README.md

@@ -6,41 +6,41 @@
 <h1 align="center">Locomotive Boilerplate</h1>
 <p align="center">Front-end boilerplate for projects by Locomotive.</p>
 
+## Requirements
+
+| Name       | Version  |
+| ---------- | -------- |
+| [Node]     | > 14.15  |
+
+[Node]:         https://nodejs.org/en/
+
+You can use [nvm](https://github.com/nvm-sh/nvm) to install the node version in `.nvmrc`.
+
 ## Installation
 ```sh
-npm install mbp -g
+npm i
 ```
 
 ## Usage
 ```sh
-# init your project
-mbp init locomotivemtl/locomotive-boilerplate <directory>
-
-# and start it
+# start it
 npm start
 ```
 
 ## Configuration
-Change the mentions of `boilerplate` for your project's name in `mconfig.json`. It is based on [modularBP](https://github.com/modularorg/modularbp).
-
-[Learn more](https://github.com/modularorg/modularbp)
+Change the mentions of `locomotive-boilerplate` for your project's name in `mconfig.json`. Legacy from [modularBP](https://github.com/modularorg/modularbp).
 
 ## Build
-[gulp](https://github.com/gulpjs/gulp) is our build system. It compiles our styles and scripts, generate svg sprites, live reload the browser and minify everything.  
 
 #### Tasks
 ```sh
 # watch
 npm start
 
-# compile
-npm run compile
-
-# minify
+# build
 npm run build
 ```
 
-[Learn more](https://github.com/modularorg/modularbp-gulp)
 
 ## Styles
 [Sass](https://github.com/sass/node-sass) is our CSS preprocessor. [Autoprefixer](https://github.com/postcss/autoprefixer) is also included.

assets/scripts/app.js

@@ -8,7 +8,7 @@ const app = new modular({
 });
 
 window.onload = (event) => {
-    const $style = document.getElementById("stylesheet");
+    const $style = document.getElementById('main-css');
 
     if ($style.isLoaded) {
         init();
@@ -21,6 +21,7 @@ window.onload = (event) => {
 
 function init() {
     globals();
+
     app.init(app);
 
     html.classList.add('is-loaded');

assets/scripts/modules/Scroll.js

@@ -1,4 +1,4 @@
-import { module } from 'modujs';
+import { module } from 'modujs';
 import LocomotiveScroll from 'locomotive-scroll';
 
 export default class extends module {
@@ -12,9 +12,9 @@ export default class extends module {
             smooth: true
         });
 
-        this.scroll.on('call', (func,way,obj,id) => {
+        this.scroll.on('call', (func, way, obj, id) => {
             // Using modularJS
-            this.call(func[0],{way,obj},func[1],func[2]);
+            this.call(func[0], { way, obj }, func[1], func[2]);
         });
 
         this.scroll.on('scroll', (args) => {
@@ -24,11 +24,11 @@ export default class extends module {
 
     toggleLazy(args) {
         let src = this.getData('lazy', args.obj.el)
-        if(src.length) {
-            if(args.obj.el.tagName == "IMG") {
+        if (src.length) {
+            if (args.obj.el.tagName === 'IMG') {
                 args.obj.el.src = src
             } else {
-                args.obj.el.style.backgroundImage = `url(${src})`
+                args.obj.el.style.backgroundImage = `url('${src}')`
             }
             this.setData('lazy', '', args.obj.el)
         }

build/build.js

@@ -0,0 +1,9 @@
+import { buildScripts } from './scripts.js';
+import { concatVendors } from './concat.js';
+import { compileStyles } from './styles.js' ;
+import { generateSpriteSVG } from './svgs.js' ;
+
+buildScripts();
+concatVendors();
+compileStyles();
+generateSpriteSVG();

build/concat.js

@@ -1,14 +1,27 @@
-import gulp from 'gulp';
-import gulpConcat from 'gulp-concat';
 import paths from '../mconfig.json';
+import message from './utils/message.js';
+import fs from 'fs';
+import concat from 'concat';
 
-function concat() {
-    return gulp
-        .src([
-            `${paths.scripts.vendors.src}*.js`
-        ])
-        .pipe(gulpConcat(`${paths.scripts.vendors.main}.js`))
-        .pipe(gulp.dest(paths.scripts.dest));
+export function concatVendors() {
+    console.time('Concat in');
+
+    // Get all files in scripts/vendors/
+    const files = fs.readdirSync(paths.scripts.vendors.src);
+
+    // Exclude files that are not JavaScript
+    var jsFiles = files.filter((file) => {
+        return file.includes('.js');
+    });
+
+    // Prepend absolute path
+    jsFiles = jsFiles.map((file) => {
+        return `${paths.scripts.vendors.src + file}`;
+    });
+    // add files in node_modules example:
+    // jsFiles.push('node_modules/gsap/dist/gsap.min.js');
+
+    concat(jsFiles, paths.scripts.dest + paths.scripts.vendors.main + '.js').then(() => {
+        message('Vendors concatenated', 'success', 'Concat in');
+    })
 }
-
-export default concat;

build/notification.js

@@ -0,0 +1,9 @@
+import notifier from 'node-notifier';
+
+export default function notification({ title, message }) {
+    notifier.notify({
+        title: title,
+        message: message,
+        icon: 'https://user-images.githubusercontent.com/4596862/54868065-c2aea200-4d5e-11e9-9ce3-e0013c15f48c.png'
+    });
+}

build/scripts.js

@@ -0,0 +1,30 @@
+import esbuild from 'esbuild';
+import paths from '../mconfig.json';
+import message from './utils/message.js';
+import notification from './notification.js';
+
+export function buildScripts() {
+    console.time('JS built in');
+
+    esbuild.build({
+        entryPoints: [ paths.scripts.src + paths.scripts.main + '.js' ],
+        bundle: true,
+        minify: true,
+        sourcemap: true,
+        color: true,
+        logLevel: 'error',
+        errorLimit: 1,
+        target: [ 'es2015' ],
+        outfile: paths.scripts.dest + paths.scripts.main + '.js'
+    }).catch((e) => {
+        // errors managments (already done in esbuild)
+
+        notification({
+            title: 'Javascript built failed 🚨',
+            message: `${e.errors[0].text} in ${e.errors[0].location.file} line ${e.errors[0].location.line}`
+        });
+
+    }).then(() => {
+        message('Javascript built','success', 'JS built in')
+    })
+}

build/serve.js

@@ -1,17 +0,0 @@
-import browserSync from 'browser-sync';
-import paths from '../mconfig.json';
-
-export const server = browserSync.create();
-
-function serve(done) {
-    server.init({
-        notify: false,
-        proxy: paths.url,
-        host: paths.url,
-        open: false,
-        ghostMode: false
-    });
-    done();
-}
-
-export default serve;

build/styles.js

@@ -0,0 +1,56 @@
+import sass from 'node-sass';
+import paths from '../mconfig.json';
+import fs from 'fs';
+import message from './utils/message.js';
+import notification from './notification.js';
+
+export function compileStyles() {
+    console.time('Styles built in');
+
+    // Compile main scss
+    sass.render({
+        file: paths.styles.src + paths.styles.main + '.scss',
+        outFile: paths.styles.dest + paths.styles.main + '.css',
+        outputStyle: 'compressed',
+        sourceMap: true
+    }, (error, result) => {
+        if (error) {
+            message('Error compiling main.scss', 'error');
+            console.log(error.formatted);
+
+            notification({
+                title: 'main.scss compilation failed 🚨',
+                message: `${error.formatted}`
+            });
+        } else {
+            message('Styles built', 'success', 'Styles built in');
+        }
+
+        if (!error){
+            // No errors during the compilation, write this result on the disk
+            fs.writeFile(paths.styles.dest + paths.styles.main + '.css', result.css, (err) => {});
+        }
+    });
+
+    console.time('Critical style built in');
+
+    // Compile critical scss
+    sass.render({
+        file: paths.styles.src + paths.styles.critical + '.scss',
+        outFile: paths.styles.dest + paths.styles.critical + '.css',
+        outputStyle: 'compressed',
+        sourceMap: true
+    }, (error, result) => {
+        if (error) {
+            message('Error compiling critical.scss', 'error');
+            console.log(error);
+        } else {
+            message('Critical style built', 'success', 'Critical style built in');
+        }
+
+        if (!error){
+            // No errors during the compilation, write this result on the disk
+            fs.writeFile(paths.styles.dest + paths.styles.critical + '.css', result.css, (err) => {});
+        }
+    });
+}

build/svgs.js

@@ -0,0 +1,19 @@
+import mixer from 'svg-mixer';
+import paths from '../mconfig.json';
+import message from './utils/message.js';
+
+export function generateSpriteSVG() {
+    console.time('Sprite generated in');
+
+    // Write sprite content on disk
+    mixer([
+        paths.svgs.src + '*.svg'
+    ], {
+        spriteConfig: {
+            usages: false
+        }
+    }).then((result) => {
+        result.write(paths.svgs.dest + 'sprite.svg');
+        message('SVG Sprite generated', 'success', 'Sprite generated in');
+    });
+}

build/utils/message.js

@@ -0,0 +1,19 @@
+import kleur from 'kleur';
+
+export default function message(text, type, timerId) {
+    if (type === 'success') {
+        console.log(kleur.bgGreen().black(`${text} ✅`));
+
+        if (timerId !== undefined) {
+            console.timeEnd(timerId)
+        }
+    } else if (type === 'error') {
+        console.log(kleur.red().underline(`${text} ❌`));
+    } else if (type === 'waiting') {
+        console.log(kleur.blue().italic(`${text} ⏱`));
+    } else {
+        console.log(text);
+    }
+
+    console.log('');
+}

build/watch.js

@@ -1,22 +1,68 @@
-import gulp from 'gulp';
+import { buildScripts } from './scripts.js';
+import { concatVendors } from './concat.js';
+import { compileStyles } from './styles.js' ;
+import { generateSpriteSVG } from './svgs.js';
 import paths from '../mconfig.json';
-import styles from './styles.js';
-import scripts from './scripts.js';
-import svgs from './svgs.js';
-import concat from './concat.js';
-import { server } from './serve.js';
 
-function watch() {
-    gulp.watch(paths.styles.src, styles);
-    gulp.watch(paths.scripts.src, gulp.series(scripts, reload));
-    gulp.watch(paths.scripts.vendors.src, concat);
-    gulp.watch(paths.views.src, reload);
-    gulp.watch(paths.svgs.src, gulp.series(svgs, reload));
-}
+// Create an named instance in one file...
+import bs from 'browser-sync';
 
-function reload(done) {
-    server.reload();
-    done();
-}
+// Start the Browsersync server
+bs.init({
+    proxy: paths.url,
+    open: false,
+    notify: false
+});
 
-export default watch;
+// Build scripts, compile styles, concat vendors and generate the svgs sprite on first hit
+buildScripts();
+concatVendors();
+compileStyles();
+generateSpriteSVG();
+
+// and call any methods on it.
+bs.watch(
+    [
+        paths.views.src,
+        paths.scripts.dest + paths.scripts.main + '.js',
+        paths.scripts.dest + paths.scripts.vendors.main + '.js',
+        paths.styles.dest + paths.styles.main + '.css',
+        paths.svgs.dest + 'sprite.svg'
+    ]
+).on('change', bs.reload);
+
+// Watch scripts 
+bs.watch(
+    [
+        paths.scripts.src + '**/*.js'
+    ]
+).on('change', () => {
+    buildScripts();
+});
+
+// Watch scripts vendors
+bs.watch(
+    [
+        paths.scripts.vendors.src + '*.js'
+    ]
+).on('change', () => {
+    concatVendors();
+});
+
+// Watch styles
+bs.watch(
+    [
+        paths.styles.src + '**/*.scss'
+    ]
+).on('change', () => {
+    compileStyles();
+});
+
+// Watch svgs
+bs.watch(
+    [
+        paths.svgs.src + '*.svg'
+    ]
+).on('change', () => {
+    generateSpriteSVG();
+});

gulpfile.babel.js

@@ -1,16 +0,0 @@
-import gulp from 'gulp';
-import styles from './build/styles.js';
-import scripts from './build/scripts.js';
-import concat from './build/concat.js';
-import svgs from './build/svgs.js';
-import serve from './build/serve.js';
-import watch from './build/watch.js';
-import { buildStyles, buildScripts } from './build/build.js';
-
-const compile = gulp.series(styles, scripts, svgs, concat);
-const main = gulp.series(compile, serve, watch);
-const build = gulp.series(compile, buildStyles, buildScripts);
-
-gulp.task('default', main);
-gulp.task('compile', compile);
-gulp.task('build', build);

mconfig.json

@@ -1,33 +1,28 @@
 {
-  "url": "boilerplate.test",
-  "src": "./assets/",
-  "dest": "./www/",
-  "build": "./build/",
-  "styles": {
-    "src": "./assets/styles/",
-    "dest": "./www/assets/styles/",
-    "main": "main"
-  },
-  "scripts": {
-    "src": "./assets/scripts/",
-    "dest": "./www/assets/scripts/",
-    "main": "app",
-    "vendors": {
-      "src": "./assets/scripts/vendors/",
-      "main": "vendors"
+    "url": "locomotive-boilerplate.test",
+    "src": "./assets/",
+    "dest": "./www/",
+    "build": "./build/",
+    "styles": {
+        "src": "./assets/styles/",
+        "dest": "./www/assets/styles/",
+        "main": "main",
+        "critical": "critical"
+    },
+    "scripts": {
+        "src": "./assets/scripts/",
+        "dest": "./www/assets/scripts/",
+        "main": "app",
+        "vendors": {
+            "src": "./assets/scripts/vendors/",
+            "main": "vendors"
+        }
+    },
+    "svgs": {
+        "src": "./assets/images/sprite/",
+        "dest": "./www/assets/images/"
+    },
+    "views": {
+        "src": "./views/boilerplate/template/"
     }
-  },
-  "svgs": {
-    "src": "./assets/images/sprite/",
-    "dest": "./www/assets/images/"
-  },
-  "views": {
-    "src": "./views/boilerplate/template/"
-  },
-  "modules": {
-    "build": "gulp",
-    "style": "sass",
-    "script": "js",
-    "view": false
-  }
 }

package.json

@@ -1,22 +1,32 @@
 {
-  "private": true,
-  "name": "@locomotivemtl/boilerplate",
-  "title": "Locomotive Boilerplate",
-  "version": "1.0.0",
-  "author": "Locomotive <info@locomotive.ca>",
-  "scripts": {
-    "start": "gulp",
-    "build": "gulp build",
-    "compile": "gulp compile"
-  },
-  "dependencies": {
-    "locomotive-scroll": "*",
-    "modujs": "*",
-    "modularload": "*",
-    "normalize.css": "*",
-    "svg4everybody": "*"
-  },
-  "devDependencies": {
-    "gulp-concat": "*"
-  }
+    "private": true,
+    "name": "@locomotivemtl/boilerplate",
+    "title": "Locomotive Boilerplate",
+    "version": "1.0.0",
+    "engines": {
+        "node": "^14.15"
+    },
+    "type": "module",
+    "author": "Locomotive <info@locomotive.ca>",
+    "scripts": {
+        "start": "node --experimental-json-modules --no-warnings build/watch.js",
+        "build": "node --experimental-json-modules --no-warnings build/build.js"
+    },
+    "dependencies": {
+        "locomotive-scroll": "*",
+        "modujs": "^1.4.2",
+        "modularload": "^1.2.6",
+        "normalize.css": "*",
+        "svg4everybody": "*"
+    },
+    "devDependencies": {
+        "browser-sync": "^2.26.13",
+        "concat": "^1.0.3",
+        "esbuild": "^0.8.16",
+        "fs": "0.0.1-security",
+        "kleur": "^4.1.3",
+        "node-notifier": "^8.0.0",
+        "node-sass": "^5.0.0",
+        "svg-mixer": "^2.3.14"
+    }
 }

www/assets/images/sprite.svg

@@ -0,0 +1 @@
+<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs></svg>

www/assets/styles/critical.css

@@ -0,0 +1,2 @@
+
+/*# sourceMappingURL=critical.css.map */

www/index.html

@@ -1,50 +1,74 @@
 <!doctype html>
 <html class="is-loading" lang="en" data-page="home">
-    <head>
-        <meta charset="utf-8">
-        <title>Boilerplate</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <meta name="theme-color" content="#ffffff">
-        <meta name="msapplication-TileColor" content="#ffffff">
-        <link rel="manifest" href="site.webmanifest">
-        <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
+<head>
+    <meta charset="utf-8">
+    <title>Boilerplate</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link id="stylesheet" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
-    </head>
-    <body data-module-load>
-        <div data-load-container>
-            <div class="o-scroll" data-module-scroll="main">
-                <header data-scroll-section>
-                    <a href="/"><h1>Boilerplate</h1></a>
-                    <nav>
-                        <ul>
-                            <li><a href="images.html">Images</a></li>
-                            <li><a href="form.html" data-load="customTransition">Form</a></li>
-                        </ul>
-                    </nav>
-                </header>
+    <meta name="theme-color" content="#ffffff">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <link rel="manifest" href="site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
+    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
+    <!-- For a dark mode managment and svg favicon add this in your favicon.svg -->
+    <!--
+            <style>
+                path {
+                    fill: #000;
+                }
+                @media (prefers-color-scheme: dark) {
+                    path {
+                        fill: #fff;
+                    }
+                }
+            </style>
+        -->
+    <!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
 
-                <main data-scroll-section>
-                    <div class="o-container">
-                        <h1 class="c-heading -h1">Hello</h1>
-                    </div>
-                </main>
+    <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
+        onload="this.media='all'; this.onload=null; this.isLoaded=true">
+</head>
 
-                 <footer data-scroll-section>
-                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-                </footer>
-            </div>
+<body data-module-load>
+    <div data-load-container>
+        <div class="o-scroll" data-module-scroll="main">
+            <header data-scroll-section>
+                <a href="/">
+                    <h1>Boilerplate</h1>
+                </a>
+                <nav>
+                    <ul>
+                        <li><a href="images.html">Images</a></li>
+                        <li><a href="form.html" data-load="customTransition">Form</a></li>
+                    </ul>
+                </nav>
+            </header>
+
+            <main data-scroll-section>
+                <div class="o-container">
+                    <h1 class="c-heading -h1">Hello</h1>
+                </div>
+            </main>
+
+            <footer data-scroll-section>
+                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
+                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
+            </footer>
         </div>
+    </div>
 
-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
+    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
+        crossorigin="anonymous"></script>
+    <script nomodule
+        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
+        crossorigin="anonymous"></script>
+
+    <script src="assets/scripts/vendors.js" defer></script>
+    <script src="assets/scripts/app.js" defer></script>
+</body>
 
-        <script src="assets/scripts/vendors.js" defer></script>
-        <script src="assets/scripts/app.js" defer></script>
-    </body>
 </html>