From 266f2a1f1527b804e97098a5f61fa5b40dc7e732 Mon Sep 17 00:00:00 2001 From: Miguel Palau Date: Tue, 14 Nov 2017 14:30:50 -0600 Subject: [PATCH 1/9] adding ftp script in the readme --- app/templates/base/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/templates/base/README.md b/app/templates/base/README.md index be154eb..83b31ea 100644 --- a/app/templates/base/README.md +++ b/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 From 634707fb68f83dba80e3ebb5402adbd196971d55 Mon Sep 17 00:00:00 2001 From: Miguel Palau Date: Tue, 14 Nov 2017 14:38:02 -0600 Subject: [PATCH 2/9] adding browserlist updated --- app/templates/base/babelrc | 14 +++++++++++++- app/templates/gulp/_config.js | 13 ++++++++++++- app/templates/gulp/tasks/styles.js | 8 ++++++-- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/app/templates/base/babelrc b/app/templates/base/babelrc index 7193018..e07f384 100644 --- a/app/templates/base/babelrc +++ b/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" + ] + } }] ] } diff --git a/app/templates/gulp/_config.js b/app/templates/gulp/_config.js index 647b235..3aa0c4e 100644 --- a/app/templates/gulp/_config.js +++ b/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" + ] } diff --git a/app/templates/gulp/tasks/styles.js b/app/templates/gulp/tasks/styles.js index ba19124..8823886 100644 --- a/app/templates/gulp/tasks/styles.js +++ b/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('./'))) From b7051b59158db972e6f9018ccd199d22e3cc214a Mon Sep 17 00:00:00 2001 From: Miguel Palau Date: Tue, 14 Nov 2017 16:26:14 -0600 Subject: [PATCH 3/9] adding package-lock.json --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 38e7309..d82264e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "generator-pixel2html", - "version": "1.3.4", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { From 9a4a424c42d008680b37851d6a00481b32548029 Mon Sep 17 00:00:00 2001 From: Juan Manuel Garcia Olivares Date: Thu, 16 Nov 2017 19:10:56 -0300 Subject: [PATCH 4/9] slim the readme! --- README.md | 65 ++++++++++++++--------------------- docs/running_the_generator.md | 59 +++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 40 deletions(-) create mode 100644 docs/running_the_generator.md diff --git a/README.md b/README.md index b294e22..0d70bc7 100644 --- a/README.md +++ b/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. diff --git a/docs/running_the_generator.md b/docs/running_the_generator.md new file mode 100644 index 0000000..ddbcd27 --- /dev/null +++ b/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 +``` From 188fc3009377ee8676e61452180b77475360b453 Mon Sep 17 00:00:00 2001 From: Juan Manuel Garcia Olivares Date: Thu, 16 Nov 2017 19:24:00 -0300 Subject: [PATCH 5/9] add Using another styles language reference on Changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c020cfe..6ac15a6 100644 --- a/CHANGELOG.md +++ b/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 From 7a1b8c0bf00a51de441ec0d9c741b6ea966da37b Mon Sep 17 00:00:00 2001 From: Miguel Palau Date: Tue, 21 Nov 2017 14:29:20 -0600 Subject: [PATCH 6/9] proper npm script --- app/templates/base/_package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/base/_package.json b/app/templates/base/_package.json index 3b48658..cf6754a 100644 --- a/app/templates/base/_package.json +++ b/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", From 7e639154bbd7e7e19809bf1af043c5abfb444a2e Mon Sep 17 00:00:00 2001 From: Miguel Palau Date: Tue, 21 Nov 2017 14:31:06 -0600 Subject: [PATCH 7/9] adding repository field --- package-lock.json | 2 +- package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 38e7309..d82264e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "generator-pixel2html", - "version": "1.3.4", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 184aa8a..f1c33d2 100644 --- a/package.json +++ b/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", From ffa28b736427ed1c746702b61b8b332a30ef48d4 Mon Sep 17 00:00:00 2001 From: Miguel Palau Date: Tue, 21 Nov 2017 15:20:37 -0600 Subject: [PATCH 8/9] browserlist in scss lint --- app/templates/base/_package.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/templates/base/_package.json b/app/templates/base/_package.json index cf6754a..5aded07 100644 --- a/app/templates/base/_package.json +++ b/app/templates/base/_package.json @@ -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" } From e83b6dd8615f3b0076b93e23299ad2709fc3739f Mon Sep 17 00:00:00 2001 From: Miguel Palau Date: Tue, 21 Nov 2017 15:21:24 -0600 Subject: [PATCH 9/9] updating webpack dependencies --- app/templates/base/_package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/templates/base/_package.json b/app/templates/base/_package.json index 5aded07..2c4706e 100644 --- a/app/templates/base/_package.json +++ b/app/templates/base/_package.json @@ -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",