Simple WP Gulp

A simple boilerplate to create themes with WordPress, Gulp and Sass.

Table of contents

• Highlights
• Getting started
• Technologies
• Structure
• Tasks
• Tips
• License

Highlights

• Simple
• Free
• Fast
• Easy for begginers
• Cool 😎

Getting started

First of all, make sure you have installed the main dependencies:

• Git
• NodeJS

# Clone it into the wp-content/themes of your WordPress installation:
$ git clone https://github.com/douglasanro/simple-wp-gulp.git my-theme-folder

# Then, go to the theme's folder:
$ cd my-theme-folder

# Install your dependencies running:
$ npm install

Technologies

• NodeJS
• Gulp
• JS
• Sass
• HTML5
• WordPress

Structure

If everything from the Getting Started section goes well, you should have this:

├── assets
│	├── css
│	│   ├── main.min.css
│	│   └── main.min.css.map
│	├── fonts
│	│   └── {.eot, .svg, .ttf, .woff, .woff2}
│	├── images
│	│   ├── raw
│	│       └── {.jpg, .png, .svg, .gif, .ico}
│	│   └── {.jpg, .png, .svg, .gif, .ico}
│	├── js
│	│   ├── dev
│	│       └── *.js
│	│   └── dist
│	│       └── *.min.js
│	└── sass
│	   ├── partials
│	   │   └── _*.scss
│	   └── main.scss
├── inc
│	└── *.php
├── tasks
│	├── browser-sync.js
│	├── clean.js
│	├── deploy.js
│	├── images.js
│	├── sass-lint.js
│	├── scripts.js
│	├── styles.js
│	└── watch.js
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .sass-lint.yml
├── gulpfile.js
├── package.json
├── README.md
├── secrets.json
├── 404.php
├── archive.php
├── comments.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── page.php
├── search.php
├── sidebar.php
├── single.php
└── style.css

Gulp Tasks

If you're running gulp globally, so you can use all the tasks below:

1. gulp: run the following tasks (except gulp deploy) at the same time.
2. gulp styles: Compile, prefix, combine media queries, and minify CSS files.
3. gulp scripts: Concatenate and minify javascript files, check the quality, detect errors and potential problems in your JavaScript code.
4. gulp sass-lint: Lint, detect errors and potential problems in your Sass code.
5. gulp images: Minify PNG, JPEG, GIF and SVG of assets/images/raw folder and move to assets/images once optimized.
6. gulp watch: Automatically handle changes to CSS, JS and PHP files. Also start BrowserSync.
7. gulp deploy: Send files to your production server.

Tips

Install gulp globally:

$ npm install --global gulp-cli

Run gulp locally:

#add npm run before every task e.g.
$ npm run gulp

Edit secrets.json with your server info.

If you use Windows and want to run gulp deploy task to Linux server, you need to install Rsync for Windows.

1. Download cwRsync or other Rsync software (like cygwin).
2. Choose a local and put the files.
3. Add the path in the Windows system variables:
   • Go to Control Panel -> System -> tab Advanced, button Environment Variables.
   • Edit the "Path" system variable and add the full path to the installed rsync:
   • "C:\Program Files\cwRsync\bin" or "C:\cygwin\bin" or "C:\Program Files (x86)\cwRsync\bin" or "C:\cygwin\bin".
4. Reboot you system.

If you have some issues with gulp deploy try add a ssh key with empty password.

Fix libraries jshint error

If you add a library (like bootstrap.min.js) file in assets/js/dev/ (to concat with your main.js) add this /* jshint ignore:start */ in first line of every library.

License

MIT License © Simple WP Gulp