Merge pull request #13 from justcoded/develop

WSK 5.1.0

Author: sgurin

README.md

@@ -33,15 +33,24 @@ Instruction for installation WSK please read in main repo [README.md](https://gi
 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
 ```
 
-This includes linting as well as script, stylesheet and HTML compiling.
+`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.
 
 
@@ -50,27 +59,40 @@ Also, a [browsersync](https://browsersync.io/) script will be automatically gene
 Serve the Fully Built & Optimized Site
 
 ```sh
-$ gulp build
+$ npm run build
 ```
 
-Command for building current project, ready for WordPress.
-This includes linting as well as script, stylesheet (group & sort CSS media queries) and HTML compiling.
+`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**.
+
 
-### Linter - only for JS
+### Lint for HTML
 
 ```sh
-$ gulp lint-js
+$ npm run lint-html
 ```
 
-`gulp lint-js` task run the separate lint for JS files.  
-Included in `gulp` and `gulp build` tasks.
+### Lint & fix for JS
 
 ```sh
-$ gulp fix-js
+$ npm run lint-js
 ```
 
-`gulp fix-js` task run lint and auto-fix (eslint method) for JS files.  
-**Not included in any tasks**.
+`lint-js` run the separate lint for JS files.  
+Included in `dev` and `build`.
+
+```sh
+$ npm run fix-js
+```
+
+`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-wp",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Starter kit for markup projects",
   "repository": {
     "type": "git",
@@ -20,42 +20,45 @@
   },
   "homepage": "https://github.com/justcoded/web-starter-kit-wp",
   "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",
     "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",
     "gulp-debug": "4.0.0",
     "gulp-file-include": "2.2.2",
     "gulp-htmlhint": "3.0.1",
     "gulp-if": "3.0.0",
-    "gulp-postcss": "8.0.0",
+    "gulp-postcss": "9.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",
-    "webpack": "4.44.1"
+    "postcss-sort-media-queries": "2.0.3",
+    "sass": "1.26.11",
+    "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": {
     "normalize.css": "8.0.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');
 
@@ -23,17 +21,17 @@ module.exports = function () {
     autoprefixer(),
   ];
 
-  isGcmq ? plugins.push(gcmq({ sort: global.buildStyles.sortType, })) : null;
+  if (isGcmq) {
+    plugins.push(gcmq({ sort: global.buildStyles.sortType, }));
+  }
 
   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.build}/css`));
+        .pipe(gulp.dest(`../${global.folder.build}/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');
 
@@ -22,15 +20,15 @@ module.exports = function () {
     autoprefixer(),
   ];
 
-  production ? plugins.push(gcmq({ sort: global.buildStyles.sortType, })) : null;
+  if (production) {
+    plugins.push(gcmq({ sort: global.buildStyles.sortType, }));
+  }
 
   return (done) => {
-    return gulp.src(`./scss/${global.file.mainStylesSrc}`)
-      .pipe(gulpif(!production, sourcemaps.init({ loadMaps: true, })))
+    return gulp.src(`./scss/${global.file.mainStylesSrc}`, { sourcemaps: !production })
       .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.build}/css`));
+      .pipe(gulp.dest(`../${global.folder.build}/css`, { sourcemaps: './' }));
   };
 };