# @mepheser/wordpress-gulp

> Gulp build for sane wordpress theme development

Latest version **1.2.0** (published 2021-02-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mepheser/wordpress-gulp
pnpm add @mepheser/wordpress-gulp
yarn add @mepheser/wordpress-gulp
bun add @mepheser/wordpress-gulp
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-02-03 |
| First published | 2019-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 30 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | mepheser |

## Links

- npm: https://www.npmjs.com/package/@mepheser/wordpress-gulp
- npm.io page: https://npm.io/package/@mepheser/wordpress-gulp

## Dependencies (30)

- [del](https://npm.io/package/del.md) 5.1.0
- [tsify](https://npm.io/package/tsify.md) 4.0.1
- [uglify](https://npm.io/package/uglify.md) 0.1.5
- [phplint](https://npm.io/package/phplint.md) ^2.0.1
- [gulp-git](https://npm.io/package/gulp-git.md) 2.9.0
- [reactify](https://npm.io/package/reactify.md) ^1.1.1
- [watchify](https://npm.io/package/watchify.md) ^3.11.1
- [fancy-log](https://npm.io/package/fancy-log.md) 1.3.3
- [gulp-bump](https://npm.io/package/gulp-bump.md) 3.1.3
- [gulp-csso](https://npm.io/package/gulp-csso.md) 3.0.1
- [gulp-sass](https://npm.io/package/gulp-sass.md) 4.1.0
- [node-sass](https://npm.io/package/node-sass.md) ^5.0.0
- [browserify](https://npm.io/package/browserify.md) 16.5.1
- [gulp-debug](https://npm.io/package/gulp-debug.md) 4.0.0
- [gulp-merge](https://npm.io/package/gulp-merge.md) ^0.1.1
- [gulp-newer](https://npm.io/package/gulp-newer.md) 1.4.0
- [gulp-filter](https://npm.io/package/gulp-filter.md) 6.0.0
- [gulp-prompt](https://npm.io/package/gulp-prompt.md) 1.2.0
- [gulp-uglify](https://npm.io/package/gulp-uglify.md) 3.0.1
- [autoprefixer](https://npm.io/package/autoprefixer.md) 9.7.6
- [browser-sync](https://npm.io/package/browser-sync.md) 2.26.7
- [gulp-phplint](https://npm.io/package/gulp-phplint.md) 0.9.0
- [gulp-postcss](https://npm.io/package/gulp-postcss.md) 8.0.0
- [gulp-replace](https://npm.io/package/gulp-replace.md) 1.0.0
- [vinyl-buffer](https://npm.io/package/vinyl-buffer.md) 1.0.1
- [gulp-streamify](https://npm.io/package/gulp-streamify.md) 1.0.2
- [common-shakeify](https://npm.io/package/common-shakeify.md) 0.6.2
- [gulp-sourcemaps](https://npm.io/package/gulp-sourcemaps.md) 2.6.4
- [vinyl-source-stream](https://npm.io/package/vinyl-source-stream.md) 2.0.0
- [node-sass-tilde-importer](https://npm.io/package/node-sass-tilde-importer.md) 1.0.2

## Recent versions

- 1.2.0 (latest) — 2021-02-03
- 1.1.14 — 2021-01-31
- 1.1.13 — 2020-11-25
- 1.1.12 — 2020-05-06
- 1.1.11 — 2020-05-06
- 1.1.10 — 2019-08-24
- 1.1.9 — 2019-08-24
- 1.1.9-q — 2019-08-24
- 1.1.8 — 2019-05-23
- 1.1.7 — 2019-05-03
- 1.1.6 — 2019-04-30
- 1.1.5 — 2019-04-30
- 1.1.4 — 2019-04-16
- 1.1.3 — 2019-04-16
- 1.1.2 — 2019-04-09
- … 22 more at https://npm.io/package/@mepheser/wordpress-gulp/versions

## README

# Gulp build for wordpress theme development

Opinionated build using convention over configuration. Provides pipelines for styles (scss to css)
and javascript (typescript to es5) and hot reloading. Expects a specific source directory layout and provides common tasks:
* `gulp wp-build`
  * Create distributable theme in `public` folder
  * Process scss files to css
  * Process typescript files to plain js
  * Set theme version in style.css to current git hash
* `gulp wp-build:watch` for development
  * Execute `wp-build` in watch mode for live development
  * Set up browsersync for hot reloading
  * Back copy acf-json from public to src when edited in browser 
* `gulp wp-release`
  * Prompt for semver bump (major|minor|patch)
  * Bump version in package.json
  * Create and push git tag release/<version>   
  
## Installation

### Add dependencies

Create a npm/yarn project and add the following dev dependencies:
  * `@mepheser/wordpress-gulp`
  * `gulp`
  * `typescript`
  
### Add wordpress gulp tasks to local gulp file

Create a simple `gulpfile.js` and add wordpress tasks by passing gulp object to init function:
```javascript
var gulp = require('gulp');
var wordpressGulp = require('@mepheser/wordpress-gulp')

wordpressGulp(gulp)
```  

After that, `wp-build`, `wp-build:watch` and `wp-release` are available in local build.
  

## Directory layout and processing

  All different source file types are located in subdirectories of `src` and are compiled/copied to `public`. 
  A simple theme output folder may look like
  
### Example

#### Input: separated by file type to be processed differently

```
src/
├── fonts
│   ├── roboto.woff
├── images
│   ├── logo.jpg
├── php
│   ├── acf-json
│   │   ├── group_5bc065b43c546.json
│   ├── templates
│   │   ├── even-more-template-files.php
│   ├── 404.php
│   ├── functions.php
│   ├── index.php
│   └── style.css
├── scripts
│   └── some-internal-component.ts
│   └── main.ts
└── styles
    ├── _colors.scss
    ├── _more-internal-partials.scss    
    └── main.scss

```
#### Output: a wordpress ready theme directory
```
public/
├── acf-json
│   ├── group_5bc065b43c546.json
├── assets
│   ├── fonts
│   │   ├── roboto.woff
│   ├── images
│   │   ├── logo.jpg
│   ├── scripts
│   │   └── bundle.js
│   └── styles
│       └── main.css
├── templates
│   ├── even-more-template-files.php
├── 404.php
├── functions.php
├── index.php
└── style.css

```  
### Details by file type
#### Stylesheets (css and scss)
  
* source: `src/styles/main.scss` and referenced files
* target: `public/assets/styles/main.css`
* processing
    * create main entry point `src/styles/main.scss`
    * split code into [partials](https://sass-lang.com/guide#topic-4)
    * include scss or css from node_modules using ~ notation (note: don't use .css suffix as this would create an url() reference)
    * processed scss will be copied to `public/assets/styles/main.scss`

#### Scripts (typescript)
* source: `src/scripts/main.ts` and referenced files
* target: `public/assets/styles/bundle.js`
* processing
    * create main entry point `src/styles/main.ts`
    * declare dependencies in package.json, split code into separate .ts files and import in main.ts
    * procecessed bundled.js (including all dependencies) will be copied to `public/assets/scripts/bundle.js`

#### php (wordpress theme files)
* source: `src/php/*` (style.css, functions.php, index.php, other templates,...)
* target: `public/*` 
* processing
    * all theme files and directories are copied directly into `public`
    * style.css get's current git hash into `Version: %git_hash%` 

#### Images 
* source: `src/images/*`
* target: `public/assets/images/*`
* no processing

#### Fonts 
* source: `src/fonts/*`
* target: `public/assets/fonts/*`
* no processing

---
_Source: https://npm.io/package/@mepheser/wordpress-gulp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._