Switch from Gulp to Grunt (#133)

* Add styelint ignore for duplicate `monospace` Normalize instance

* Migrate Gulp to Grunt

* Use tabs for indentation in Sass generated CSS files

* Add `sass` and `postcss` Grunt tasks to the default Grunt task

* Configure Grunt `watch` task

* Use a multiline comment as a workaround to a stylelint bug

* Remove unused `buttons` SCSS partial

* Remove empty unused placeholder blocks

* Update `style.css`

* Update `CONTRIBUTING.md` with Grunt docs

* Travis CI only needs to run linting tasks

* Use correct path to `style.css` for Grunt Autofixer `grunt postcss:helphub` task

* Fix spelling and grammar

.travis.yml

@@ -18,7 +18,6 @@ sudo: false
 
 # Tell Travis CI which distro to use
 dist: trusty
-
 # Travis CI environment matrix
 env:
   matrix:
@@ -94,6 +93,6 @@ script:
   - npm install
   - npm install -g grunt-cli
   # Run CSS, JS, & PHP Grunt tasks (Temporarily using --force so all tasks run)
-  - grunt
+  - grunt travis
   # PHPUnit
   - cd .. && phpunit

CONTRIBUTING.md

@@ -15,7 +15,7 @@
 There are always teams that need help with writing documentation. The Docs Team can help connect you to the people who need the help. Join our discussions in the [#docs](https://make.wordpress.org/docs/tag/docs/) slack channel on **Thursdays from 17:00 - 18:00 UTC** and offer your help.
 
 ### Find bugs and create issues
-Take a look at the HelpHub site located at [wp-helphub.com](https://wp-helphub.com/). If you see any bugs or issues, please create an issue on our Github repo here: https://github.com/Kenshino/HelpHub/issues.
+Take a look at the HelpHub site located at [wp-helphub.com](https://wp-helphub.com/). If you see any bugs or issues, please create an issue on our GitHub repo here: https://github.com/Kenshino/HelpHub/issues.
 
 ### Help code and fix issues
 
@@ -49,38 +49,44 @@ Included in this repo is the file `helphub.wordpress.2017-06-15.xml`. Import thi
 6. Click the button to begin. It may take a while to complete. If there are some failed imports, it should still be okay.
 7. Your local install of HelpHub should now be ready to view in your browser.
 
-Once you have local install of HelpHub up and running, you can contribute with pull requests either from your own fork or after you've added as a contributor directly in this repository. We are using [Travis CL](https://travis-ci.org/) for tests on every pull request. You can, also, run these tests localy before pushing your code (more on this later). Development covers work on both, theme and plugins and requires following [best practices](https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/) and [WordPress Coding Standards](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards).
+Once you have a local install of HelpHub up and running, you can contribute with pull requests either from your own fork or after you've added as a contributor directly in this repository. We are using [Travis CL](https://travis-ci.org/) for tests on every pull request. You can, also, run these tests locally before pushing your code (more on this later). Development covers work on both, theme and plugins and requires following [best practices](https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/) and [WordPress Coding Standards](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards).
 
-#### HelpHub Theme
+#### HelpHub
 
 **Requirements:**
 
 - [npm](https://www.npmjs.com/get-npm)
-- [gulp](https://gulpjs.com/)
+- [Grunt](https://gruntjs.com/)
 - [Sass](http://sass-lang.com/)
 
-HelpHub theme uses [Sass](http://sass-lang.com/) for applying styles as it provides possibility for breaking one large `style.css` file into smaller partials and, therefore, reduce possible GIT conflicts caused with multiple modifications of the same file in different branches. Maintenance is, also, greatly improved. Once modified, Sass (`.scss`) files need to be compiled into `style.css`. Compiler of our choice is [gulp](https://gulpjs.com/). To be able to run gulp you need [npm](https://www.npmjs.com/get-npm). We will assume that you already have npm.
+HelpHub uses a task runner called [Grunt](https://gruntjs.com/). Grunt contains automated tasks for the project (which can be anything - building svg sprites, minifying css and js files etc). We are using to verify and check the integrity of the CSS, JavaScript, and Sass files within this repository along with compiling the themes Sass files into CSS.
 
-In terminal navigate to theme folder. First we need to install dependencies from `package.json` file:
+To be able to run Grunt you need [npm](https://www.npmjs.com/get-npm). We will assume that you already have npm.
+
+
+First we need to install dependencies from `package.json` file:
 ```
 npm install
 ```
 
-After this command has run in your terminal you'll have another folder in the theme root, `node_modules`. This folder is ignored in `.gitignore` and contains all the tools we need for running gulp tasks, defined in `gulpfile.js`. This file contains automated tasks for the project (which can be anything - building svg sprites, minifying css and js files etc). We are using it for two tasks: `css` and `watch`.
+After this command has run in your terminal you'll have another folder in the root, `node_modules`. This folder is ignored in `.gitignore` and contains all the tools we need for running Grunt tasks, defined in `Gruntfile.js`.
+
+
+The HelpHub theme uses [Sass](http://sass-lang.com/) for applying styles as it provides possibility for breaking one large `style.css` file into smaller partials and, therefore, reduce possible Git conflicts caused with multiple modifications of the same file in different branches. Maintenance is, also, greatly improved. Once modified, Sass (`.scss`) files need to be compiled into `style.css`.
 
-`css` task compiles all `.scss` files into `style.css`. This means that every time you run this task `style.css` will be overridden with new code from `.scss` files, located in `sass` folder. Hence, instead modifying `style.css` directly, all CSS changes are to be added into appropriate `.scss` partial after which you should run compiler in order to see your changes. Compiling is done with running following command in terminal:
+The Grunt `sass` task compiles all `.scss` files into `style.css`. This means that every time you run this task `style.css` will be overridden with new code from `.scss` files, located in the themes `sass` folder. Hence, instead modifying `style.css` directly, all CSS changes for the HelpHub theme are to be added into appropriate `.scss` partial after which you should run compiler in order to see your changes. Compiling is done with running following command in terminal:
 
 ```
-gulp css
+grunt sass
 ```
 
-If, however, you are adding a lot of CSS changes, instead of running a lot of `css` tasks, you can run `watch` task, like so:
+If, however, you are adding a lot of CSS changes, instead of running a lot of `sass` tasks, you can run `watch` task, like so:
 
 ```
-gulp watch
+grunt watch
 ```
 
-This task tells compiler to watch all changes created in `.scss` files and rebuild new `style.css` every time you save the file.
+This task tells compiler to watch all changes created in `.scss` files and rebuild a new `style.css` every time you save the file.
 
 While you can use regular CSS syntax in `.scss` files (as long as Travis tests are passed), we would like to encourage you to [learn](http://sass-lang.com/guide) and use Sass as much as possible. It's good for you and for project.
 
@@ -91,4 +97,4 @@ Join our discussions in the [#docs](https://wordpress.slack.com/messages/docs/)
 - **Tuesdays from 15:00 - 16:00 UTC** - content, design and development discussion,
 - **Thursdays from 17:00 - 17:30 UTC** - bug scrubs,
 
-or submit your ideas on our Github repo [here](https://github.com/Kenshino/HelpHub/issues).
+or submit your ideas on our GitHub repo [here](https://github.com/Kenshino/HelpHub/issues).

Gruntfile.js

@@ -15,6 +15,8 @@ module.exports = function( grunt ) {
 			'themes/helphub/js/*.js'
 		],
 
+		autoprefixer = require('autoprefixer'),
+
 		matchdep = require('matchdep'),
 
 		stylelintConfig = require('stylelint-config-wordpress/index.js'),
@@ -88,6 +90,47 @@ module.exports = function( grunt ) {
 				src: HH_JS
 			}
 		},
+		postcss: {
+			options: {
+				map: false,
+				processors: [
+					autoprefixer({
+						browsers: [
+							'> 1%',
+							'ie >= 11',
+							'last 1 Android versions',
+							'last 1 ChromeAndroid versions',
+							'last 2 Chrome versions',
+							'last 2 Firefox versions',
+							'last 2 Safari versions',
+							'last 2 iOS versions',
+							'last 2 Edge versions',
+							'last 2 Opera versions'
+						],
+						cascade: false
+					})
+				],
+				failOnError: false
+			},
+			helphub: {
+				expand: true,
+				src: 'themes/helphub/style.css'
+			}
+		},
+		sass: {
+			helphub: {
+				expand: true,
+				ext: '.css',
+				cwd: 'themes/helphub/sass/',
+				dest: 'themes/helphub/',
+				src: [ 'style.scss' ],
+				options: {
+					indentType: 'tab',
+					indentWidth: 1,
+					outputStyle: 'expanded'
+				}
+			}
+		},
 		stylelint: {
 			css: {
 				options: {
@@ -105,6 +148,15 @@ module.exports = function( grunt ) {
 				expand: true,
 				src: HH_SCSS
 			}
+		},
+		watch: {
+			config: {
+				files: 'Gruntfile.js'
+			},
+			sass: {
+				files: HH_SCSS,
+				tasks: [ 'sass:helphub', 'postcss:helphub' ]
+			}
 		}
 	});
 
@@ -125,6 +177,8 @@ module.exports = function( grunt ) {
 		'checkDependencies',
 		'csstest',
 		'jstest',
-		'phptest'
+		'phptest',
+		'sass',
+		'postcss'
 	] );
 };

package.json

@@ -5,16 +5,20 @@
   },
   "description": "The WordPress user documentation portal.",
   "devDependencies": {
+    "autoprefixer": "^7.1.2",
     "grunt": "~1.0.1",
     "grunt-check-dependencies": "~1.0.0",
     "grunt-checktextdomain": "~1.0.1",
     "grunt-contrib-jshint": "~1.1.0",
+    "grunt-contrib-watch": "^1.0.0",
     "grunt-jscs": "~3.0.1",
     "grunt-jsvalidate": "~0.2.2",
-    "grunt-stylelint": "~0.8.0",
-    "matchdep": "~1.0.1",
-    "stylelint": "~7.10.1",
-    "stylelint-config-wordpress": "~11.0.0",
+    "grunt-postcss": "^0.8.0",
+    "grunt-sass": "^2.0.0",
+    "grunt-stylelint": "~0.9.0",
+    "matchdep": "~2.0.0",
+    "stylelint": "~8.0.0",
+    "stylelint-config-wordpress": "~12.0.0",
     "stylelint-scss": "^2.0.1"
   },
   "engines": {

themes/helphub/sass/_normalize.scss

@@ -47,7 +47,7 @@ hr {
 }
 
 pre {
-	font-family: monospace, monospace;
+	font-family: monospace, monospace; /* stylelint-disable-line font-family-no-duplicate-names */
 	font-size: 1em;
 	overflow: auto;
 }
@@ -78,7 +78,7 @@ strong {
 code,
 kbd,
 samp {
-	font-family: monospace, monospace;
+	font-family: monospace, monospace; /* stylelint-disable-line font-family-no-duplicate-names */
 	font-size: 1em;
 }
 

themes/helphub/sass/elements/_elements.scss

@@ -2,12 +2,6 @@ html {
 	box-sizing: border-box;
 }
 
-*,
-*:before,
-*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-
-}
-
 body {
 	background: $color__background-body; /* Fallback for when there is no custom background color defined. */
 }

themes/helphub/sass/forms/_fields.scss

@@ -21,10 +21,6 @@ textarea {
 	}
 }
 
-select {
-
-}
-
 textarea {
 	width: 100%;
 }

themes/helphub/sass/forms/_forms.scss

@@ -1,4 +1,3 @@
 
-@import "buttons";
 @import "fields";
 @import "search-form";

themes/helphub/sass/modules/_infinite-scroll.scss

@@ -1,6 +1,8 @@
-/* Globally hidden elements when Infinite Scroll is supported and in use. */
-.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
-.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
+/* Globally hidden elements when Infinite Scroll is supported and in use.
+  Older / Newer Posts Navigation (always hidden)
+  Theme Footer (when set to scrolling) */
+.infinite-scroll .posts-navigation,
+.infinite-scroll.neverending .site-footer {
 	display: none;
 }
 

themes/helphub/sass/navigation/_menus.scss

@@ -34,14 +34,6 @@
 			a {
 				width: 200px;
 			}
-
-			&:hover > a,
-			.focus > a {
-			}
-
-			a:hover,
-			a.focus {
-			}
 		}
 
 		li:hover > ul,
@@ -53,22 +45,12 @@
 	li {
 		float: left;
 		position: relative;
-
-		&:hover > a,
-		&.focus > a {
-		}
 	}
 
 	a {
 		display: block;
 		text-decoration: none;
 	}
-
-	.current_page_item > a,
-	.current-menu-item > a,
-	.current_page_ancestor > a,
-	.current-menu-ancestor > a {
-	}
 }
 
 /**