Create a grunt based theme generator

[gregrickaby]

@briannaorg Shared this with me, and I'd like to take a look at maybe integrating this with wd_s:

http://williamwalker.me/blog/levelling-up-with-grunt-project-scaffolding-with-grunt-init.html

[briannaorg]

Started on this with a fork over here: https://github.com/briannaorg/wd_s

[briannaorg]

Clone this repo: https://github.com/briannaorg/wd_s

into ~/.grunt-init/ or %USERPROFILE%.grunt-init\ for Windows users.

To create a new project using a grunt-init template just run the following command in the root of your project directory:

$ grunt-init {template name}

Answer the questions in the prompt, or hit "enter" to use the default values.

Afterwards you just need to run npm install and the plugins defined in the package.json will be installed.

Props to Bronson Quick for the original article that taught me how grunt-init is done: https://bronsonquick.com.au/blog/2013/10/16/intro-into-grunt-wordpress-project-scaffolding/

[jazzsequence]

Tested this and I give it 👍 👍. There are a few minor places where I think we can own it but those are things we can do after this is merged in.

Like this:

[gregrickaby]

Just had a call with @briannaorg and we did a setup via screen-share. We identified a few tweaks...but in the end, I feel like this will be how we should scaffold client sites going forward. We will discuss during tomorrow's designer's call.

Great work!

[briannaorg]

This code has been moved from my personal repo to the grunt-init branch.

[gregrickaby]

With #140 coming soon, I'd like to discuss what's next with Gulp.

Ideally, a user would CD into their theme directory and type gulp wd_s (or whatever) and answer a few questions and be on their way.

[bradp]

I have code for a Yeoman generator for this.

https://github.com/WebDevStudios/generator-wd-s

I think fixing the issues in that is worth it, rather than using grunt-init, which I believe is deprecated.

The problem, as we've discussed in the past, with including a generator in this repo is that doesn't allow someone to just download the zip or clone it down. OR we need to keep two versions in check.

Either way, this build script should be a helpful reference as to how to pull the theme, modify it, without having to keep two branches or repos in check.

[briannaorg]

I have a version of the grunt-init wd_s that writes a Gulpfile instead, but haven't pushed it to the repo yet since the Gulp wd_s isn't on master.

There isn't a gulp-init (yet, or possibly ever) and Yeoman is fine if we update it and figure out a way to make sure it's synced with the latest wd_s. There are Yeoman Gulpfile generators out there to also use as a guideline with the build script just posted.

(Incidentally, grunt-init is not deprecated - it is a replacement for init under grunt, which IS deprecated).

Discussion on gulp-init: gulpjs/gulp#58

I'd like to keep the functionality we have with the grunt-init version (overriding text string variables for textdomain and function names, setting grid sizes, and adding/removing template files based on the needs of the project) and have been working on incorporating some color mapping from Photoshop and Sketch swatches so that we can generate a more complete theme before we start styling - at this point, it would be awesome if the generator version of wd_s was merged with Damon's work on the Pattern Library - I want to see if Jekyll can help extend our scaffolding abilities. I plan on using my 5FTF time on Monday to investigate this more and see if we just need to rework the existing Yeoman generator or if Jekyll can generate a gulpfile or whatever we can do to get a wd_s that merges the Gulp work, the Pattern Library work, and the generator work into one theme machine.

[colorful-tones]

Copy/pasting from internal discussion for posterity...

FYI - one can create a static site without Jekyll, and just use node/Gulp I've been tempting the idea of getting rid of that dependency in PL. Just putting it out there.

after working with a few popular static site generators, and seeing the guts of 'em I had to research whether I could streamline the dependencies of Pattern Library and there are plenty recipes for Gulp static site generators that parse, and use a lot of same internals: YAML/Front-matter, JSON, Markdown/HTML templates, etc.

[gregrickaby]

The trouble with Yeoman, is you're not only asking someone to install it (which is a barrier), but also keep our generator up-to-date with npm update -g generator-s (another barrier). Internally, we have to maintain a generator which uses a different language/syntax in a different repo.

IMHO this is the ideal workflow:

• User downloads or clones wd_s into their WordPress theme directory
• User types npm install && gulp wd_s
• NPM does its thing
• Gulp will ask questions and then does a find-replace
• User can now work with the theme using the same tool used to generate it

Having our "generator" built into the same tool used for working with the theme is a win-win. The user will always have the latest version. The user also doesn't have to know Yeoman or npm update -g. Plus, those of us maintaining the theme are already familiar with Javascript and the Gulp syntax; so when there's a problem - I'm not pinging @bradp 😄

@briannaorg Has offered to look into creating a Gulp task that will run through the theme and do a find-replace. I'd like to get her some time on the schedule to do so.

[colorful-tones]

Would be cool to get some auto-generating Semantic Versioning headers built-in, but would be good 2.0 goal.

Also, I recommend for anybody getting started with Gulp to check out the official recipes: https://github.com/gulpjs/gulp/tree/master/docs/recipes

[bradp]

@gregrickaby +10 to that.

The more we can keep a generating tool within the context of this project, the less maintenance there will be.

[gregrickaby]

I believe we currently have a working Grunt generator. Internally, we've decided to work on a Gulp generator. Therefore, I'm respectfully closing this issue. Follow @briannaorg's work on the development of a Gulp generator here: #153