You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 3, 2024. It is now read-only.
* develop:
Version bump
Further reduction of Bower imprint
Dependency update and version bump
Documentation update
Removing unnecessary HTML markup
Reducing Bower footprint in favour of npm
Small dependency update
Clarifying script integration and asset loading
Dependency update (minor)
,notify: false// In-line notifications (the blocks of text saying whether you are connected to the BrowserSync server or not)
@@ -56,14 +48,17 @@ module.exports = {
56
48
scripts: {
57
49
bundles: {// Bundles are defined by a name and an array of chunks (below) to concatenate; warning: this method offers no dependency management!
58
50
core: ['core']
59
-
,pg8: ['pg8','core']
51
+
,pageloader: ['pageloader','core']
60
52
}
61
53
,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)
54
+
// The core chunk is loaded no matter what; put essential scripts that you want loaded by your theme in here
62
55
core: [
63
56
src+'js/responsive-menu.js'
64
57
,src+'js/core.js'
65
58
]
66
-
,pg8: [
59
+
// 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
60
+
// Have a look at the `src/inc/assets.php` to see how script bundles could be conditionally loaded by a theme
61
+
,pageloader: [
67
62
modules+'html5-history-api/history.js'// The modules directory contains packages downloaded via npm
68
63
,modules+'spin.js/spin.js'
69
64
,modules+'spin.js/jquery.spin.js'
@@ -97,12 +92,12 @@ module.exports = {
97
92
,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 :)
98
93
,minify: {keepSpecialComments: 1,roundingPrecision: 4}// Keep special comments preserves the bits we need for WordPress to recognize the theme's stylesheet
99
94
,rubySass: {// Requires the Ruby implementation of Sass; run `gem install sass` if you use this; Compass is *not* included by default
100
-
loadPath: ['./src/scss',bower]// Adds the `bower_components` directory to the load path so you can @import directly
95
+
loadPath: ['./src/scss',bower,modules]// Adds Bower and npm directories to the load path so you can @import directly
101
96
,precision: 6
102
97
,sourcemap: true
103
98
}
104
99
,libsass: {// Requires the libsass implementation of Sass (included in this package)
105
-
includePaths: ['./src/scss',bower]// Adds the `bower_components` directory to the load path so you can @import directly
100
+
includePaths: ['./src/scss',bower,modules]// Adds Bower and npm directories to the load path so you can @import directly
106
101
,precision: 6
107
102
,onError: function(err){
108
103
returnconsole.log(err);
@@ -128,6 +123,11 @@ module.exports = {
128
123
src: [build+'**/*','!'+build+'**/*.map']
129
124
,dest: dist
130
125
}
126
+
,normalize: {// Copies `normalize.css` from `node_modules` to `src/scss` and renames it to allow for it to imported as a Sass file
127
+
src: modules+'normalize.css/normalize.css'
128
+
,dest: src+'scss'
129
+
,rename: '_normalize.scss'
130
+
}
131
131
},
132
132
133
133
watch: {// What to watch before triggering each specified task; if files matching the patterns below change it will trigger BrowserSync or Livereload
Copy file name to clipboardExpand all lines: gulpfile.js/tasks/utils.js
+9-1Lines changed: 9 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -6,8 +6,16 @@ var gulp = require('gulp')
6
6
,config=require('../../gulpconfig').utils
7
7
;
8
8
9
+
// Used to get around Sass's inability to properly @import vanilla CSS; see: https://github.com/sass/sass/issues/556
10
+
gulp.task('utils-normalize',function(){
11
+
returngulp.src(config.normalize.src)
12
+
.pipe(plugins.changed(config.normalize.dest))
13
+
.pipe(plugins.rename(config.normalize.rename))
14
+
.pipe(gulp.dest(config.normalize.dest));
15
+
});
16
+
9
17
// Totally wipe the contents of the `dist` folder to prepare for a clean build; additionally trigger Bower-related tasks to ensure we have the latest source files
Copy file name to clipboardExpand all lines: readme.md
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# A WORDPRESS/GULP STARTER KIT
2
2
3
-
Designing WordPress themes the old-fashioned way is time-consuming and error-prone. Automating the build process allows us to integrate best practices into our workflow while saving time. This project is a *starter kit* for developing highly optimized WordPress themes with [Gulp](http://gulpjs.com/), [npm](https://www.npmjs.com/), [Bower](http://bower.io/), and [Sass](http://sass-lang.com/), among other tools. This is *not* meant to be a starter theme or framework (although I have included a *minimum viable theme* to demonstrate some of the possibilities). It is, instead, a kind of *project scaffolding* and *example workflow* for modern and efficient WordPress theme development.
3
+
Designing WordPress themes the old-fashioned way is time-consuming and error-prone. Automating the build process allows us to integrate best practices into our workflow while saving time. This project is a *starter kit* for developing highly optimized WordPress themes with [Gulp](http://gulpjs.com/), [npm](https://www.npmjs.com/), and [Sass](http://sass-lang.com/), among other tools. This is *not* meant to be a starter theme or framework (although I have included a *minimum viable theme* to demonstrate some of the possibilities). It is, instead, a kind of *project scaffolding* and *example workflow* for modern and efficient WordPress theme development.
4
4
5
5
The latest version of this starter kit features a modular Gulp file design inspired by Dan Tello's excellent [gulp-starter](https://github.com/greypants/gulp-starter). Configuration is isolated from the tasks themselves to make it easier to change paths and modify settings. This approach is slightly more complicated than what I originally [outlined on my blog](http://synapticism.com/dev/wordpress-theme-development-with-gulp-bower-and-sass/) but also far more powerful. Live local development is now facilitated by your choice of [BrowserSync](http://www.browsersync.io/) or [LiveReload](http://livereload.com/) (the default choice).
6
6
@@ -36,7 +36,6 @@ If you're already up and running with most of the usual Node ecosystem tools thi
36
36
37
37
* Edit `gulpconfig.js` and, *at the very least*, change the `project` variable to match the name of your theme. If you like the way this workflow is setup you shouldn't need to edit any of the files under `gulpfile.js/tasks` just yet.
38
38
* 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/)).
39
-
* The previous command will also invoke `bower install` (assuming you have Bower installed) and will fetch all dependencies listed in `bower.json` (which includes front-end dependencies e.g. jQuery plugins, Sass frameworks, icon libraries, and so on).
40
39
*[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.
41
40
*[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.
42
41
* Run `gulp` and start hacking!
@@ -76,6 +75,8 @@ Note: both the `build` and `dist` directories are disposable and can be regenera
76
75
77
76
To get started try running `gulp` from the command line. This fires `gulpfile.js/index.js` and should build a working copy of the included theme. The other command you will use from time to time is `gulp dist`, which builds a distribution copy.
78
77
78
+
You might also find a need for `gulp setup` which runs one-off setup tasks (which is also triggered by `gulp dist`). In the default installation this setup task only copies `normalize.css` to `src/scss` so it can be imported like a native SCSS file. This task is also run after `npm install` completes.
79
+
79
80
Configuration is handled by a single file: `gulpconfig.js`. If you leave the directory structure intact there won't be too much that needs changing here but I can think of two non-obvious components you might want to modify or at least look at:
80
81
81
82
*[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 ;)
@@ -87,11 +88,11 @@ Interested in adding new Gulp plugins to your build system? A full tutorial is o
87
88
88
89
## WORKING WITH NPM
89
90
90
-
[npm](https://www.npmjs.com/) is great for working with JavaScript-based packages of all kinds (front-end or back-end). Previously this starter kit emphasized the use of Bower to retrieve and manage front-end dependencies but nowadays my personal preference is to use npm, mostly because it's way easier to update dependencies than Bower using tools like [npm-check-updates](https://www.npmjs.com/package/npm-check-updates).
91
+
[npm](https://www.npmjs.com/) is great for working with packages of all kinds (front-end or back-end) and is increasingly becoming the package manager of choice. Previously this starter kit emphasized the use of Bower to retrieve and manage front-end dependencies but nowadays my personal preference is to use npm, mostly because it's way easier to update dependencies than Bower using tools like [npm-check-updates](https://www.npmjs.com/package/npm-check-updates).
91
92
92
93
* Find new packages with `npm search [package]`.
93
94
* Install new packages with: `npm install [package] --save-dev`.
94
-
* A general rule-of-thumb: if it's mostly JavaScript-based and you can find it there just use npm.
95
+
* A general rule-of-thumb: if you can find it there just use npm.
95
96
96
97
97
98
@@ -110,9 +111,9 @@ A few handy tips from the [Bower documentation](https://bower.io):
110
111
111
112
* This package now supports either [gulp-ruby-sass](https://github.com/sindresorhus/gulp-ruby-sass/) (which requires [the original Ruby implementation of Sass](https://github.com/sass/sass)) or [gulp-sass](https://www.npmjs.org/package/gulp-sass) (based on the newer, experimental, and faster [libsass](https://github.com/sass/libsass), now active by default). Switch `styles.compiler` in the configuration file as needed! For reference: [Sass compatibility table](https://sass-compatibility.github.io/).
112
113
*[Sass](http://sass-lang.com/) files can be found in `/src/scss`. Gulp will not process Sass partials beginning with `_`; these need to be explicitly imported (see `style.scss` for an example). On the other hand, if you want to output any other CSS files just drop the underscore *e.g.*`editor-style.scss`.
113
-
* Bower components are in the path by default so you can `@import` Sass files directly, as seen in `_loader.scss` and `_reset.scss`.
114
+
*Packages installed with Bower or npm are in the path by default so you can `@import` Sass files directly, as seen in `style.scss`.
114
115
* The `build` folder is provisioned with regular versions of all stylesheets but `dist` only contains minified versions for production.
115
-
* This starter kit ships with [Normalize.css](https://necolas.github.io/normalize.css/) (active by default) and [Eric Meyer's reset](http://meyerweb.com/eric/tools/css/reset/) (inactive by default).
116
+
* This starter kit ships with [Normalize.css](https://necolas.github.io/normalize.css/) (imported into the `src/scss` directory using `gulp setup`; you might also like to explore the use of [normalize-scss](https://github.com/JohnAlbin/normalize-scss) for your project).
116
117
* Compass is *not* included as [Autoprefixer](https://github.com/ai/autoprefixer), a [PostCSS](https://github.com/postcss/postcss) plugin, eliminates the need for vendor prefixing (which is what most Sass frameworks focus on these days). Instead I have included [Scut](https://davidtheclark.github.io/scut/), a minimalist library of useful Sass mixins and functions for the post-vendor prefixing era. This is easily removed if you're not interested in using it.
117
118
*[Sourcemaps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/?redirect_from_locale=tw) are generated by [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) to make debugging stylesheets a snap.
118
119
@@ -160,9 +161,9 @@ That's all there is to it. Now this script can be switched on or off in two conf
160
161
161
162
Things can and will go wrong when working with new tools but there are a few simple things you can do to avoid the worst of it:
162
163
163
-
* Make sure all your base software is up to date, particularly npm, node, Bower, etc.
164
+
* Make sure everything is up to date, particularly this package, npm, node, Bower, etc.
164
165
* If you're getting weird errors you can't figure out try deleting `node_modules` and running `npm install`.
165
-
* You might also have some luck cleaning the cache for both npm and Bower, both of which respond to the `clean cache` command.
166
+
* You might also have some luck cleaning the cache for both npm and Bower, both of which respond to the `clean cache` command, or try `npm prune && npm install`.
166
167
167
168
168
169
@@ -173,7 +174,6 @@ Things can and will go wrong when working with new tools but there are a few sim
0 commit comments