rip-it-with-wordpress
A cool place to start with Wordpress & Gulp.
Overview
The idea with this boilerplate is to allow you to quickly spin up and start coding a wordpress site. You will never edit the theme directly, rather use the src
for that. Everything in there will be piped into the actual wordpress themes.
When adding a plugin simply add it to your plugins directory and use as normal.
Getting Started
- Run
docker-compose up
- Check it out at
http://localhost:8080
Configure
You can set basic configurations for your particular setup as well as app meta and build details in the build-files/gulp/config.js
file.
Dist
To create a dist build, minified with source maps.
- run
docker-compose run builder gulp dist -e production
Templates & Markup
Templates & Markup are handled by mustache which allows us to create partials for common used components as well as environment based markup.
To use a template on the client side: ( note this auto resolves the path so no need to ever use ../../
the base is always templates
)
let template = require('templates/example.html')(data:json)
Bundled Libs
The project starts off with lodash
, mustache
and modernizr
prebuilt and included. You don't need to expose them or import them anywhere.
Dependency Management
Need to add a dependency? There are couple ways to do that.
-
Perfile require:
docker-compose exec builder npm install YOUR_DEP_PACKAGE --save
- Then in places you need it
import MY_PACKAGE from 'my-package'
and use in files you need it.
-
Global Dependency
-
npm install YOUR_DEP_PACKAGE --save
-
In
build-files/gulp/webpack/plugins/plugins.js
add the pluginnew webpack.ProvidePlugin({ YOUR_DEPENDENCY: "your_dependency" })
-
The key you give your dependency is how you will be able to access it.
-
Make sure you add any configurations if needed ( see Modernizr )
-
File Structure
The idea is to have everything live inside of the src
and build into public
during dev and dist.
Tools
This project is built on top of a number of different tools best suited for their respective tasks. Using Gulp as the task runner we can easily modify and customize each build to specific project needs.
-
Gulp
- Task management
- Configuration (
build-files/gulp/config.js
) - Reving files
- Watching file changes
- Compressing images
- Uploading to s3 or desired destination
-
Webpack
- JavaScript bundling
- Transpiling
- Dependency management
- Tree shaking / deduping
- Common modules
- Minification
- ESLint
- Sourcemaps
-
Node Sass
- Compiling Sass/SCSS files
- Minification of CSS
- Autoprefixing
- Sourcemaps
-
Browsersync
- Basic dev server
- Hot replacing CSS
- Manage multiple devices
-
Mustache
- Static HTML creation using partials and includes
- Dynamic clientside templates for javascript
Deployment as a static site to s3
The project comes with a built in deploy-static-aws
task that will run a dist and pipe the files to s3 for a static site hosting. You can run gulp deploy-static-aws -e production
and it will run a production dist as well.
In order to use this make sure you have configured your ~/.aws/credentials
file for the user with the access key and secret, as well as the build-files/gulp/config.js
with the identity to use, the bucket and the region.
Deploy assets
Sometimes you may want to just deploy assets to s3, this can be done with gulp deploy-assets
. This will upload all assets to the s3 bucket specified in the config.js and do a replace on any references to those assets in html, css and js.
Tasks
run gulp --tasks
├── asset-minify ├── clean ├── cleanup ├── copy ├─┬ default │ └─┬ series │ ├── clean │ ├── scripts │ ├── styles │ ├── markup │ ├── copy │ └─┬ parallel │ ├── watch │ └── server ├─┬ dist │ └─┬ series │ ├── clean │ ├── scripts │ ├── styles │ ├── markup │ ├── rev │ ├── replace │ ├── clean │ ├── asset-minify │ └── cleanup ├─┬ markup │ └─┬ series │ └── compileHTML ├─┬ replace │ └─┬ series │ └── replaceRefs ├─┬ rev │ └─┬ series │ ├── revScripts │ ├── copySourceMaps │ └── revStyles ├─┬ scripts │ └─┬ series │ ├── setConfiguration │ ├── getManifest │ └── compileScripts ├── server ├─┬ styles │ └─┬ series │ ├── lint │ ├── build │ └── minify └── watch