Merge branch 'node-ts-dev' into node-ts-master

Author: CKGrafico

README.md

@@ -35,36 +35,19 @@ Feel free to give feedback and improvements to the repo.
  **[node-ts-master:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/node-ts-master)** Stable version of a **Nodejs with TypeScript** example with SCSS and Nodejs.
  <br>**[node-ts-dev:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/node-ts-dev)** Dev version of a **Nodejs with TypeScript** example with SCSS and Nodejs.
 
-## 🍩 App Features
-On this branch _(Basic)_ we use:
+## 🍩 Boilerplate Features
+On this branch we use:
 - **BEM + BEMIT + etc:** A mix of BEM and related-BEM technologies to create conventions for CSS classes.
-- **TypeScript:** This project uses TypeScript instead of JavaScript.
-- **Linting:** Linting for JavaScript and SASS.
-- **Normalize:** Normalize our css, you can extend it easily.
+- **TypeScript:** All the code uses TypeScript.
+- **Linting:** Linting for TypeScript and SASS.
 - **SASS:** Scss structure with good practises.
 
 **[⬆️ back to top](#quickstart)**
 
 ## ⚙️ Automated Tasks
-On this branch _(Basic)_ we use:
-- **Concurrently:** Execute two tasks in parallel.
-- **Gulp Autoprefixer:** Add browser prefixes for last two versions of the browsers.
-- **Gulp Clean CSS:** To minify CSS.
-- **Gulp Environment:** Call to different tasks depending of the environment.
-- **Gulp Fontmin:** Generate fonts from .ttf.
-- **Gulp Imagemin:** Compress images.
-- **Gulp Load plugins:** Load all the plugins once.
-- **Gulp Newer:** On some tasks we want to do something only with the newer files.
-- **Gulp Nodemon:** To launch the NodeJS application.
-- **Gulp Noop:** Basic Noop but on stream.
-- **Gulp Sass:** Compile Scss to CSS.
-- **Gulp Sasslint:** Linting for SASS.
-- **Gulp Sourcemaps:** Generate Sourcemaps when is necessary.
-- **Gulp TSLint:** Linting for TypeScript.
-- **Gulp Uglify:** Minify and obfuscate JavaScript.
-- **Opn:** Open browser to see the preview.
-- **Require all:** Load all gulp tasks once.
-- **Yarn:** Instead of NPM.
+On this branch we use:
+- **Webpack:** Scripts tasks.
+- **Gulp:** Styles and assets tasks.
 
 **[⬆️ back to top](#quickstart)**
 
@@ -84,83 +67,66 @@ To run the tasks we have these three commands:
 
 **[⬆️ back to top](#quickstart)**
 
-## 🔮 Environments
-On this project we have two environments:
-- **Local:** Use this on your computer
-- **Development:** Use this on your dev server
-- **Production:** Use this on your production server
-
 ## ⛩️ Project structure
-On this branch _(Basic)_ the structure is:`
+On this branch the structure is:`
 ```
-./
-│
-├── app/
-│   ├── client/
-│   │   ├── assets/
-│   │   │   ├── fonts/
-│   │   │   │   └── OpenSans
-│   │   │   │       ├── OpenSans-Regular.ttf
-│   │   │   │       ├── ...
-│   │   │   │       └── OpenSans-SemiboldItalic.ttf
-│   │   │   │
-│   │   │   └── images/
-│   │   │       └── example.jpg
-│   │
-│   │   ├── js/
-│   │   │   └── app.js
-│   │   │
-│   │   └── scss/
-│   │       ├── base/
-│   │       │   ├──  mixins # Some mixins to use on base folder
-│   │       │   ├── _fonts.scss # Load the fonts for your project
-│   │       │   ├── _globals.scss # Global styles
-│   │       │   ├── _states.scss # States classes, like is-hidden, is-visible...
-│   │       │   ├── _utilities.scss # Utility classes, like u-mt-10@xs _(margin-top 10px on media screen xs)_
-│   │       │   └── _variables.scss # Global variables of the project
-│   │       │
-│   │       ├── components/
-│   │       │   └── _ck-site.scss # Example of BEM based component
-│   │       │
-│   │       ├── vendor/
-│   │       │  └── _normalize.scss # Import and extend Normalize
-│   │       │
-│   │       └── index.html
-│   │
-│   ├── server/
-│   │   ├── compiler/
-│   │   │   ├── fonts/
-│   │   │   │   └── compiler.controller.ts
-│   │   │   │   └── compiler.service.ts
-│   │   └── server.ts
-│
-├── dist/ # Distribution folder
-│
-├── tasks/ # Gulp tasks
-│   ├── config/
-│   │   ├── helpers.js # Helpers that useful for tasks
-│   │   └── options.js # Internal operation to use with tasks
-│   ├── rules/
-│   │   ├── scripts.js # Create a bundle for JavaScript files
-│   │   └── scripts-lint.js # Check linting of JavaScript files
-│   ├── assets.js # Minify images and generate fonts
-│   ├── clean.js # Clean distribution folder
-│   ├── copy.js # Copy index.html to dist
-│   ├── scripts-lint.js # Linting for JavaScript
-│   ├── scss.js # Compile and compress SASS files when is necessary
-│   ├── scss-lint.js # Linting for SASS
-│   ├── serve.js # Open a browser with the preview of the project
-│   ├── ts.js # Transpile and compress TypeScript depending of the environment
-│   ├── ts-lint.js # Linting for TypeScript
-│   └── watch.js # Watcher for files
-│
-├── .gulpenvrc.yml # Environments configuration
-├── .sass-lint.yml # SASS linting configuration
-├── .scripts-lint.yml # JavaScript linting configuration
-├── gulpfile.js # Main gulp file
-├── package.json # Configure npm tasks and dependencies
-├── tasks.config.json # Configure paths and options for tasks
-└── webpack.config.js # The Webpack configuration for scripts
+├── .gitignore
+├── .stylelintrc
+├── .ts-lint.json
+├── LICENSE
+├── README.md
+├── app
+|  ├── assets
+|  ├── client
+|  |  ├── assets
+|  |  |  ├── fonts
+|  |  |  |  └── OpenSans
+|  |  |  └── images
+|  |  |     └── example.jpg
+|  |  ├── index.html
+|  |  ├── scss
+|  |  |  ├── app.scss
+|  |  |  ├── base
+|  |  |  |  ├── _fonts.scss
+|  |  |  |  ├── _globals.scss
+|  |  |  |  ├── _icons.scss
+|  |  |  |  ├── _states.scss
+|  |  |  |  ├── _utilities.scss
+|  |  |  |  ├── _variables.scss
+|  |  |  |  └── mixins
+|  |  |  ├── components
+|  |  |  |  └── _ck-site.scss
+|  |  |  └── vendor
+|  |  |     └── _normalize.scss
+|  |  └── ts
+|  |     └── app.ts
+|  ├── server
+|  |  └── ts
+|  |     ├── compiler
+|  |     |  ├── compiler.controller.ts
+|  |     |  ├── compiler.service.ts
+|  |     |  └── index.ts
+|  |     └── server.ts
+|  └── styles
+|     └── vendor
+|        └── _normalize.scss
+├── gulpfile.helpers.js
+├── gulpfile.js
+├── gulpfile.paths.js
+├── package-lock.json
+├── package.json
+├── tasks
+|  ├── assets.js
+|  ├── clean.js
+|  ├── copy.js
+|  ├── scss-lint.js
+|  ├── scss.js
+|  ├── serve.js
+|  ├── ts-lint.js
+|  ├── ts-server.js
+|  ├── ts.js
+|  └── watch.js
+└── tsconfig.json
 ```
 
 **[⬆️ back to top](#quickstart)**
@@ -184,33 +150,6 @@ gulp.task('default', gulp.series(tasks.clean, tasks.stylesLint, tasks.styles, ta
 gulp.task('watcher', gulp.parallel(tasks.serve, tasks.watch));
 ```
 
-### Gulpfile helpers
-In case that you want to modify some gulp tasks, this helpers can help you.
-
-- Files and folders:
-
-```
-_.folder(paths.app.scripts);
-```
-Returns the path where the scripts are located, example: _'./app/js/'_
-
-```
-_.files(paths.app.scripts)
-```
-Returns the file pattern to get the scripts, example: _'./app/js/**/*.js'_
-
-```
-_.files(paths.app.scripts, _.NOT)
-```
-Exclude scripts, example: _'!./app/js/**/*.js'_
-
-```
-_.abs(_.folder(paths.app.scripts), __dirname)
-```
-Change path to absolute path: _'C:/project/app/js'_
-
-**[⬆️ back to top](#quickstart)**
-
 ### Tasks configuration
 You can configure different things related with the tasks.
 ```
@@ -288,8 +227,8 @@ _.files(paths.assets.fonts.roboto)
 ## 🎩 Contributors
 
 
-| <img src="https://i.imgur.com/CcJ7vXL.jpg" width="150"><br>**Quique Fdez Guerra**<br>[👨‍💻](https://github.com/CKGrafico)[🌍](http://ckgrafico.com)[🐦](https://twitter.com/CKGrafico) | <img src="https://i.imgur.com/W8Ks7Ss.jpg" width="150"><br>**Juan Carlos**<br>[👨‍💻](https://github.com/jcarloslr10)[🌍](http://plainconcepts.com)[🐦](https://twitter.com/jcarloslr10) | <img src="https://i.imgur.com/kLqGDso.jpg" width="150"><br>**Alex Kryzhanovskyy**<br>[👨‍💻](https://github.com/AlexKryzh)[🌍](http://kryzh.com)[🐦](https://twitter.com/AlexKryzh) |
-| :---: | :---: | :---: |
+| <img src="https://i.imgur.com/CcJ7vXL.jpg" width="150"><br>**Quique Fdez Guerra**<br>[👨‍💻](https://github.com/CKGrafico)[🌍](http://ckgrafico.com)[🐦](https://twitter.com/CKGrafico) | <img src="https://i.imgur.com/W8Ks7Ss.jpg" width="150"><br>**Juan Carlos**<br>[👨‍💻](https://github.com/jcarloslr10)[🌍](http://plainconcepts.com)[🐦](https://twitter.com/jcarloslr10) | <img src="https://i.imgur.com/kLqGDso.jpg" width="150"><br>**Alex Kryzhanovskyy**<br>[👨‍💻](https://github.com/AlexKryzh)[🌍](http://kryzh.com)[🐦](https://twitter.com/AlexKryzh) | <img src="https://i.imgur.com/ScMiaNz.png" width="150"><br>**Victor Gamez**<br>[👨‍💻](https://github.com/VGamezz19) |
+| :---: | :---: | :---: | :---: |
 
 [View Contributors](https://github.com/CKGrafico/Frontend-Boilerplates/graphs/contributors)
 

app/client/assets/fonts/OpenSans/OpenSans-BoldItalic.ttf

@@ -3,12 +3,7 @@
 
 // Fonts
 @include font-include(OpenSans, Bold, $font-weight-bold, normal);
-@include font-include(OpenSans, BoldItalic, $font-weight-bold, italic);
 @include font-include(OpenSans, ExtraBold, $font-weight-black, normal);
-@include font-include(OpenSans, ExtraBoldItalic, $font-weight-black, italic);
 @include font-include(OpenSans, Regular, $font-weight-normal, normal);
-@include font-include(OpenSans, Italic, $font-weight-normal, italic);
 @include font-include(OpenSans, Light, $font-weight-light, normal);
-@include font-include(OpenSans, LightItalic, $font-weight-light, italic);
 @include font-include(OpenSans, SemiBold, $font-weight-semibold, normal);
-@include font-include(OpenSans, SemiBoldItalic, $font-weight-semibold, italic);

app/client/assets/fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf

@@ -5,6 +5,7 @@ body {
   $font-size: 16px;
 
   background: $color-background-bright;
+  font-family: OpenSans;
   font-size: $font-size;
   height: 100%;
   width: 100%;

app/client/assets/fonts/OpenSans/OpenSans-LightItalic.ttf

@@ -1,8 +1,4 @@
 @import 'variables';
-@import 'mixins/offsets';
-
-@include generate-offsets(margin, m, 100);
-@include generate-offsets(padding, p, 100);
 
 .u {
   &-align {
@@ -18,28 +14,4 @@
       text-align: right;
     }
   }
-
-  &-center {
-    &-vertical {
-      display: block;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    &-horizontal {
-      display: block;
-      left: 50%;
-      position: absolute;
-      transform: translateX(-50%);
-    }
-
-    &-both {
-      display: block;
-      left: 50%;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
 }

app/client/assets/fonts/OpenSans/OpenSans-SemiboldItalic.ttf

@@ -1,7 +1,7 @@
 import * as express from 'express';
-import {json} from 'body-parser';
-import {Express, Request, Response} from 'express';
-import {CompilerController} from './compiler';
+import { json } from 'body-parser';
+import { Express, Request, Response } from 'express';
+import { CompilerController } from './compiler';
 
 const PORT = 8080;