Merge pull request #147 from justcoded/develop

WSK 5.1.0

Author: sgurin

README.md

@@ -49,19 +49,28 @@ This is not to say that WSK cannot be used in browsers older than those reflecte
 | --- | --- |
 | Easy start | We don't use responsive boilerplate. You are free to make your own decision in what way to make responsive for the site. Just start with `index.html` from `src/html`. |
 | 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). |
+| Sass support | Compile [Sass](http://sass-lang.com/) into CSS with ease, bringing support for variables, mixins and more (run `npm run dev` or `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 [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`). |
+| Performance optimization | Minify and concatenate JavaScript, CSS, HTML and images to help keep your pages lean (run `npm run dev` or `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. |
-| Live Browser Reloading | Reload the browser in real-time anytime an edit is made without the need for an extension (run `gulp` and edit your files). |
-| Cross-device Synchronization | Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project. Powered by [BrowserSync](http://browsersync.io) (run `gulp` and open up the IP provided on other devices on your network). |
+| Live Browser Reloading | Reload the browser in real-time anytime an edit is made without the need for an extension (run `npm run dev` or `gulp` and edit your files). |
+| Cross-device Synchronization | Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project. Powered by [BrowserSync](http://browsersync.io) (run `npm run dev` or `gulp` and open up the IP provided on other devices on your network). |
 
 
 ## Install
 
-Init your project using [jcn](https://github.com/justcoded/npm-jcn) or directly [download WSK](https://github.com/justcoded/web-starter-kit/releases/latest) and run `$ npm install --global gulp && npm install` in that directory to get started.
+Init your project using [jcn](https://github.com/justcoded/npm-jcn) or directly [download WSK](https://github.com/justcoded/web-starter-kit/releases/latest).
+
+To get started please run
+```sh
+$ npm install
+```
+if you want use Gulp in global context please run
+```sh
+$ npm install --global gulp && npm install
+```
 
 
 To take advantage of WSK you need to:
@@ -130,15 +139,24 @@ You may also want to get used to some of the [commands](#commands) available.
 
 There are few commands available to help you build and test sites:
 
+
+### Test
+
+Test run with logs
+
+```sh
+$ npm run test
+```
+
 ### Development mode
 
 Watch For Changes & Automatically Refresh Across Devices
 
 ```sh
-$ gulp
+$ npm run dev
 ```
 
-`gulp` task creates the `assets` folder in the root of the project.
+`dev` creates the `assets` folder in the root of the project.
 This includes linting as well as image, script, stylesheet and HTML optimization.
 Also, a [browsersync](https://browsersync.io/) script will be automatically generated, which will take care of precaching your sites resources.
 
@@ -148,27 +166,40 @@ Also, a [browsersync](https://browsersync.io/) script will be automatically gene
 Serve the Fully Built & Optimized Site
 
 ```sh
-$ gulp build
+$ npm run build
 ```
 
-`gulp build` task creates the `production` folder in the root of the project with **minifying** files from `assets`. It will help you to create clear instances of code for the **production** or **further implementation**.
+`build` creates the `production` folder in the root of the project with **minifying** files from `assets`. It will help you to create clear instances of code for the **production** or **further implementation**.
+
+
+### Lint for HTML
 
+```sh
+$ npm run lint-html
+```
 
-### Linter - only for JS
+### Lint & fix for JS
 
 ```sh
-$ gulp lint-js
+$ npm run lint-js
 ```
 
-`gulp lint-js` task run the separate lint for JS files.  
-Included in `gulp` and `gulp build` tasks.
+`lint-js` run the separate lint for JS files.  
+Included in `dev` and `build`.
 
 ```sh
-$ gulp fix-js
+$ npm run fix-js
 ```
 
-`gulp fix-js` task run lint and auto-fix (eslint method) for JS files.  
-**Not included in any tasks**.
+`fix-js` run lint and auto-fix (eslint method) for JS files.  
+**Not included in any mode**.
+
+
+### Lint for HTML & JS
+
+```sh
+$ npm run lint
+```
 
 ## Structure
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-starter-jc",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Starter kit for markup projects",
   "repository": {
     "type": "git",
@@ -19,18 +19,18 @@
   },
   "homepage": "https://github.com/justcoded/web-starter-kit",
   "devDependencies": {
-    "@babel/core": "7.11.1",
+    "@babel/core": "7.11.6",
     "@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/plugin-transform-runtime": "7.11.5",
+    "@babel/preset-env": "7.11.5",
     "@babel/runtime": "7.11.2",
-    "autoprefixer": "9.8.6",
+    "autoprefixer": "10.0.0",
     "babel-loader": "8.1.0",
     "browser-sync": "2.26.12",
     "cssnano": "4.1.10",
     "del": "5.1.0",
-    "eslint": "7.8.1",
+    "eslint": "7.9.0",
     "eslint-config-airbnb-base": "14.2.0",
     "eslint-plugin-import": "2.22.0",
     "gulp": "4.0.2",
@@ -40,26 +40,29 @@
     "gulp-if": "3.0.0",
     "gulp-imagemin": "7.1.0",
     "gulp-newer": "1.4.0",
-    "gulp-postcss": "8.0.0",
+    "gulp-postcss": "9.0.0",
     "gulp-rename": "2.0.0",
     "gulp-sass": "4.1.0",
-    "gulp-sourcemaps": "2.6.5",
     "htmlhint-stylish": "1.0.3",
     "node-notifier": "8.0.0",
+    "postcss": "8.0.9",
     "postcss-import": "12.0.1",
-    "postcss-sort-media-queries": "1.7.26",
-    "sass": "1.26.10",
-    "terser-webpack-plugin": "4.1.0",
-    "webpack": "4.44.1"
+    "postcss-sort-media-queries": "2.0.3",
+    "sass": "1.26.11",
+    "terser-webpack-plugin": "4.2.2",
+    "webpack": "4.44.2"
   },
   "engines": {
     "node": ">=10.0.0"
   },
   "scripts": {
-    "dev": "gulp",
-    "test": "gulp build --log-level -LLLL",
-    "build": "gulp build",
-    "fix-js": "gulp fix-js"
+    "dev": "npx gulp",
+    "test": "npx gulp build --log-level -LLLL",
+    "build": "npx gulp build",
+    "lint-html": "npx gulp lint-html",
+    "lint-js": "npx gulp lint-js",
+    "fix-js": "npx gulp fix-js",
+    "lint": "npm run lint-html lint-js"
   },
   "dependencies": {
     "jquery": "3.5.1",

tasks/build-styles-custom.js

@@ -6,8 +6,6 @@
 const gulp = require('gulp');
 const sass = require('gulp-sass');
 const postcss = require('gulp-postcss');
-const gulpif = require('gulp-if');
-const sourcemaps = require('gulp-sourcemaps');
 const autoprefixer = require('autoprefixer');
 const gcmq = require('postcss-sort-media-queries');
 const cssnano = require('cssnano');
@@ -24,18 +22,20 @@ module.exports = function () {
     autoprefixer(),
   ];
 
-  isGcmq ? plugins.push(gcmq({ sort: global.buildStyles.sortType, })) : null;
-  production ? plugins.push(cssnano()) : null;
+  if (isGcmq) {
+    plugins.push(gcmq({ sort: global.buildStyles.sortType, }));
+  }
+  if (production) {
+    plugins.push(cssnano());
+  }
 
   return (done) => {
     if (files.length > 0) {
-      return gulp.src(files)
-        .pipe(gulpif(!production, sourcemaps.init({ loadMaps: true, })))
+      return gulp.src(files, { sourcemaps: !production })
         .pipe(sass.sync({ sourceMap: !production, }))
         .on('error', (error) => notifier.error(error.message, 'Custom Sass compiling error', done))
         .pipe(postcss(plugins))
-        .pipe(gulpif(!production, sourcemaps.write('./')))
-        .pipe(gulp.dest(`./${global.folder.dev}/css`));
+        .pipe(gulp.dest(`./${global.folder.dev}/css`, { sourcemaps: './' }));
     }
 
     return done();

tasks/build-styles.js

@@ -6,8 +6,6 @@
 const gulp = require('gulp');
 const sass = require('gulp-sass');
 const postcss = require('gulp-postcss');
-const gulpif = require('gulp-if');
-const sourcemaps = require('gulp-sourcemaps');
 const autoprefixer = require('autoprefixer');
 const gcmq = require('postcss-sort-media-queries');
 const cssnano = require('cssnano');
@@ -25,17 +23,17 @@ module.exports = function () {
     autoprefixer(),
   ];
 
-  production ? plugins.push(gcmq({ sort: global.buildStyles.sortType, })) : null;
-  production ? plugins.push(cssnano()) : null;
+  if (production) {
+    plugins.push(gcmq({ sort: global.buildStyles.sortType, }));
+    plugins.push(cssnano());
+  }
 
   return (done) => {
-    return gulp.src(`./${global.folder.src}/scss/${global.file.mainStylesSrc}`)
+    return gulp.src(`./${global.folder.src}/scss/${global.file.mainStylesSrc}`, { sourcemaps: !production })
       .pipe(rename(mainFileName))
-      .pipe(gulpif(!production, sourcemaps.init({ loadMaps: true, })))
       .pipe(sass.sync({ sourceMap: !production, }))
       .on('error', (error) => notifier.error(error.message, 'Main Sass compiling error', done))
       .pipe(postcss(plugins))
-      .pipe(gulpif(!production, sourcemaps.write('./')))
-      .pipe(gulp.dest(`./${global.folder.dev}/css`));
+      .pipe(gulp.dest(`./${global.folder.dev}/css`, { sourcemaps: './' }));
   };
 };