Merge pull request #129 from justcoded/develop

Develop

Author: sgurin

README.md

@@ -21,10 +21,12 @@ Web Starter Kit (WSK) - is an opinionated boilerplate for web development. Tools
 9. [Templating](#templating)
 10. [Styles](#styles)
 11. [JavaScript](#javascript)
-12. [Tasks](#tasks)
-13. [Troubleshooting](#troubleshooting)
-14. [Contributing](#contributing)
-15. [License](#license)
+12. [Watching](#watching)
+13. [Images copy and minify](#images-copy-and-minify)
+14. [Tasks](#tasks)
+15. [Troubleshooting](#troubleshooting)
+16. [Contributing](#contributing)
+17. [License](#license)
 
 
 ## Browser Support
@@ -36,7 +38,7 @@ At present, we officially aim to support the last two versions of the following
 * Firefox
 * Safari
 * iOS
-* Android 5+
+* ChromeAndroid
 
 This is not to say that WSK cannot be used in browsers older than those reflected, but merely that our focus will be on ensuring our layouts work great in the above.
 
@@ -128,7 +130,9 @@ 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:
 
-### Watch For Changes & Automatically Refresh Across Devices
+### Development mode
+
+Watch For Changes & Automatically Refresh Across Devices
 
 ```sh
 $ gulp
@@ -139,7 +143,9 @@ 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.
 
 
-### Serve the Fully Built & Optimized Site
+### Production mode
+
+Serve the Fully Built & Optimized Site
 
 ```sh
 $ gulp build
@@ -247,15 +253,15 @@ 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 `src/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)
+![image](https://user-images.githubusercontent.com/38295556/72877232-2c8e3400-3d01-11ea-9653-ffd6fec69b28.png)
 
 Please don't forget to link all your **styles custom files** in **html** file:
 
 ![image](https://user-images.githubusercontent.com/38295556/72220723-4b036b00-355c-11ea-841a-ce218c304aed.png)
 
-Also, you might want to add files to the ignore list (check `getPathesToCopyForProduction` and `getPathesToCopy` properties in the `gulp-config.js` file). By default they will be copied to the `assets` and `production` folders.
+Also, you might want to add files to the ignore list (check `getFilesToCopyProd` and `getFilesToCopy` properties in the `gulp-config.js` file). By default they will be copied to the `assets` and `production` folders.
 
 In our WSK you can use [PostCSS](https://postcss.org/). PostCSS is a tool for transforming CSS with JavaScript. Currently, PostCSS has more than 200 plugins. You can find all of the plugins in the [plugins list](https://github.com/postcss/postcss/blob/master/docs/plugins.md).
 
@@ -288,6 +294,16 @@ In **production** mode we use:
 
 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.
+
+## Images copy and minify
+
+In our WSK by default in [development and production mode](#commands), task `build-images` only copy images.  
+For minify images used [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin).  If you want to minify your images in production mode, please switch option `buildImages.isImageMin = true` in `gulp-config.js`.
+
 ## Tasks
 
 | Task | Description |
@@ -301,11 +317,11 @@ For linting javascript files in WSK used [esLint](https://eslint.org/). esLint a
 | build-styles-vendors | Compiles all vendor styles from `src/vendor_entries` to `assets/css`   folder. |
 | clean-build | Cleaning `assets` folder. |
 | clean-production | Cleaning `production` folder. |
-| copy-folders-production | Copy all folders & files from `assets` to `production`. |
-| copy-folders | Copy all not compiling files & folders from `src` to `assets`. |
+| copy-files | Copy all not compiling files & folders from `src` to `assets`. |
+| copy-files-production | Copy all files & folders from `assets` to `production`. |
 | lint-html | Need to lint html files. |
 | lint-js | Need to lint & fix js files. |
-| image-min | We use this to minify images. |
+| build-images | We use this to copy images & minify for production. |
 | watch | Task for watching all the changes. |
 
 ## Troubleshooting

gulp-config.js

@@ -13,10 +13,10 @@ module.exports = {
     vendorJs: 'vendor.js',
     vendorJsMin: 'vendor.min.js',
     vendorJsTemp: 'vendor.temp.js',
-    mainScss: 'styles.scss',
-    mainScssMin: 'styles.min.css',
-    vendorScss: 'vendor.scss',
-    vendorScssMin: 'vendor.min.css',
+    mainStyles: 'styles.css',
+    mainStylesMin: 'styles.min.css',
+    vendorStyles: 'vendor.css',
+    vendorStylesMin: 'vendor.min.css',
   },
   buildHtml: {
     templates: 'src/html/templates',
@@ -26,6 +26,10 @@ module.exports = {
     // Sorting type css media queries: 'desktop-first' || 'mobile-first'
     sortType: 'desktop-first',
   },
+  buildImages: {
+    imageExtensions: 'jpg,jpeg,png,svg,gif,ico',
+    isImageMin: false,
+  },
   task: {
     lintHtml: 'lint-html',
     lintJs: 'lint-js',
@@ -35,28 +39,31 @@ module.exports = {
     buildStyles: 'build-styles',
     buildStylesCustom: 'build-styles-custom',
     buildStylesVendors: 'build-styles-vendors',
-    imageMin: 'image-min',
+    buildImages: 'build-images',
     cleanProd: 'clean-production',
     cleanBuild: 'clean-build',
-    copyFolders: 'copy-folders',
-    copyFoldersProd: 'copy-folders-production',
+    copyFiles: 'copy-files',
+    copyFilesProd: 'copy-files-production',
     browserSync: 'browser-sync-server',
     watch: 'watch',
   },
-  imageExtensions: 'jpg|jpeg|png|svg|gif|ico|tiff',
-  getPathesForStylesCustom: function () {
+  error: {
+    icon: './sys_icon/error_icon.png',
+    wait: true,
+  },
+  getFilesForStylesCustom: function() {
     return {
       files: [],
       isGcmq: false,
     };
   },
-  getPathesToCopyForProduction: function () {
+  getFilesToCopyProd: function() {
     return [
       `./${this.folder.build}/**`,
       '.htaccess',
     ];
   },
-  getPathesToCopy: function () {
+  getFilesToCopy: function() {
     return [
       `./${this.folder.src}/**`,
       `!{${this.folder.src}/images,${this.folder.src}/images/**}`,

gulpfile.js

@@ -93,13 +93,24 @@
   requireTask(`${cfg.task.buildHtml}`, `./${cfg.folder.tasks}/`, {
     templates: cfg.buildHtml.templates,
     dest: cfg.buildHtml.dest,
+    mainJs: cfg.file.mainJs,
+    mainJsMin: cfg.file.mainJsMin,
+    vendorJs: cfg.file.vendorJs,
+    vendorJsMin: cfg.file.vendorJsMin,
+    mainStyles: cfg.file.mainStyles,
+    mainStylesMin: cfg.file.mainStylesMin,
+    vendorStyles: cfg.file.vendorStyles,
+    vendorStylesMin: cfg.file.vendorStylesMin,
+    error: cfg.error,
+    checkProduction: true,
   });
 
   /**
    * Lint HTML
    */
   requireTask(`${cfg.task.lintHtml}`, `./${cfg.folder.tasks}/`, {
     dest: cfg.buildHtml.dest,
+    error: cfg.error,
   });
 
   /**
@@ -118,6 +129,7 @@
     dest: cfg.folder.build,
     mainJs: cfg.file.mainJs,
     mainJsMin: cfg.file.mainJsMin,
+    error: cfg.error,
     checkProduction: true,
   });
 
@@ -131,6 +143,7 @@
     vendorJs: cfg.file.vendorJs,
     vendorJsMin: cfg.file.vendorJsMin,
     vendorJsTemp: cfg.file.vendorJsTemp,
+    error: cfg.error,
     checkProduction: true,
   });
 
@@ -140,19 +153,21 @@
   requireTask(`${cfg.task.buildStyles}`, `./${cfg.folder.tasks}/`, {
     src: cfg.folder.src,
     dest: cfg.folder.build,
-    mainScss: cfg.file.mainScss,
-    mainScssMin: cfg.file.mainScssMin,
+    mainStyles: cfg.file.mainStyles,
+    mainStylesMin: cfg.file.mainStylesMin,
     sortType: cfg.buildStyles.sortType,
+    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,
   });
 
@@ -162,17 +177,21 @@
   requireTask(`${cfg.task.buildStylesVendors}`, `./${cfg.folder.tasks}/`, {
     src: cfg.folder.src,
     dest: cfg.folder.build,
-    vendorScss: cfg.file.vendorScss,
-    vendorScssMin: cfg.file.vendorScssMin,
+    vendorStyles: cfg.file.vendorStyles,
+    vendorStylesMin: cfg.file.vendorStylesMin,
+    error: cfg.error,
     checkProduction: true,
   });
 
   /**
-   * Minify images
+   * Copy & minify images
    */
-  requireTask(`${cfg.task.imageMin}`, `./${cfg.folder.tasks}/`, {
+  requireTask(`${cfg.task.buildImages}`, `./${cfg.folder.tasks}/`, {
     src: cfg.folder.src,
     dest: cfg.folder.build,
+    imageExtensions: cfg.buildImages.imageExtensions,
+    isImageMin: cfg.buildImages.isImageMin,
+    checkProduction: true,
   });
 
   /**
@@ -193,17 +212,17 @@
   /**
    * Copy folders to the build folder
    */
-  requireTask(`${cfg.task.copyFolders}`, `./${cfg.folder.tasks}/`, {
+  requireTask(`${cfg.task.copyFiles}`, `./${cfg.folder.tasks}/`, {
     dest: cfg.folder.build,
-    foldersToCopy: cfg.getPathesToCopy(),
+    filesToCopy: cfg.getFilesToCopy(),
   });
 
   /**
    * Copy folders to the production folder
    */
-  requireTask(`${cfg.task.copyFoldersProd}`, `./${cfg.folder.tasks}/`, {
+  requireTask(`${cfg.task.copyFilesProd}`, `./${cfg.folder.tasks}/`, {
     dest: cfg.folder.prod,
-    foldersToCopy: cfg.getPathesToCopyForProduction(),
+    filesToCopyProd: cfg.getFilesToCopyProd(),
   });
 
   /**
@@ -221,17 +240,20 @@
   requireTask(`${cfg.task.watch}`, `./${cfg.folder.tasks}/`, {
     src: cfg.folder.src,
     dest: cfg.folder.build,
-    imageExtensions: cfg.imageExtensions,
+    filesToCopy: cfg.getFilesToCopy(),
     browserSync,
     deleteFile,
     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,
-      imageMin: cfg.task.imageMin,
+      buildImages: cfg.task.buildImages,
+      copyFiles: cfg.task.copyFiles,
     },
   }, false);
 
@@ -256,21 +278,22 @@
         cfg.task.buildJsVendors,
       ),
     ),
-    cfg.task.imageMin,
-    cfg.task.copyFolders,
+    cfg.task.buildImages,
+    cfg.task.copyFiles,
     gulp.parallel(
       cfg.task.browserSync,
       cfg.task.watch,
     ),
-  ));
+  )
+  );
 
   /**
    * Creating production folder without unnecessary files
    */
   gulp.task('build', gulp.series(
     gulp.parallel(
       cfg.task.cleanProd,
-      cfg.task.cleanBuild
+      cfg.task.cleanBuild,
     ),
     cfg.task.lintJs,
     gulp.parallel(
@@ -288,9 +311,9 @@
         cfg.task.buildJsVendors,
       ),
     ),
-    cfg.task.imageMin,
-    cfg.task.copyFolders,
-    cfg.task.copyFoldersProd,
+    cfg.task.buildImages,
+    cfg.task.copyFiles,
+    cfg.task.copyFilesProd,
   ), true);
 
   /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-starter-jc",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Starter kit for markup projects",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "gulp-file-include": "^2.1.1",
     "gulp-htmlhint": "^3.0.0",
     "gulp-if": "^3.0.0",
-    "gulp-imagemin": "^6.2.0",
+    "gulp-imagemin": "^7.1.0",
     "gulp-newer": "^1.4.0",
     "gulp-notify": "^3.2.0",
     "gulp-postcss": "^8.0.0",
@@ -49,7 +49,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-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0"
   },

src/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.min.css">
-  <link media="all" rel="stylesheet" href="css/styles.min.css">
-</head>
+  <link media="all" rel="stylesheet" href="@@webRoot/css/@@vendorStyles">
+  <link media="all" rel="stylesheet" href="@@webRoot/css/@@mainStyles">
+</head>

src/html/partials/scripts/common.html

@@ -1,2 +1,2 @@
-<script src="js/vendor.min.js" defer></script>
-<script src="js/app.min.js" defer></script>
+<script src="@@webRoot/js/@@vendorJs" defer></script>
+<script src="@@webRoot/js/@@mainJs" defer></script>

src/vendor_entries/vendor.js

@@ -8,4 +8,4 @@ module.exports = {
   es6: [
     // './node_modules/your-plugin/es6/your-plugin.js',
   ]
-};
+};