DrewDahlman / rip-it-with-wordpress

A frontend build system for wordpress

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 plugin

    new 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