Update tasks - remove gulp (replaced by node scripts, working with mconfig) + esbuild (no more es5 support) + add critical css in config file

.babelrc

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

README.md

@@ -8,39 +8,29 @@
 
 ## 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

@@ -21,6 +21,7 @@ window.onload = (event) => {
 
 function init() {
     globals();
+
     app.init(app);
 
     html.classList.add('is-loaded');

assets/scripts/modules/Load.js

@@ -7,6 +7,7 @@ export default class extends module {
     }
 
     init() {
+        
         const load = new modularLoad({
             enterDelay: 0,
             transitions: {

assets/scripts/modules/Scroll.js

@@ -7,6 +7,7 @@ export default class extends module {
     }
 
     init() {
+
         this.scroll = new LocomotiveScroll({
             el: this.el,
             smooth: true

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,30 @@
-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() {
+    // Get all files in scripts/vendors/
+    const files = fs.readdirSync(paths.scripts.vendors.src);
     
-export default concat;
+    // Extract no-JS files
+    var jsFiles = files.filter((f)=>{
+      if(f.includes('.js')) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    
+    // Add absolute path
+    jsFiles = jsFiles.map((f) => {
+      return `${paths.scripts.vendors.src + f}`;
+    });
+  
+  
+    // add files in node_modules example:
+    // jsFiles.push('node_modules/gsap/dist/gsap.min.js');
+    message('Concatenating vendors...', 'waiting');
+
+    concat(jsFiles, paths.scripts.dest + paths.scripts.vendors.main + '.js')
+  }

build/scripts.js

@@ -0,0 +1,16 @@
+import esbuild from 'esbuild';
+import paths from '../mconfig.json';
+import message from './utils/message.js';
+
+export function buildScripts() {
+    message('Compiling JS...', 'waiting');
+
+    esbuild.buildSync({
+        entryPoints: [paths.scripts.src + paths.scripts.main + '.js'],
+        bundle: true,
+        minify: true,
+        sourcemap: true,
+        target: ['es2015'],
+        outfile: paths.scripts.dest + paths.scripts.main + '.js'
+    });
+}

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,49 @@
+
+import sass from 'node-sass';
+import paths from '../mconfig.json';
+import fs from 'fs';
+import message from './utils/message.js';
+
+export function compileStyles() {
+
+    // 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 compile main.scss', 'error');
+            console.log(error);
+        } else {
+            message('main.scss compiled', 'success');
+        }
+
+        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) => {});
+          }
+    });
+    // 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 compile critical.scss', 'error');
+            console.log(error);
+        } else {
+            message('critical.scss compiled', 'success');
+        }
+
+        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,12 @@
+import mixer from 'svg-mixer';
+import paths from '../mconfig.json';
+import message from './utils/message.js';
+
+export function generateSpriteSVG() {
+    // Write sprite content on disk
+    mixer([paths.svgs.src + '*.svg'], {spriteConfig: { usages: false }})
+    .then((result) => {
+        message('SVG Sprite generated', 'success');
+        result.write(paths.svgs.dest + 'sprite.svg')
+    });
+}

build/utils/message.js

@@ -0,0 +1,14 @@
+
+// colors reference  : https://coderwall.com/p/yphywg/printing-colorful-text-in-terminal-when-run-node-js-script
+export default function message(text, type) {
+    
+    if(type === 'success') {
+        console.log(`\x1b[42m \x1b[30m`, `✅ ${text}`, `\x1b[0m`);
+    } else if (type === 'error') {
+        console.log(`\x1b[41m \x1b[37m`,`🚨 ${text}`, `\x1b[0m`);
+    } else if (type === 'waiting') {
+        console.log(`\x1b[43m \x1b[30m`,`⏱  ${text}`, `\x1b[0m`);
+    } else {
+        console.log(text);   
+    }
+}

build/watch.js

@@ -1,22 +1,69 @@
-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;
+// 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);
+
+// Build scripts and compile styles on first hit
+buildScripts();
+concatVendors();
+compileStyles();
+generateSpriteSVG();
+
+// 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,12 +1,13 @@
 {
-  "url": "boilerplate.test",
+  "url": "locomotive-boilerplate.test",
   "src": "./assets/",
   "dest": "./www/",
   "build": "./build/",
   "styles": {
     "src": "./assets/styles/",
     "dest": "./www/assets/styles/",
-    "main": "main"
+    "main": "main",
+    "critical": "critical"
   },
   "scripts": {
     "src": "./assets/scripts/",
@@ -23,11 +24,5 @@
   },
   "views": {
     "src": "./views/boilerplate/template/"
-  },
-  "modules": {
-    "build": "gulp",
-    "style": "sass",
-    "script": "js",
-    "view": false
   }
 }

package.json

@@ -3,20 +3,25 @@
   "name": "@locomotivemtl/boilerplate",
   "title": "Locomotive Boilerplate",
   "version": "1.0.0",
+  "type": "module",
   "author": "Locomotive <info@locomotive.ca>",
   "scripts": {
-    "start": "gulp",
-    "build": "gulp build",
-    "compile": "gulp compile"
+    "start": "node --experimental-json-modules build/watch.js",
+    "build": "node --experimental-json-modules build/build.js"
   },
   "dependencies": {
     "locomotive-scroll": "*",
-    "modujs": "*",
-    "modularload": "*",
+    "modujs": "^1.4.2",
+    "modularload": "^1.2.6",
     "normalize.css": "*",
     "svg4everybody": "*"
   },
   "devDependencies": {
-    "gulp-concat": "*"
+    "browser-sync": "^2.26.13",
+    "concat": "^1.0.3",
+    "esbuild": "^0.8.16",
+    "fs": "0.0.1-security",
+    "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 */