Merge pull request #144 from Kassaila/feature/summer-updates

Feature/summer updates

Author: sgurin

.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.0.1",
+ "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);
 };