Static website workflow using Gulp

Recently I have been refining my static website creation workflow; here is a link to the repo. In short it is based off HTML5-boilerplate, uses gulp, includes purecss as a base, styling with less, templating with twig and uses plumber and notify for errors.

No dev section?

Yeah, the pacakge.json doesn’t have a dev section. I view the entire process to be done it dev. Then for the dist folder to be taken and deployed using whatever tool. This eliminates the requirement to have npm installed on production servers, if you want to that’s up to you.

There is also no dev section for gulp. The process always generates minified css/js. Minified css in dev isn’t an issue, js on the other hand could be. The sites I develop rarely have lots of custom js code so this is fine for me. If it becomes an issue in the future then I’ll add a dev build (although I’ll still default to prod which is somewhat controversial).

PHP?

I’m using npm and node based tools but still using the PHP server. This is because the sites developed are deployed to apache/nginx machines and any scripting I do (like sending emails) is done in PHP. Therefore, it only makes sense to use their dev server from day one.

The reason I use twig is so that I can generate base layout files and just extend them with pages. Using partials is also handy but I don’t use filters and variables currently.

Why Less?

I decided not to use SCSS/SASS simply because I have more experience using LESS and it does everything I need it to.

No bower?

It’s not that I don’t think bower is good, it’s just it’s massive overkill. If you take a look at the repo you’ll notice I have very few front end dependancies. Therefore it seems silly having a package manager install a package manager to pull a couple of git repos. I’ll manage that myself. If I could set up a handy gulp task to copy all css/js installed through bower then that might be useful; but I can’t. With purecss I have to cherry pick which files I actually want to copy so what’s the point? This way I can have a gulp task copy all vendor css and I just dump files in there. Otherwise I’ll need to add dependancies in bower and edit my gulpfile, no thanks.

What’s next?

Well, I haven’t handled copying of PHP files so that’s still in the pipeline. I would also like to make a post going through my gulpfile. Although I found all the information online with relative ease the “tutorials” were very basic and I feel people may something a little more complete useful.

comments powered by Disqus