{"id":526,"date":"2016-03-23T23:05:42","date_gmt":"2016-03-24T03:05:42","guid":{"rendered":"http:\/\/www.bemdesign.com\/wordpress\/?p=526"},"modified":"2016-03-24T23:21:24","modified_gmt":"2016-03-25T03:21:24","slug":"shell-scripts-for-easier-website-shell-scaffolding","status":"publish","type":"post","link":"https:\/\/www.bemdesign.com\/wordpress\/2016\/03\/23\/shell-scripts-for-easier-website-shell-scaffolding\/","title":{"rendered":"Shell scripts for easier website shell scaffolding"},"content":{"rendered":"

So I’ve played around with Yeoman<\/a>.<\/p>\n

And I’ve played with NPM<\/a>, Gulp<\/a>, and Grunt<\/a>.<\/p>\n

There’s lots of things I like about these tools. But one thing that I dislike about all of them is the general difficulty of building your own customized website scaffolding system with them. And there’s an over-abundance of dependencies in my opinion. So back to the shell I say!<\/p>\n

Here’s some of my own shell scripts (Bash flavored) to quickly scaffold out common site structures I use frequently.<\/p>\n

\n

Generic Scaffold (.NET 4 MVC approach)<\/h3>\n

scaffold()
\n{
\necho “Creating Content directory”
\nmkdir Content
\necho “Creating Scripts directory”
\nmkdir Scripts
\necho “Moving into Content directory”
\ncd Content
\necho “Creating assets folder for theme”
\nmkdir assets
\necho “Moving into Content\/assets directory”
\ncd assets
\necho “Making css, fonts, and img directories”
\nmkdir css
\nmkdir fonts
\nmkdir img
\necho “And heading back out to the root directory”
\ncd ..\/..
\n}<\/p>\n

Bootstrap Scaffold (.NET 4 MVC approach)*<\/h3>\n

*Uses Bower to handle front-end dependencies<\/p>\n

scaffold-bootstrap()
\n{
\necho “Creating Content directory”
\nmkdir Content
\necho “Creating Scripts directory”
\nmkdir Scripts
\necho “Moving into Content directory”
\ncd Content
\necho “Creating assets folder for theme”
\nmkdir assets
\necho “Moving into Content\/assets directory”
\ncd assets
\necho “Making css, fonts, and img directories”
\nmkdir css
\nmkdir fonts
\nmkdir img
\necho “Using Bower to download front-end dependencies”
\necho “Using Bower to install jQuery#1 – latest”
\nbower install jquery#1
\necho “Using Bower to install Bootstrap”
\nbower install bootstrap
\necho “Using Bower to install FontAwesome”
\nbower install fontawesome
\necho “Using Bower to install animate.css”
\nbower install animate.css
\necho “Moving things into place…”
\ncd bower_components\/animate.css
\nrsync -r animate.min.css ..\/..\/css
\ncd ..\/bootstrap\/dist
\ncd css
\nrsync -r bootstrap.min.css ..\/..\/..\/..\/css
\ncd ..\/fonts
\nrsync -r * ..\/..\/..\/..\/fonts
\ncd ..\/js
\nrsync -r bootstrap.min.js ..\/..\/..\/..\/..\/..\/Scripts
\ncd ..\/..\/..\/font-awesome\/css
\nrsync -r font-awesome.min.css ..\/..\/..\/css
\ncd ..\/fonts
\nrsync -r * ..\/..\/..\/fonts
\ncd ..\/..\/jquery\/dist
\nrsync -r jquery.min.js ..\/..\/..\/..\/..\/Scripts
\necho “And heading back out to the root directory”
\ncd ..\/..
\n}<\/p>\n

\n

I’ve added these scripts to my Bash profile (.bash_profile in your user account). For more info on bash scripting, see http:\/\/www.tldp.org\/LDP\/abs\/html\/index.html<\/a> or use your favorite web search engine.<\/p>\n

I’ll probably create a deployment-preparation script to copy the appropriate files\/directories into a deployment folder for build\/deployment. Anyway, I found Bash much easier to use to setup my web project scaffolding in the way I want it to be.<\/p>\n

Update:<\/strong> Welp here’s a real world reason to go with shell scripts and minimize your external dependencies: http:\/\/arstechnica.com\/information-technology\/2016\/03\/rage-quit-coder-unpublished-17-lines-of-javascript-and-broke-the-internet\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

So I’ve played around with Yeoman. And I’ve played with NPM, Gulp, and Grunt. There’s lots of things I like about these tools. But one thing that I dislike about all of them is the general difficulty of building your own customized website scaffolding system with them. And there’s an over-abundance of dependencies in my […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,4],"tags":[49,48],"class_list":["post-526","post","type-post","status-publish","format-standard","hentry","category-technology","category-work","tag-shell-script","tag-tools"],"_links":{"self":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/comments?post=526"}],"version-history":[{"count":2,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/526\/revisions"}],"predecessor-version":[{"id":528,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/526\/revisions\/528"}],"wp:attachment":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/media?parent=526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/categories?post=526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/tags?post=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}