Merge pull request #30 from synapticism/develop

Develop

Author: xsynaptic

gulpconfig.js

@@ -53,7 +53,8 @@ module.exports = {
   , chunks: { // Chunks are arrays of paths or globs matching a set of source files; this way you can organize a bunch of scripts that go together into pieces that can then be bundled (above)
       // The core chunk is loaded no matter what; put essential scripts that you want loaded by your theme in here
       core: [
-        src+'js/responsive-menu.js'
+        modules+'timeago/jquery.timeago.js'
+      , src+'js/responsive-menu.js'
       , src+'js/core.js'
       ]
       // The pageloader chunk provides an example of how you would add a user-configurable feature to your theme; you can delete this if you wish
@@ -84,13 +85,9 @@ module.exports = {
       src: src+'scss/**/*.scss'
     , dest: build
     }
-  , dist: {
-      src: dist+'**/*.css'
-    , dest: dist
-    }
   , compiler: 'libsass' // Choose a Sass compiler: 'libsass' or 'rubysass'
   , autoprefixer: { browsers: ['> 3%', 'last 2 versions', 'ie 9', 'ios 6', 'android 4'] } // This tool is magic and you should use it in all your projects :)
-  , minify: { keepSpecialComments: 1, roundingPrecision: 4 } // Keep special comments preserves the bits we need for WordPress to recognize the theme's stylesheet
+  , minify: { safe: true }
   , rubySass: { // Requires the Ruby implementation of Sass; run `gem install sass` if you use this; Compass is *not* included by default
       loadPath: ['./src/scss', bower, modules] // Adds Bower and npm directories to the load path so you can @import directly
     , precision: 6

gulpfile.js/tasks/main.js

@@ -11,6 +11,6 @@ gulp.task('setup', ['utils-normalize']);
 // Build a working copy of the theme
 gulp.task('build', ['images', 'scripts', 'styles', 'theme']);
 
-// Dist task chain: wipe -> build -> clean -> copy -> images/styles
+// Dist task chain: wipe -> build -> clean -> copy -> compress images
 // NOTE: this is a resource-intensive task!
-gulp.task('dist', ['images-dist', 'styles-dist']);
+gulp.task('dist', ['images-dist']);

gulpfile.js/tasks/styles.js

@@ -13,6 +13,7 @@ gulp.task('styles-rubysass', function() {
   return plugins.rubySass(config.build.src, config.rubySass)
   .on('error', gutil.log) // Log errors instead of killing the process
   .pipe(plugins.postcss(processors))
+  .pipe(plugins.cssnano(config.minify))
   .pipe(plugins.sourcemaps.write('./')) // No need to init; this is set in the configuration
   .pipe(gulp.dest(config.build.dest)); // Drops the unminified CSS file into the `build` folder
 });
@@ -23,16 +24,10 @@ gulp.task('styles-libsass', function() {
   .pipe(plugins.sourcemaps.init())
   .pipe(plugins.sass(config.libsass))
   .pipe(plugins.postcss(processors))
+  .pipe(plugins.cssnano(config.minify))
   .pipe(plugins.sourcemaps.write('./')) // Writes an external sourcemap
   .pipe(gulp.dest(config.build.dest)); // Drops the unminified CSS file into the `build` folder
 });
 
-// Copy stylesheets from the `build` folder to `dist` and minify them along the way
-gulp.task('styles-dist', ['utils-dist'], function() {
-  return gulp.src(config.dist.src)
-  .pipe(plugins.minifyCss(config.minify))
-  .pipe(gulp.dest(config.dist.dest));
-});
-
 // Easily configure the Sass compiler from `/gulpconfig.js`
 gulp.task('styles', ['styles-'+config.compiler]);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wordpress-gulp-starter-kit",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A starter kit for developing WordPress themes with Gulp",
   "homepage": "https://github.com/synapticism/wordpress-gulp-starter-kit",
   "repository": {
@@ -25,30 +25,31 @@
   "main": "gulpfile.js",
   "private": true,
   "devDependencies": {
-    "autoprefixer": "^6.1.1",
-    "browser-sync": "^2.10.0",
-    "del": "^2.1.0",
-    "gulp": "^3.9.0",
+    "autoprefixer": "^6.3.3",
+    "browser-sync": "^2.11.1",
+    "del": "^2.2.0",
+    "gulp": "^3.9.1",
     "gulp-changed": "^1.3.0",
     "gulp-concat": "^2.6.0",
+    "gulp-cssnano": "^2.1.1",
     "gulp-imagemin": "^2.4.0",
     "gulp-jshint": "^2.0.0",
     "gulp-livereload": "^3.8.1",
-    "gulp-load-plugins": "^1.1.0",
-    "gulp-minify-css": "^1.2.1",
-    "gulp-postcss": "^6.0.1",
+    "gulp-load-plugins": "^1.2.0",
+    "gulp-postcss": "^6.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-ruby-sass": "^2.0.6",
-    "gulp-sass": "^2.1.0",
+    "gulp-sass": "^2.2.0",
     "gulp-sourcemaps": "^1.6.0",
-    "gulp-uglify": "^1.5.1",
+    "gulp-uglify": "^1.5.2",
     "gulp-util": "^3.0.7",
-    "html5-history-api": "^4.2.4",
+    "html5-history-api": "^4.2.5",
     "merge-stream": "^1.0.0",
     "normalize.css": "^3.0.3",
     "require-dir": "^0.3.0",
-    "scut": "^1.3.0",
+    "scut": "^1.4.0",
     "spin.js": "^2.3.2",
+    "timeago": "^1.5.2",
     "wp-ajax-page-loader": "^0.2.0"
   },
   "scripts": {

readme.md

@@ -10,7 +10,7 @@ Why use this project instead of any of the alternatives? A few advantages:
 * You should be able to easily drop your own theme into the `src` folder and start hacking without much additional setup.
 * Documentation and comments in the code assume a novice level of understanding.
 * Builds on existing WordPress and Gulp best practices without doing anything too crazy.
-* Will save you a ton of time and help you make better, more readily optimized themes once you learn how it all works.
+* This kind of workflow will save you a ton of time and help you make better, more readily-optimized themes once you learn how it all works.
 
 
 
@@ -46,9 +46,9 @@ If you're already up and running with most of the usual Node ecosystem tools thi
 
 Previously this project shipped without a working theme included. I figured that with all the great starter themes out there (for instance, [_s](https://github.com/Automattic/_s), [Roots](https://github.com/roots/roots), and [Bones](https://github.com/eddiemachado/bones)) it wouldn't be hard to drop one in and start theming. I don't personally use any of these so I was a little surprised to discover how tricky this can be. Starter themes, despite their "bare bones" reputation, are often bulky and opinionated. Some even ship with their own build processes already in place!
 
-It seems there is a need for what I'd call a *minimum viable theme*: a truly bare bones WordPress starter theme featuring only the essentials to get up and running, something that you can assess at a glance. For the purposes of this project I have created such a theme, tentatively named `voidx`. It isn't pretty and isn't up to [WordPress standards](https://wordpress.org/plugins/theme-check/) but it works well enough to show off some of the power of this workflow. Feel free to play with or discard it as you wish. All files under `src` can be replaced by your own files, you just have to be sure to wire things up properly in the `gulpconfig.js` file if you swap in your own stuff.
+It seems there is a need for what I'd call a *minimum viable theme*: a truly bare bones WordPress starter theme featuring only the essentials to get up and running, something that you can assess at a glance. For the purposes of this project I have created such a theme, tentatively named `voidx`. It isn't pretty and isn't up to [WordPress standards](https://wordpress.org/plugins/theme-check/) but it works well enough to show off some of the power of this workflow. Feel free to play with or discard it as you wish. All files under `src` can be replaced by your own files, you just have to be sure to wire things up properly in the `gulpconfig.js` file if you swap in your own stuff. I've already integrated [timeago](http://timeago.yarp.com/), a simple script to transform timestamps into something more human-readable, but this is easily removed if you don't like it (which is sort of the point of having such scaffolding, so you can easily swap stuff in and out).
 
-There are two components worth a closer look, however:
+There are two components worth a closer look:
 
 * The script variable and enqueuing functions in `src/inc/assets.php`; these are tightly coupled with the output of the build process.
 * The theme configuration pattern described in `functions.php` and `functions-config-defaults.php`.
@@ -131,7 +131,7 @@ Like images, PHP (and language) files can go anywhere under `src` and will be co
 
 
 
-## A SAMPLE INTEGRATION
+## EXAMPLE INTEGRATION
 
 Let's say you run across a cool project like [Headroom.js](http://wicky.nillia.ms/headroom.js/) and decide you'd like to try it out. Here's how you would do that with the tools and workflow outlined in this repo:
 
@@ -142,7 +142,7 @@ Let's say you run across a cool project like [Headroom.js](http://wicky.nillia.m
     * Add the switch to `inc/assets.php`: `if ( VOIDX_SCRIPTS_HEADROOM ) : $script_name .= '-hr';`.
     * Add an option to `scss/_config.scss` to allow for the styling to be turned on or off: `$plugin-headroom: true;`.
     * Add the necessary styling to `scss/_plugins.scss` wrapped in a conditional check: `@if ($plugin-headroom) { // Style }`.
-    * Create an additional script at `src/js/headroom.js` to invoke the main script (code to follow).
+    * Create an additional script at `src/js/headroom.js` to invoke the main script:
 
 ```language-javascript
 // Invoke Headroom.js

src/index.php

@@ -10,7 +10,7 @@
                 <h1><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
               </header>
               <footer class="entry-meta">
-                <?php printf( __( 'Posted on %1$s by %2$s. ', 'voidx' ), get_the_date(), get_the_author() ); ?>
+                <?php printf( __( 'Posted <time datetime="%1$s">%2$s</time> by %3$s. ', 'voidx' ), get_post_time('c'), get_the_date(), get_the_author() ); ?>
                 <?php _e( 'Categories: ', 'voidx' ); the_category( ', ' ); echo '. '; ?>
               </footer>
               <div class="entry-content">

src/js/core.js

@@ -3,6 +3,9 @@
 // A simple wrapper for all your custom jQuery; everything in this file will be run on every page
 ;(function($){
   $(function(){
-    // Insert jQuery code here!
+    // Example integration: JavaScript-based human-readable timestamps
+    if ($.timeago) {
+      $('time').timeago();
+    }
   });
 }(jQuery));

src/js/page-loader.js

@@ -4,5 +4,12 @@
 ;(function($){
   $(function(){
     $(document.body).ajaxPageLoader();
+
+    // If jQuery.timeago exists also update timestamps on AJAX page load; if you remove the timeago script this can be deleted
+    if ($.timeago) {
+      document.addEventListener("DOMContentLoaded", function (event) {
+        $('time').timeago();
+      });
+    }
   });
 }(jQuery));

src/scss/_config.scss

@@ -30,7 +30,7 @@ $_metadata: (
 , theme-author:             "Alexander Synaptic"
 , theme-author-uri:         "http://synapticism.com"
 , theme-description:        "A minimally viable theme made with the WordPress/Gulp starter kit"
-, theme-version:            "0.2.0"
+, theme-version:            "0.2.1"
 , theme-license:            "GPLv3"
 , theme-license-uri:        "http://www.gnu.org/licenses/gpl.txt"
 , theme-tags:               (light, responsive-layout, right-sidebar, starter-theme, two-columns, translation-ready, white)