Merge pull request #84 from serjxupypr/master

Request for updates of web-kit-starter

Author: sgurin

README.md

@@ -46,6 +46,7 @@ This is not to say that Web Starter Kit cannot be used in browsers older than th
 | 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`).                                                                                                |
 | Code Linting               | JavaScript code linting is done using [esLint](https://www.npmjs.com/package/gulp-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). HTML code hinting is done using [HtmlHint](https://www.npmjs.com/package/gulp-htmlhint).                                                                                             |
 | ES2015(ES6) Support                   | Optional ES2015 support .You can use all kind of ES6 features here. ES2015 source code will be automatically transpiled to ES5 for wide browser support.  |
+| HTML templating                       | Used [gulp-file-include](https://www.npmjs.com/package/gulp-file-include) for templating html files. |
 | 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).                       |
@@ -179,6 +180,9 @@ In `src` folder you can find all sources for the project (images, sass , javascr
 ## `src` folder structure
 
 ```
+├── html
+   ├── partials                 #Folder for html components, that we can include into the templates 
+   ├── templates                #Folder for source html templates of pages
 ├── images                      #Folder for storing images
 ├── js                          #Folder for storing js files
    ├── modules                  #Folder for storing js modules
@@ -273,6 +277,7 @@ Also, you might want to add these sass files to the ignore list (check `getPathe
 | build-styles-vendors                 | Compiles and minifies all plugins  scss from `src/vendor_entries` to `production`   folder.                                                                                                                                                                            |
 | clean-production                | `production` folder removing.                                                                                                                           |
 | copy-folders           | Need to copy all folders from sources to assets.                       |
+| file-include           | Compiles all html templates into html files.                       |
 | templates           | Compiles all pug files into html files.                       |
 | html-hint           | Need to hint html files.                    |
 | es-lint           | Need to lint js files.                      |

gulp-config.js

@@ -15,6 +15,10 @@ module.exports = {
     vendorScss: 'vendor.scss',
     vendorScssMin: 'vendor.min.css',
   },
+  fileInclude: {
+    templates: 'src/html/templates',
+    dest: './',
+  },
   task: {
     htmlHint: 'html-hint',
     esLint: 'es-lint',
@@ -30,6 +34,7 @@ module.exports = {
     cleanBuild: 'clean-build',
     copyFolders: 'copy-folders',
     copyFoldersProduction: 'copy-folders-production',
+    fileInclude: 'file-include',
     browserSync: 'browser-sync-server',
     watch: 'watch',
   },

gulpfile.js

@@ -65,9 +65,19 @@
     }
   }
 
+  /**
+   * template HTML
+   */
+
+  requireTask(`${cfg.task.fileInclude}`, `./${cfg.folder.tasks}/`, {
+    templates: cfg.fileInclude.templates,
+    dest: cfg.fileInclude.dest
+  });
+
   /**
    * Hint HTML
    */
+
   requireTask(`${cfg.task.htmlHint}`, `./${cfg.folder.tasks}/`);
 
   /**
@@ -206,6 +216,7 @@
   requireTask(`${cfg.task.watch}`, `./${cfg.folder.tasks}/`, {
     sassFilesInfo: cfg.getPathesForSassCompiling(),
     src: cfg.folder.src,
+    templates: cfg.folder.templates,
     dest: cfg.folder.build,
     imageExtensions: cfg.imageExtensions,
     browserSync: browserSync,
@@ -215,6 +226,7 @@
       buildCustomJs: cfg.task.buildCustomJs,
       buildSass: cfg.task.buildSass,
       esLint: cfg.task.esLint,
+      fileInclude: cfg.task.fileInclude,
       htmlHint: cfg.task.htmlHint,
       imageMin: cfg.task.imageMin
     }
@@ -231,6 +243,7 @@
       cfg.task.buildSass,
       cfg.task.buildSassFiles,
       cfg.task.buildStylesVendors,
+      cfg.task.fileInclude,
       cfg.task.htmlHint,
       cfg.task.esLint,
       cfg.task.imageMin
@@ -253,6 +266,7 @@
       cfg.task.buildSass,
       cfg.task.buildSassFiles,
       cfg.task.buildStylesVendors,
+      cfg.task.fileInclude,
       cfg.task.htmlHint,
       cfg.task.imageMin
     ),
@@ -274,6 +288,7 @@
       cfg.task.buildSassProd,
       cfg.task.buildSassFiles,
       cfg.task.buildStylesVendors,
+      cfg.task.fileInclude,
       cfg.task.htmlHint,
       cfg.task.esLint,
       cfg.task.imageMin

index.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
+  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Starter Kit</title>
@@ -13,12 +13,13 @@
 <body>
   <div id="wrapper">
     <div class="entry-section">
-      <div id="home-canvas"></div>
-    </div>
+  <div id="home-canvas"></div>
+</div>
+
     <section class="starter-box">
-      <h1>JustCoded</h1>
-      <p>Web Starter Kit</p>
-    </section>
+  <h1>JustCoded</h1>
+  <p>Web Starter Kit</p>
+</section>
   </div>
   <script src="assets/js/vendor.min.js" defer></script>
   <script src="assets/js/app.js" defer></script>