generator-wpgtx

Yeoman Generator

Getting started

Before anithing, we need to have installed Node.js, NPM (which is installed with Node.js) and Ruby (for the Compass).

Ruby is already installed native on Mac OS and Linux. But in Windows, we need to install it. For this, use this installer.

With Ruby installed, you need to install Compass. The Compass is a Sass-based framework which will concatenate and compress your compilled CSS, in addition to providing numerous resources, working with variables, functions, counters and if statements.

To install Compass run the command:

$ [sudo] gem install compass

The sudo should be used only if you are in a UNIX-based operating system (like Mac OS and Linux) to run as administrator.

This way you will install Sass and Compass on your machine.

Now, it's time to Yeoman. To do this, type de following command:

$ [sudo] npm install -g yo

Besides Yeoman, will be installed Bower and Grunt.

Installing Generators

The generator-wpgtx is an extension to the Yeoman who will access the repository and download the files.

To install the generator-wpgtx, run the command:

$ [sudo] npm install -g generator-wpgtx

Now Yeoman and our Generator are installed and ready to use!

Updating Generators

I'm always looking to update the generator-wpgtx, optimizing the code or adding new features when I learn or find something new.

For it to be always up to date, you must run periodically the following command:

$ [sudo] npm update -g generator-wpgtx

Thus, if there is a new update, it will be downloaded and you'll get the latest version.

Putting it all together

Make the local installation of the latest version of WordPress in the desired location.

Tip: I use Nettuts+ Fetch in my Sublime Text 3.

After installing WordPress on your chosen directory, go to the wp-content/themes folder of your installation by using the Terminal, Git Bash, Windows PowerShell, or another of your choice.

Then, start the Generator:

$ [sudo] yo wpgtx

When starting the installation, you will be prompted to enter the project name.

After this, the generator will create a directory with the name of the selected project and add the necessary files, as below.

.
├── img/
│   └── sprite.png
├── inc/
│   ├── content-aside.php
│   ├── content-audio.php
│   ├── content-chat.php
│   ├── content-gallery.php
│   ├── content-image.php
│   ├── content-link.php
│   ├── content-quote.php
│   ├── content-video.php
│   ├── content.php
│   ├── loop-single.php
│   └── loop.php
├── js/
│   ├── min/
│   │   └── scripts.min.js
│   ├── vendor/
│   │   ├── fitvids.min.js
│   │   ├── flexslider.min.js
│   │   └── modernizr.min.js
│   └── scripts.js
├── scss/
│   ├── _base.scss
│   ├── _bootstrap.scss
│   ├── _normalize.scss
│   └── style.scss
├── .ftppass
├── .gitignore
├── 404.php
├── archive.php
├── author.php
├── category.php
├── config.rb
├── date.php
├── footer.php
├── functions.php
├── Gruntfile.js
├── header.php
├── index.php
├── package.json
├── page.php
├── screenshot.png
├── search.php
├── searchform.php
├── sidebar.php
├── single.php
├── style.css
└── tag.php

Configuring Grunt

The theme generated comes with a Gruntfile.js almost fully configured, leaving only configure FTP information to deploy and install the necessary dependencies for everything to work properly.

To do this, go to the theme directory and enter the following command:

$ [sudo] npm install

Through the above command, the following dependencies are installed:

Grunt

Through the Grunt you will manage and automate every preconfigured tasks in Gruntfile.js.

Matchdep

With Matchdep you don't need to change the Gruntfile.js each time you install a new dependency.

Watch

The Watch will check any changes in files and perform the specific task for each, as well as trigger the Live Reload, if you have the extension installed.

Compass

The Compass task will compile your .scss files, generating an optimized CSS file.

Uglify

The Uglify will compress your JavaScript, creating a smaller file.

ImageMin

The ImageMin will optimize your images in JPG and PNG, deleting useless data and decreasing its final size.

FTPush

The FTPush will deploy your theme, ie, send the files to the server.

Before the deployment it's necessary to insert the data from FTP. This information is entered into the Gruntfile.js, setting the host (line 87) and the destination directory within the server (line 92), and in the .ftppass file, setting the username and password.

This task will send only the theme files to the server. The WordPress installation on your host will be the way you prefer.

Running Grunt tasks

Now, with everything installed and configured, it's time to start Grunt:

$ grunt

This will start the Grunt and automatically the watch task will be executed to make things happen.

To optimize your images, run the following command:

$ grunt img

To deploy your theme, run the command:

$ grunt deploy

License

MIT

mguilarducci / generator-wpgtx