Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

Commit d918535

Browse files
committed
Documentation update
1 parent 19dd5d9 commit d918535

File tree

1 file changed

+6
-3
lines changed

1 file changed

+6
-3
lines changed

readme.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ If you're already up and running with most of the usual Node ecosystem tools thi
3838
* Install all dependencies by running `npm install`. This will fetch all dependencies listed in `package.json` (which includes front-end JavaScript packages and back-end tools like Gulp plugins and [BrowserSync](http://www.browsersync.io/)).
3939
* [BrowserSync](http://www.browsersync.io/) setup: assuming you have a local development environment setup all you should need to do is enter the URL into the `proxy` setting in `gulpconfig.js`. Why use BrowserSync? It's fast, awesome, and allows for simultaneous responsive development across multiple devices.
4040
* [LiveReload](http://livereload.com/) setup: install a browser extension for [Chrome](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) or Firefox. Why use LiveReload? It does the job without complications or additional setup after the extension is installed.
41+
* This build process assumes you're up and running with [source maps for both JavaScript and Sass](http://blog.teamtreehouse.com/introduction-source-maps). You may need to configure your browser or debugging environment to make sense of the minified files generated by Gulp!
4142
* Run `gulp` and start hacking!
4243

4344

@@ -53,7 +54,7 @@ There are two components worth a closer look:
5354
* The script variable and enqueuing functions in `src/inc/assets.php`; these are tightly coupled with the output of the build process.
5455
* The theme configuration pattern described in `functions.php` and `functions-config-defaults.php`.
5556

56-
Whether you use anything from this built-in theme is entirely up to you. If you prefer to start working with your own theme just drop it in. You may need to go into `gulpconfig.js` and modify paths and glob matching patterns but this is designed to be fairly easy and straight-forward with lots of comments to point you in the right direction.
57+
Whether you use anything from this built-in theme is entirely up to you. If you prefer to start working with your own theme just drop it in. You will probably need to modify paths and glob matching patterns in `gulpconfig.js` but it is designed to be fairly easy and straight-forward with lots of comments to point you in the right direction.
5758

5859

5960

@@ -82,7 +83,7 @@ Configuration is handled by a single file: `gulpconfig.js`. If you leave the dir
8283
* [BrowserSync](http://www.browsersync.io/) settings: if you are developing on a local web server you will want to enter the URL into `browsersync.proxy` and then change `watch.watcher` to `browsersync` to take it for a test drive. You'll know it's working when you run `gulp` and a new browser opens with a live copy of your web site. Make changes to any of the Sass files and they should be shown on the page almost immediately. Of course, BrowserSync really shines when you connect a mobile device to your development server, but for that you're on your own ;)
8384
* Script settings: draw your attention to `scripts.bundles` and `scripts.chunks`. This feature is essentially a poor man's [Browserify](http://browserify.org/) or [Webpack](https://webpack.github.io/). By defining different "chunks" (script files that combine to provide a particular feature) and "bundles" (chunks that combine to provide feature sets) you can generate an assortment of files that can be efficiently and intelligently loaded through your WordPress theme. This approach has its limitations, of course, particularly when dependencies are shared between scripts, but it should be of use to many WordPress theme developers.
8485

85-
Interested in adding new Gulp plugins to your build system? A full tutorial is out of scope for this project but it really shouldn't be all that hard to figure out. In brief, install a plugin with `npm install [package] --save-dev`, require it in a suitable task file, add something to the configuration file if needed, and drop it into the pipeline somewhere. Some types of plugin are particularly easy to add, for instance anything listed on the [postcss.parts](http://postcss.parts/) web site (install, require, and add to the `processor` variable in `./gulpfile.js/tasks/styles.js`).
86+
Interested in adding new Gulp plugins to your build system? A full tutorial is out of scope for this project but it really shouldn't be all that hard to figure out. In brief, install a plugin with `npm install [package] --save-dev`, require it in a suitable task file, add something to the configuration file if needed, and drop it into the pipeline somewhere. Some types of plugin are particularly easy to add, for instance anything listed on the [postcss.parts](http://postcss.parts/) web site (install, require, and add to the `processor` variable in `/gulpfile.js/tasks/styles.js`).
8687

8788

8889

@@ -131,7 +132,9 @@ Like images, PHP (and language) files can go anywhere under `src` and will be co
131132

132133

133134

134-
## EXAMPLE INTEGRATION
135+
## EXAMPLE INTEGRATIONS
136+
137+
The bare bones theme included in this starter kit integrates two external JavaScript projects: [timeago](http://timeago.yarp.com/) (which facilitates human-readable timestamps) and [WP AJAX Page Loader](https://github.com/synapticism/wp-ajax-page-loader) (a lightweight and intelligent infinite scroll script). Have a look at the `/src/inc/assets.php` file and `gulpconfig.js` to see how this was accomplished. Timeago required only `npm install -d timeago`, an extra line in `gulpconfig.js`, and initialization in `/src/js/core.js`. Integrating the other script was much more involved; you'll have to browse the source and see for yourself.
135138

136139
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:
137140

0 commit comments

Comments
 (0)