WordPress Webpack

Get Webpack into your WordPress workflow. And other stuff like: vagrant, BrowserSync, gulp, critical css, latest bootstrap, photoswipe, etc.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• git
• vagrant and virtualbox
• EditorConfig for using the same indenting rules

Exposed vagrant ports

In the creating/configuring process of your virtual machine, vagrant will check if this default ports, on your host machine, are free: 2222(ssh), 8080(apache), 3000(BrowserSync) or 3001(BrowserSync), if not will change that accordingly. To see what ports are exposed to you, run vagrant port. In the rest of the readme file we will use the default ports.

Installing

• git clone this repo
• run vagrant up, this get the virtual machine up and running
• go to localhost:8080/wp-admin/
  • u: admin p: admin
  • and visit Settings -> Permalinks for the .htaccess file to be generated
• go to localhost:8080/ here you can view the theme

Running nodejs gulp tasks

All the action happens in the vagrant vm, so you'll have to ssh that. The build gulp tasks are not to generating anything on the host machine under our repo working space, to keep our IDEs, git and focus, clear from some unwanted generated files.

• vagrant ssh ssh to vagrant vm. You can also acces that with WinSCP u: vagrant, p: vagrant, port: 2222

  • run npm run start for the default task in gulp that is a develompent mode list of tasks ('dev', 'serve' and 'watch'). The tasks from here are written with speed in mind, so in this pipes there will be not tasks that take time like uglify/minify, autoprefixer and so on.

    • go to localhost:3000 for BrowserSync

  • run npm run build preparing the theme for production

  • run npm run serve simply just serving the files compiled trow BrowserSync localhost:3000. Please do not forget that in this task any change you make on the /src will not be propagated to our vagrant vm.

---

As long as vagrant is up, you can always access localhost:8080. As long as in the gulp pipes, serve task is runnging, you can always access BrowserSync localhost:3000 and localhost:3001. As long as in the gulp pipes, watch task is runnging, you can always see you changes from /src to localhost:8080 or localhost:3000.

So please keep in mind that the files from /src are compiled&copied only if you run one of:

• npm run start
• npm run build
• gulp watch

File structure

.
├── .build                      # build automation scripts (for now, just webpack configuration)
├── .data                       # plugins and uploads: from guest to host linked directory
├── src
|   ├── assets
|   │   ├── css                 # files that needs to be css
|   │   ├── imgs                # images like favicon
|   |   ├── js
|   |   |   ├── app             # app modules
|   |   |   ├── helpers         # some helper modules
|   |   |   └── main.js         # javascript entry point
|   |   ├── scss
|   |   |   ├── compile.scss    # scss style entry point
|   |   |   ├── style.scss      # main style file
|   |   |   ├── variables.scss  # all scss variables
|   |   |   └── vendors.scss    # vendors to overwrite or some other custom vendors to import
|   |   └── svg
|   |       ├── icons           # svg icons that will compile to a svg sprite
|   |       └── *.svg           # other svg files that stays the same
|   ├── inc                     # some wp related custom includes
|   ├── template-pages          # wp custom template pages
|   ├── template-parts          # used in loops
|   └── *.*                     # wp theme related like index.php, single.php, functions.php, etc
├── .editorconfig               # please use an IDE that supports EditorConfig, we need to use the same indentation :)
├── Vagrantfile                 # vagrant provision recipe file
├── gulpfile.js                 # other build automation scripts, gulp ones (to do: needs to be in the same place, `.build`)
└── package.json                # Node.js settings, dependencies, eslintConfig, etc

Built With

There are a lot of hours given to the community, thanks guys, keep up the good work:

• wordpress
• bootstrap
• BrowserSync
• gulp
• critical
• PhotoSwipe
• and all that stuff that make our life easier

Contributing

Here are the some angular's CONTRIBUTING.md guidelines.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repo.

Authors

• zalog, initial work, front-end, build