Develop

README.md

@@ -16,10 +16,11 @@ Web Starter Kit (WSK) - is an opinionated boilerplate for web development. Tools
 4. [Templating](#templating)
 5. [Styles](#styles)
 6. [JavaScript](#javascript)
-7. [Tasks](#tasks)
-8. [Troubleshooting](#troubleshooting)
-9. [Contributing](#contributing)
-10. [License](#license)
+7. [Watching](#watching)
+8. [Tasks](#tasks)
+9. [Troubleshooting](#troubleshooting)
+10. [Contributing](#contributing)
+11. [License](#license)
 
 
 ## Install
@@ -32,7 +33,9 @@ Instruction for installation WSK please read in `master` branch [README.md](http
 There are few commands available to help you build and test sites:
 
 
-### Watch For Changes & Automatically Refresh Across Devices
+### Development mode
+
+Watch For Changes & Automatically Refresh Across Devices
 
 ```sh
 $ gulp
@@ -42,14 +45,16 @@ This includes linting as well as script, stylesheet and HTML compiling.
 Also, a [browsersync](https://browsersync.io/) script will be automatically generated, which will take care of precaching your sites resources.
 
 
-### Serve the Fully Built & Optimized Site
+### Production mode
+
+Serve the Fully Built & Optimized Site
 
 ```sh
 $ gulp build
 ```
 
 Command for building current project, ready for WordPress.
-This includes linting as well as script, stylesheet and HTML compiling.
+This includes linting as well as script, stylesheet (group & sort CSS media queries) and HTML compiling.
 
 ### Linter - only for JS
 
@@ -116,7 +121,7 @@ If you want to use our WSK, you need to know something about the structure.
   ├── css                         #Folder with compiled styles
   ├── js                          #Folder with compiled js
   ├── custom-folder               #Folder with your sources, witch are not compiling (like - images, fonts, videos, audios)
-  └──  index.html                 #Compiled html file
+  └── index.html                  #Compiled html file
 
 ```
 
@@ -148,7 +153,7 @@ So while normal CSS doesn’t yet allow things like variables, mixins (reusable
 * After installing the extension you must **include** its **css** or **sass** files in `assets/vendor_entries/vendor.scss` using `@import`.
 
 You are able to add your own **custom sass files** and optionally **disable/enable** [postcss-sort-css-media-queries](https://github.com/solversgroup/postcss-sort-media-queries).
-You can see this property `getPathesForStylesCustom` in the `gulp-config.js` file:
+You can see this property `getFilesForStylesCustom` in the `gulp-config.js` file:
 
 ![image](https://user-images.githubusercontent.com/38295556/72220657-88b3c400-355b-11ea-90d7-4cbb5edb0f43.png)
 
@@ -184,6 +189,11 @@ In our WSK we use **CSS3 custom properties** and **relative units** `rem`. By de
 
 For linting javascript files in WSK used [esLint](https://eslint.org/). esLint a linter tool for identifying and reporting on patterns in JavaScript (used [airbnb-base rules](https://www.npmjs.com/package/eslint-config-airbnb-base)) and some custom rules in file configuration `.eslintrc`.
 
+## Watching
+
+After run `gulp` by default gulp watching for your files in `src` and `assets` folders.
+For `js`, `scss`, `html` and `vendors_entries` folders after change in included files, watcher run they tasks for compiling. For `images` and other folders (and files in `src` root) watcher run tasks for copy files.
+
 ## Tasks
 
 |Task | Description |

gulp-config.js

@@ -10,8 +10,8 @@ module.exports = {
     publicJs: 'jquery.main.js',
     vendorJs: 'vendor.js',
     vendorJsTemp: 'vendor.temp.js',
-    mainScss: 'styles.scss',
-    vendorScss: 'vendor.scss',
+    mainStyles: 'styles.css',
+    vendorStyles: 'vendor.css',
   },
   buildHtml: {
     templates: 'html/templates',
@@ -34,7 +34,11 @@ module.exports = {
     browserSync: 'browser-sync-server',
     watch: 'watch',
   },
-  getPathesForStylesCustom: function () {
+  error: {
+    icon: './sys_icon/error_icon.png',
+    wait: true,
+  },
+  getFilesForStylesCustom: function () {
     return {
       files: [],
       isGcmq: false,

gulpfile.js

@@ -69,13 +69,20 @@
   requireTask(`${cfg.task.buildHtml}`, `./${cfg.folder.tasks}/`, {
     templates: cfg.buildHtml.templates,
     dest: cfg.buildHtml.dest,
+    mainJs: cfg.file.mainJs,
+    publicJs: cfg.file.publicJs,
+    vendorJs: cfg.file.vendorJs,
+    mainStyles: cfg.file.mainStyles,
+    vendorStyles: cfg.file.vendorStyles,
+    error: cfg.error,
   });
 
   /**
    * Lint HTML
    */
   requireTask(`${cfg.task.lintHtml}`, `./${cfg.folder.tasks}/`, {
     dir: cfg.folder.build,
+    error: cfg.error,
   });
 
   /**
@@ -92,6 +99,7 @@
     dest: cfg.folder.build,
     mainJs: cfg.file.mainJs,
     publicJs: cfg.file.publicJs,
+    error: cfg.error,
   });
 
   /**
@@ -102,24 +110,27 @@
     temp: cfg.folder.temp,
     vendorJs: cfg.file.vendorJs,
     vendorJsTemp: cfg.file.vendorJsTemp,
+    error: cfg.error,
   });
 
   /**
    * Build styles for application
    */
   requireTask(`${cfg.task.buildStyles}`, `./${cfg.folder.tasks}/`, {
     dest: cfg.folder.build,
-    mainScss: cfg.file.mainScss,
+    mainStyles: cfg.file.mainStyles,
+    error: cfg.error,
     checkProduction: true,
   });
 
   /**
     * Build styles custom files listed in the config
     */
   requireTask(`${cfg.task.buildStylesCustom}`, `./${cfg.folder.tasks}/`, {
-    stylesCustomInfo: cfg.getPathesForStylesCustom(),
+    stylesCustomInfo: cfg.getFilesForStylesCustom(),
     dest: cfg.folder.build,
     sortType: cfg.buildStyles.sortType,
+    error: cfg.error,
     checkProduction: true,
   });
 
@@ -128,7 +139,8 @@
    */
   requireTask(`${cfg.task.buildStylesVendors}`, `./${cfg.folder.tasks}/`, {
     dest: cfg.folder.build,
-    vendorScss: cfg.file.vendorScss,
+    vendorStyles: cfg.file.vendorStyles,
+    error: cfg.error,
   });
 
   /**
@@ -156,8 +168,10 @@
     tasks: {
       lintJs: cfg.task.lintJs,
       buildJs: cfg.task.buildJs,
+      buildJsVendors: cfg.task.buildJsVendors,
       buildStyles: cfg.task.buildStyles,
       buildStylesCustom: cfg.task.buildStylesCustom,
+      buildStylesVendors: cfg.task.buildStylesVendors,
       buildHtml: cfg.task.buildHtml,
       lintHtml: cfg.task.lintHtml,
     },

html/partials/head/head.html

@@ -2,6 +2,6 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Starter Kit</title>
-  <link media="all" rel="stylesheet" href="css/vendor.css">
-  <link media="all" rel="stylesheet" href="css/styles.css">
-</head>
+  <link media="all" rel="stylesheet" href="@@webRoot/css/@@vendorStyles">
+  <link media="all" rel="stylesheet" href="@@webRoot/css/@@mainStyles">
+</head>

html/partials/scripts/common.html

@@ -2,5 +2,5 @@
   src="https://code.jquery.com/jquery-1.12.4.js"
   integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
   crossorigin="anonymous"></script>
-<script src="js/vendor.js" defer></script>
-<script src="js/jquery.main.js" defer></script>
+<script src="@@webRoot/js/@@vendorJs" defer></script>
+<script src="@@webRoot/js/@@publicJs" defer></script>

package.json

@@ -1,10 +1,10 @@
 {
   "name": "web-starter-jc",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Starter kit for markup projects",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/justcoded/web-starter-kit"
+    "url": "git+https://github.com/justcoded/web-starter-kit-wp"
   },
   "keywords": [
     "starter",
@@ -16,9 +16,9 @@
   "author": "JustCoded",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/justcoded/web-starter-kit/issues"
+    "url": "https://github.com/justcoded/web-starter-kit-wp/issues"
   },
-  "homepage": "https://github.com/justcoded/web-starter-kit",
+  "homepage": "https://github.com/justcoded/web-starter-kit-wp",
   "devDependencies": {
     "@babel/core": "^7.8.0",
     "@babel/preset-env": "^7.8.0",
@@ -47,7 +47,7 @@
     "path": "^0.12.7",
     "postcss-import": "^12.0.1",
     "postcss-sort-media-queries": "^1.0.15",
-    "sass": "^1.24.4",
+    "sass": "^1.25.0",
     "vinyl-source-stream": "^2.0.0"
   },
   "engines": {

tasks/build-html.js

@@ -12,17 +12,21 @@ module.exports = function (options) {
     prefix: '@@',
     basepath: `./${options.templates}`,
     indent: true,
+    context: {
+      mainJs: options.mainJs,
+      publicJs: options.publicJs,
+      vendorJs: options.vendorJs,
+      mainStyles: options.mainStyles,
+      vendorStyles: options.vendorStyles,
+    },
   };
-  const errorConfig = {
-    title: 'HTML compiling error',
-    icon: './sys_icon/error_icon.png',
-    wait: true,
-  };
+
+  options.error.title = 'HTML compiling error';
 
   return () => {
     return gulp.src(`./${options.templates}/**/*.html`)
       .pipe(fileInclude(config))
-      .on('error', notify.onError(errorConfig))
+      .on('error', notify.onError(options.error))
       .pipe(gulp.dest(`../${options.dest}`));
   };
 };

tasks/build-js-vendors.js

@@ -17,11 +17,8 @@ module.exports = function (options) {
   const babelConfig = {
     presets: ['@babel/preset-env'],
   };
-  const errorConfig = {
-    title: 'JS compiling error',
-    icon: './sys_icon/error_icon.png',
-    wait: true,
-  };
+
+  options.error.title = 'JS compiling error';
 
   return (done) => {
     if (noneES5 && noneES6) {
@@ -33,13 +30,13 @@ module.exports = function (options) {
     } else if (noneES5) {
       return browserify({ entries: jsVendors.es6 })
         .transform('babelify', babelConfig)
-        .bundle().on('error', notify.onError(errorConfig))
+        .bundle().on('error', notify.onError(options.error))
         .pipe(source(options.vendorJs))
         .pipe(gulp.dest(`../${options.dest}/js`));
     } else {
       return browserify({ entries: jsVendors.es6 })
         .transform('babelify', babelConfig)
-        .bundle().on('error', notify.onError(errorConfig))
+        .bundle().on('error', notify.onError(options.error))
         .pipe(source(options.vendorJsTemp))
         .pipe(gulp.dest(`./${options.temp}/js`))
         .on('end', () => {
@@ -49,4 +46,4 @@ module.exports = function (options) {
         });
     }
   };
-};
+};

tasks/build-js.js

@@ -12,18 +12,15 @@ module.exports = function (options) {
   const babelConfig = {
     presets: ['@babel/preset-env'],
   };
-  const errorConfig = {
-    title: 'JS compiling error',
-    icon: './sys_icon/error_icon.png',
-    wait: true,
-  };
+
+  options.error.title = 'JS compiling error';
 
   return () => {
     return browserify({
       entries: `./js/${options.mainJs}`,
     })
       .transform('babelify', babelConfig)
-      .bundle().on('error', notify.onError(errorConfig))
+      .bundle().on('error', notify.onError(options.error))
       .pipe(source(options.publicJs))
       .pipe(gulp.dest(`../${options.dest}/js`));
   };

tasks/build-styles-custom.js

@@ -19,11 +19,8 @@ module.exports = function (options) {
   const plugins = [
     autoprefixer(),
   ];
-  const errorConfig = {
-    title: 'Sass compiling error',
-    icon: './sys_icon/error_icon.png',
-    wait: true,
-  };
+
+  options.error.title = 'Sass compiling error';
 
   isGcmq ? plugins.push(gcmq({ sort: options.sortType, })) : false;
 
@@ -32,7 +29,7 @@ module.exports = function (options) {
       return gulp.src(files)
         .pipe(gulpif(!options.isProduction, sourcemaps.init({ loadMaps: true, })))
         .pipe(sass.sync({ sourceMap: !options.isProduction, }))
-        .on('error', notify.onError(errorConfig))
+        .on('error', notify.onError(options.error))
         .pipe(postcss(plugins))
         .pipe(gulpif(!options.isProduction, sourcemaps.write('./')))
         .pipe(gulp.dest(`../${options.dest}/css`));

tasks/build-styles-vendors.js

@@ -15,16 +15,13 @@ module.exports = function (options) {
   const plugins = [
     cssimport(),
   ];
-  const errorConfig = {
-    title: 'Sass compiling error',
-    icon: './sys_icon/error_icon.png',
-    wait: true,
-  };
+
+  options.error.title = 'Sass compiling error';
 
   return () => {
-    return gulp.src(`./vendor_entries/${options.vendorScss}`)
+    return gulp.src(`./vendor_entries/vendor.scss`)
       .pipe(sass.sync())
-      .on('error', notify.onError(errorConfig))
+      .on('error', notify.onError(options.error))
       .pipe(postcss(plugins))
       .pipe(gulp.dest(`../${options.dest}/css`));
   };

tasks/build-styles.js

@@ -18,19 +18,16 @@ module.exports = function (options) {
   const plugins = [
     autoprefixer(),
   ];
-  const errorConfig = {
-    title: 'Sass compiling error',
-    icon: './sys_icon/error_icon.png',
-    wait: true,
-  };
+
+  options.error.title = 'Sass compiling error';
 
   options.isProduction ? plugins.push(gcmq({ sort: options.sortType, })) : false;
 
   return () => {
-    return gulp.src(`./scss/${options.mainScss}`)
+    return gulp.src(`./scss/styles.scss`)
       .pipe(gulpif(!options.isProduction, sourcemaps.init({ loadMaps: true, })))
       .pipe(sass.sync({ sourceMap: !options.isProduction, }))
-      .on('error', notify.onError(errorConfig))
+      .on('error', notify.onError(options.error))
       .pipe(postcss(plugins))
       .pipe(gulpif(!options.isProduction, sourcemaps.write('./')))
       .pipe(gulp.dest(`../${options.dest}/css`));

tasks/clean-build.js

@@ -9,7 +9,7 @@ module.exports = function (options) {
 
   return async () => {
     const deletedPaths = await del([
-      `../${options.dir}/*.html`,
+      `../${options.dir}/**/*.html`,
       `../${options.dir}/css`,
       `../${options.dir}/js`,
     ], { force: true });