Merge branch '136-release-2-0-0' into 'develop'

Resolve "Release 2.0.0"

Closes #136

See merge request development-tools/boilerplate-generator!40

CHANGELOG.md

@@ -5,7 +5,7 @@
 - Unified fonts task
 - Deploy via FTP
 - Jekyll and HTML both are now Environment aware 💅
-- No more support to LESS & Stylus css preprocessors.
+- No more support to LESS & Stylus css preprocessors. (Help: https://github.com/Pixel2HTML/pixel2html-generator/wiki/Using-other-styles-preprocessor-language)
 - No more support to BassCss framework
 
 ### 1.3.5

README.md

@@ -27,7 +27,6 @@ Also, for **Bundler**, run `gem install bundler` when `Ruby` is already installe
 
 ## Running the generator
 
-### Option 1: Answer questions
 To generate the **Pixel2HTML Boilerplate** go to your project folder and run this command in your shell
 
 ```
@@ -40,47 +39,11 @@ The **Pixel2HTML Boilerplate** will ask you questions about this points. Answeri
 * Quantity of screens?
 * Markup Language? _Options: HTML/Pug_
 * Markup Integration? _Options: None/Jekyll_
-* Frontend Framework _Options: None/Bootstrap/Foundation/BassCss_
+* Frontend Framework _Options: None/Bootstrap/Foundation_
 * jQuery? _Options: true/false_
 
+There are also two more way to generate your files, you can find the instructions in the (Wiki)[https://github.com/Pixel2HTML/pixel2html-generator/wiki/Running-the-Pixel2HTML-Generator]
 
-### Option 2: Using available parameters
-
-You also can answer this questions passing parameters to the generator command.
-
-* ```--projectName``` (*string*)
-* ```--qtyScreens``` (*int*)
-* ```--markupLanguage``` (*string*) [html, pug]
-* ```--markupIntegration``` (*string*) [jekyll, none]
-* ```--frontEndFramework``` (*string*) [basscss, bootstrap, foundation, none]
-* ```--jQuery``` (*bool*)
-
-Example:
-
-```
-$ yo pixel2html --projectName=Floyd --markupLanguage='html'
-```
-
-### Option 3: Using the config file
-
-You can create a `.json` file in the root directory of your project.
-Here an example of it's structure:
-
-```
-{
-  "projectName": 'XXX',
-  "qtyScreens": 4,
-  "markupLanguage": 'html',
-  "markupIntegration": 'jekyll',
-  "frontEndFramework": "bootstrap",
-  "jQuery": true
-}
-```
-
-Once you created this file, run
-```
-$ yo pixel2html
-```
 
 ## Installing dependencies & running up
 To work, the **Pixel2HTML Boilerplate** needs to install some dependencies to run the options you select.
@@ -90,7 +53,7 @@ For this job, run this command in your shell
 $ npm run start
 ```
 
-## File Structure
+## Generated file structure
 
 This boilerplate will create a set of files and folders
 
@@ -129,6 +92,28 @@ This boilerplate will create a set of files and folders
 └──  README.md
 ```
 
+## How to work with script files
+
+We are using [WebpackJS](https://webpack.js.org/) to bundle our script files. There's also ES6 on-demand transpilation and polyfills.
+
+Learn more about Javascript Modules here [Wes Bos Article About Modules](http://wesbos.com/javascript-modules/)
+
+### Example
+
+```js
+import $ from 'jquery'
+import 'bootstrap-sass'
+
+```
+
+We also included the amazing `webpack-bundle-analyzer` you can fine tweak you JS bundle size if you wish to. Fire it up running this command:
+
+```
+$ npm run debug
+```
+
+
+
 ## Available script commands.
 
 ### Start to code.

app/templates/base/README.md

@@ -152,6 +152,9 @@ fontFiles: [
 
 ### Delivery
  * `$ gulp build` Execute all the gulp directives and makes a `.zip` file with the latest code.
+
+### FTP Upload
+* `$ gulp ftp` will upload your dist folder via FTP you must specify the credentials on the `config.deploy.ftp` object. It's powered by: [Vinyl-FTP](https://www.npmjs.com/package/vinyl-ftp)
 
 ### EditorConfig Please note we use
 [EditorConfig](http://editorconfig.org/) to help us try to standarize

app/templates/base/_package.json

@@ -12,7 +12,7 @@
     "lint:scss": "stylelint ./src/styles/**/*.scss",
     "lint": "npm run lint:js; npm run lint:scss",
     "debug": "NODE_ENV=debug webpack --config gulp/webpack.config.js",
-    "prod": "NODE_ENV=production gulp build"
+    "prod": "gulp build --prod"
   },
   "dependencies": {
     "babel-core": "^6.26.0",
@@ -49,11 +49,11 @@
     "gulp-zip": "^4.0.0",
     "require-dir": "^0.3.2",
     "sass-module-importer": "^1.4.0",
-    "uglifyjs-webpack-plugin": "^0.4.6",
+    "uglifyjs-webpack-plugin": "^1.1.0",
     "vinyl-ftp": "^0.6.0",
     "webpack": "^3.6.0",
     "webpack-stream": "^4.0.0",
-    "yargs": "^9.0.1"
+    "yargs": "^10.0.3"
   },
   "stylelint": {
     "extends": "stylelint-config-recommended-scss",
@@ -64,6 +64,16 @@
       "plugin/no-unsupported-browser-features": [
         true,
         {
+          "browsers": [
+            "last 2 Chrome versions",
+            "last 2 ChromeAndroid versions",
+            "last 2 Firefox versions",
+            "last 2 Safari versions",
+            "last 2 ios versions",
+            "last 2 edge versions",
+            "last 2 ie versions",
+            "last 2 Opera versions"
+          ],
           "ignore": ["rem"],
           "severity": "warning"
         }

app/templates/base/babelrc

@@ -4,7 +4,19 @@
       "env",
     {
       "modules": false,
-      "useBuiltIns": "usage"
+      "useBuiltIns": "usage",
+      "targets": {
+        "browsers": [
+          "last 2 Chrome versions",
+          "last 2 ChromeAndroid versions",
+          "last 2 Firefox versions",
+          "last 2 Safari versions",
+          "last 2 ios versions",
+          "last 1 ie versions",
+          "last 2 Edge versions",
+          "last 2 Opera versions"
+        ]
+      }
     }]
   ]
 }

app/templates/gulp/_config.js

@@ -55,5 +55,16 @@ module.exports = {
       port: '21',
       remotePath: './'
     }
-  }
+  },
+  // For autoprefixer
+  browsers: [
+    "last 2 Chrome versions",
+    "last 2 ChromeAndroid versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 ios versions",
+    "last 1 ie versions",
+    "last 2 Edge versions",
+    "last 2 Opera versions"
+  ]
 }

app/templates/gulp/tasks/styles.js

@@ -10,7 +10,9 @@ gulp.task('main:styles', () =>
     .pipe(when(!production, $.sourcemaps.init()))
     .pipe($.sass({importer: moduleImporter()}))
     .on('error', $.sass.logError)
-    .pipe($.autoprefixer())
+    .pipe($.autoprefixer({
+      browsers: config.browsers
+    }))
     .pipe(when(production, $.groupCssMediaQueries()))
     .pipe(when(production, $.csscomb()))
     .pipe(when(!production, $.sourcemaps.write('./')))
@@ -27,7 +29,9 @@ gulp.task('vendor:styles', () =>
   .pipe(when(!production, $.sourcemaps.init()))
   .pipe($.sass({importer: moduleImporter()}))
   .on('error', $.sass.logError)
-  .pipe($.autoprefixer())
+  .pipe($.autoprefixer({
+    browsers: config.browsers
+  }))
   .pipe(when(production, $.groupCssMediaQueries()))
   .pipe(when(production, $.csscomb()))
   .pipe(when(!production, $.sourcemaps.write('./')))

docs/running_the_generator.md

@@ -0,0 +1,59 @@
+# Running the Pixel2HTML Generator
+
+### Option 1: Answering the questions
+
+To generate the **Pixel2HTML Boilerplate** go to your project folder and run this command in your shell
+
+```
+$ cd ~/your/project/folder
+$ yo pixel2html
+```
+The **Pixel2HTML Boilerplate** will ask you questions about this points. Answering with the desired options will generate the code.
+
+* Project Name?
+* Quantity of screens?
+* Markup Language? _Options: HTML/Pug_
+* Markup Integration? _Options: None/Jekyll_
+* Frontend Framework _Options: None/Bootstrap/Foundation_
+* jQuery? _Options: true/false_
+
+
+### Option 2: Using available parameters
+
+You also can answer this questions passing parameters to the generator command.
+
+Here there are the available questions:
+
+* ```--projectName``` (*string*)
+* ```--qtyScreens``` (*int*)
+* ```--markupLanguage``` (*string*) [html, pug]
+* ```--markupIntegration``` (*string*) [jekyll, none]
+* ```--frontEndFramework``` (*string*) [bootstrap, foundation, none]
+* ```--jQuery``` (*bool*)
+
+Example:
+
+```
+$ yo pixel2html --projectName=Floyd --markupLanguage='html'
+```
+
+### Option 3: Using the config file
+
+You can create a `.project.conf` file in the root directory of your project.
+Here an example of it's structure:
+
+```
+{
+  "projectName": 'XXX',
+  "qtyScreens": 4,
+  "markupLanguage": 'html',
+  "markupIntegration": 'jekyll',
+  "frontEndFramework": "bootstrap",
+  "jQuery": true
+}
+```
+
+Once you answered all the question, you can hit at:
+```
+$ yo pixel2html
+```

package.json

@@ -2,6 +2,7 @@
   "name": "generator-pixel2html",
   "description": "Pixel2HTML Boilerplate Generator",
   "version": "2.0.0",
+  "repository": "https://github.com/Pixel2HTML/pixel2html-generator",
   "license": "MIT",
   "author": {
     "name": "Juan Manuel Garcia Olivares",