Develop

.babelrc

@@ -1,6 +1,21 @@
 {
   "presets": [
-    ["@babel/env", {"modules": false}]
+    [
+      "@babel/env",
+      {
+        "modules": false,
+        "forceAllTransforms": true
+      }
+    ]
   ],
-  "plugins": []
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": false
+      }
+    ]
+  ]
 }

.eslintrc

@@ -1,9 +1,6 @@
 {
   "root": true,
-  "globals": {
-    "jQuery": true,
-    "$": true
-  },
+  "globals": {},
   "env": {
     "browser": true,
     "node": true

.travis.yml

@@ -4,6 +4,7 @@ branches:
   only:
     - master
 node_js:
+  - '14'
   - '13'
   - '12'
   - '11'

README.md

@@ -51,7 +51,7 @@ This is not to say that WSK cannot be used in browsers older than those reflecte
 | HTML templating | Used [gulp-file-include](https://github.com/haoxins/gulp-file-include) for templating html files. |
 | Sass support | Compile [Sass](http://sass-lang.com/) into CSS with ease, bringing support for variables, mixins and more (run `gulp` for project compiling). In our WSK we use [Dart-Sass](https://sass-lang.com/dart-sass) version compiler and follow [Sass guidelines](https://sass-guidelin.es/#architecture). |
 | PostCSS support | PostCSS connecting most usable plugins library for CSS optimisation. In our WSK we use [autoprefixer](https://github.com/postcss/autoprefixer), [cssnano](https://github.com/cssnano/cssnano), [postcss-sort-media-queries](https://github.com/solversgroup/postcss-sort-media-queries), etc. |
-| JavaScript ES6+ Support | Optional JavaScript ES6+ support .You can use all kind of ES6+ features here. ES6+ source code will be automatically transpiled to ES5 for wide browser support. For bundling and transpiling used [Rollup](https://rollupjs.org/) and [Babel](https://babeljs.io/). |
+| JavaScript ES6+ Support | Optional JavaScript ES6+ support .You can use all kind of ES6+ features here. ES6+ source code will be automatically transpiled to ES5 for wide browser support. For bundling and transpiling used [Webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/). |
 | Code Linting | JavaScript code linting is done using [esLint](https://eslint.org/) - a linter tool for identifying and reporting on patterns in JavaScript (used [airbnb-base rules](https://www.npmjs.com/package/eslint-config-airbnb-base)). HTML code linting is done using [HTMLHint](https://github.com/htmlhint/HTMLHint). |
 | Performance optimization | Minify and concatenate JavaScript, CSS, HTML and images to help keep your pages lean (run `gulp` to create an optimised version of your project to `assets`). |
 | Built-in HTTP Server | A built-in server for previewing your site locally while you develop and iterate. |
@@ -227,8 +227,6 @@ In `package.json` you can find all the dependencies. Folder `tasks` - for gulpfi
    ├── pages                   #Global styles for pages
    ├── styles.scss             #Main file to import project styles (used for importing another files)
 ├── vendor_entries             #Folder for vendor entries (plugins)
-   ├── vendor.js               #File for plugins js
-   ├── vendor-compile.js       #File for compiling (bunling) plugins js
    ├── vendor.scss             #File for plugins styles
 ```
 
@@ -283,14 +281,13 @@ In our WSK we use **CSS3 custom properties** and **relative units** `rem`. By de
 
  It is not an alternative syntax or language like CoffeeScript or TypeScript. It's good ol' fashioned JavaScript. The reason so many people are excited is that this version introduces a lot of much-needed improvements to the language.
 
- For bundling and transpiling `.js` files in our WSK we used [Rollup](https://rollupjs.org/) and [Babel](https://babeljs.io/).
+ For bundling and transpiling `.js` files in our WSK we used [Webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/).
 
 * All custom **javascript** files are located in `js` folder;
 * Entry point for javascript is `src/js/app.js` you can **import** all your **javascript** files from here using [ES6 import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) feature;
 * All **javascript** is **babelified** so yes! You can use all kind of [ES6 features](https://babeljs.io/docs/learn-es2015/) here.
 * All **extensions** must be installed by the [npm](https://docs.npmjs.com/cli/install);
-* After installing the extension you must **include** its **javascript** files in `src/vendor_entries/vendor.js` by adding new elements to the **array**.
-* If you using ES modules or any types of modules, please import your modules in `src/vendor_entries/vendor-compile.js`.
+* All third party libraries from `node_modules` and `src/vendor_entries`, are automatically separate in `vendor.js`.
 
 In **build (production)** mode we use:
 
@@ -314,8 +311,7 @@ For minify images used [gulp-imagemin](https://github.com/sindresorhus/gulp-imag
 | --- | --- |
 | browser-sync-server | Browsersync can watch your files as you work. Changes you make will either be injected into the page (CSS & images) or will cause all browsers to do a full-page refresh. |
 | build-html | Compiles all html templates into html files. |
-| build-js | Compiles all js from `src/js` to `assets/js` folder. |
-| build-js-vendors | Compiles all vendor js from `src/vendor_entries` to `assets/js` folder. |
+| build-js | Compiles all js from `src/js` to `assets/js` folder. Automatically separate your code and vendors. |
 | build-styles | Compiles all scss from `src/scss` to `assets/css`   folder. |
 | build-styles-custom | Compiles all custom scss files listed in the `gulp-config.js` to `assets/css` folder |
 | build-styles-vendors | Compiles all vendor styles from `src/vendor_entries` to `assets/css`   folder. |

gulp-config.js

@@ -5,7 +5,6 @@ module.exports = {
     fixJs: 'fix-js',
     buildHtml: 'build-html',
     buildJs: 'build-js',
-    buildJsVendors: 'build-js-vendors',
     buildStyles: 'build-styles',
     buildStylesCustom: 'build-styles-custom',
     buildStylesVendors: 'build-styles-vendors',
@@ -22,16 +21,13 @@ module.exports = {
     src: 'src',
     dev: 'assets',
     build: 'production',
-    temp: '.temp',
   },
   file: {
     mainHtml: 'index.html',
     mainJs: 'app.js',
     mainJsMin: 'app.min.js',
     vendorJs: 'vendor.js',
     vendorJsMin: 'vendor.min.js',
-    vendorJsComp: 'vendor-compile.js',
-    vendorJsTemp: 'vendor.temp.js',
     mainStylesSrc: 'styles.scss',
     mainStyles: 'styles.css',
     mainStylesMin: 'styles.min.css',
@@ -46,6 +42,9 @@ module.exports = {
     // Sorting type css media queries: 'desktop-first' || 'mobile-first'
     sortType: 'desktop-first',
   },
+  buildJs: {
+    externalLibs: {},
+  },
   buildImages: {
     imageExtensions: 'jpg,jpeg,png,svg,gif,ico',
     isImageMin: false,
@@ -59,6 +58,7 @@ module.exports = {
   getFilesForStylesCustom() {
     return {
       files: [],
+      // gcmq - group css media queries
       isGcmq: false,
     };
   },

gulpfile.js

@@ -30,80 +30,89 @@ const browserSyncInstance = require('browser-sync').create();
 
 const global = require('./gulp-config.js');
 
+const cleanBuild = require('./tasks/clean-build');
+const lintHtml = require('./tasks/lint-html');
+const buildHtml = require('./tasks/build-html');
+const buildStyles = require('./tasks/build-styles');
+const buildStylesCustom = require('./tasks/build-styles-custom');
+const buildStylesVendors = require('./tasks/build-styles-vendors');
+const lintJs = require('./tasks/lint-js');
+const buildJs = require('./tasks/build-js');
+const buildImages = require('./tasks/build-images');
+const copyFiles = require('./tasks/copy-files');
+const copyFilesProd = require('./tasks/copy-files-production');
+const browserSync = require('./tasks/browser-sync-server');
+const watch = require('./tasks/watch');
+
 /**
  * Clean build folders
  */
-gulp.task(global.task.cleanBuild, require('./tasks/clean-build')());
+gulp.task(global.task.cleanBuild, cleanBuild());
 
 /**
  * Lint HTML
  */
-gulp.task(global.task.lintHtml, require('./tasks/lint-html')());
+gulp.task(global.task.lintHtml, lintHtml());
 
 /**
  * Template HTML
  */
-gulp.task(global.task.buildHtml, require('./tasks/build-html')());
+gulp.task(global.task.buildHtml, buildHtml());
 
 /**
  * Build styles for application
  */
-gulp.task(global.task.buildStyles, require('./tasks/build-styles')());
+gulp.task(global.task.buildStyles, buildStyles());
 
 /**
  * Build styles custom files listed in the config
  */
-gulp.task(global.task.buildStylesCustom, require('./tasks/build-styles-custom')());
+gulp.task(global.task.buildStylesCustom, buildStylesCustom());
 
 /**
  * Build styles for vendor
  */
-gulp.task(global.task.buildStylesVendors, require('./tasks/build-styles-vendors')());
+gulp.task(global.task.buildStylesVendors, buildStylesVendors());
 
 /**
  * Lint JS
  */
-gulp.task(global.task.lintJs, require('./tasks/lint-js')());
+gulp.task(global.task.lintJs, lintJs());
 
 /**
  * Fix JS files
  */
-gulp.task(global.task.fixJs, require('./tasks/lint-js')());
+gulp.task(global.task.fixJs, lintJs());
 
 /**
  * Build JS
  */
-gulp.task(global.task.buildJs, require('./tasks/build-js')());
-
-/**
- * Build JS vendor (concatenate vendors array)
- */
-gulp.task(global.task.buildJsVendors, require('./tasks/build-js-vendors')());
+gulp.task(global.task.buildJs, buildJs());
 
 /**
  * Copy & minify images
  */
-gulp.task(global.task.buildImages, require('./tasks/build-images')());
+gulp.task(global.task.buildImages, buildImages());
 
 /**
  * Copy folders to the build folder
  */
-gulp.task(global.task.copyFiles, require('./tasks/copy-files')());
+gulp.task(global.task.copyFiles, copyFiles());
 
 /**
  * Copy folders to the production folder
  */
-gulp.task(global.task.copyFilesProd, require('./tasks/copy-files-production')());
+gulp.task(global.task.copyFilesProd, copyFilesProd());
 
 /**
  * Start browserSync server
  */
-gulp.task(global.task.browserSync, require('./tasks/browser-sync-server')({ browserSyncInstance }));
+gulp.task(global.task.browserSync, browserSync({ browserSyncInstance }));
 
 /**
  * Watch for file changes
  */
-gulp.task(global.task.watch, require('./tasks/watch')({ browserSyncInstance }));
+gulp.task(global.task.watch, watch({ browserSyncInstance }));
 
 /**
  * Develop mode - with browser sync, file watch & live reload
@@ -123,7 +132,6 @@ gulp.task('default', gulp.series(
     ),
     gulp.series(
       global.task.buildJs,
-      global.task.buildJsVendors,
     ),
   ),
   global.task.buildImages,
@@ -152,7 +160,6 @@ gulp.task(global.task.build, gulp.series(
     ),
     gulp.series(
       global.task.buildJs,
-      global.task.buildJsVendors,
     ),
   ),
   global.task.buildImages,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-starter-jc",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "Starter kit for markup projects",
   "repository": {
     "type": "git",
@@ -19,37 +19,38 @@
   },
   "homepage": "https://github.com/justcoded/web-starter-kit",
   "devDependencies": {
-    "@babel/core": "7.9.0",
-    "@babel/preset-env": "7.9.0",
-    "@rollup/plugin-node-resolve": "7.1.1",
-    "autoprefixer": "9.7.5",
-    "browser-sync": "2.26.7",
+    "@babel/core": "7.11.1",
+    "@babel/plugin-proposal-object-rest-spread": "7.11.0",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-transform-runtime": "7.11.0",
+    "@babel/preset-env": "7.11.0",
+    "@babel/runtime": "7.11.2",
+    "autoprefixer": "9.8.6",
+    "babel-loader": "8.1.0",
+    "browser-sync": "2.26.12",
     "cssnano": "4.1.10",
     "del": "5.1.0",
-    "eslint": "6.8.0",
-    "eslint-config-airbnb-base": "14.1.0",
-    "eslint-plugin-import": "2.20.1",
-    "files-exist": "1.1.0",
+    "eslint": "7.8.1",
+    "eslint-config-airbnb-base": "14.2.0",
+    "eslint-plugin-import": "2.22.0",
     "gulp": "4.0.2",
-    "gulp-concat": "2.6.1",
     "gulp-debug": "4.0.0",
-    "gulp-file-include": "2.1.1",
-    "gulp-htmlhint": "3.0.0",
+    "gulp-file-include": "2.2.2",
+    "gulp-htmlhint": "3.0.1",
     "gulp-if": "3.0.0",
     "gulp-imagemin": "7.1.0",
     "gulp-newer": "1.4.0",
     "gulp-postcss": "8.0.0",
     "gulp-rename": "2.0.0",
-    "gulp-sass": "4.0.2",
+    "gulp-sass": "4.1.0",
     "gulp-sourcemaps": "2.6.5",
     "htmlhint-stylish": "1.0.3",
-    "node-notifier": "7.0.0",
+    "node-notifier": "8.0.0",
     "postcss-import": "12.0.1",
-    "postcss-sort-media-queries": "1.4.23",
-    "rollup": "2.7.1",
-    "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-terser": "5.3.0",
-    "sass": "1.26.3"
+    "postcss-sort-media-queries": "1.7.26",
+    "sass": "1.26.10",
+    "terser-webpack-plugin": "4.1.0",
+    "webpack": "4.44.1"
   },
   "engines": {
     "node": ">=10.0.0"
@@ -61,8 +62,7 @@
     "fix-js": "gulp fix-js"
   },
   "dependencies": {
-    "include-media": "1.4.9",
-    "jquery": "3.5.0",
+    "jquery": "3.5.1",
     "normalize.css": "8.0.1"
   }
 }

src/html/partials/head/head.html

@@ -2,6 +2,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Starter Kit</title>
+  <link rel="icon"
+    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
   <link media="all" rel="stylesheet" href="@@webRoot/css/@@vendorStyles">
   <link media="all" rel="stylesheet" href="@@webRoot/css/@@mainStyles">
 </head>

src/js/app.js

@@ -2,12 +2,11 @@
 //
 // This file will be compiled into app.js
 // Feel free with using ES6 here.
+import $ from 'jquery';
 
 import dots from './modules/dots';
 
-(($) => {
-  // When DOM is ready
-  $(() => {
-    dots();
-  });
-})(jQuery);
+// When DOM is ready
+$(() => {
+  dots();
+});

src/js/modules/dots.js

@@ -1,6 +1,7 @@
 // This is an examples of simple export.
 //
 // You can remove or add your own function in this file.
+import $ from 'jquery';
 
 const _createCells = () => {
   const width = 10;
@@ -20,6 +21,7 @@ const _createCells = () => {
 const dots = () => {
   const $cnt = $('.entry-section');
   const cells = _createCells();
+
   $cnt.html(cells);
 };
 

src/scss/abstracts/helpers.scss

@@ -57,8 +57,5 @@
 /// * 2. Add ellipsis at the end of the line.
 
 .ellipsis {
-  white-space: nowrap; // 1
-  text-overflow: ellipsis; // 2 
-  overflow: hidden;
+  @include ellipsis;
 }
-