Thoughtful Slurp

A personal pan front-end boilerplate/generator/working environment, based around Gulp 4, Sass, HTML5 Boilerplate, and minimal JS tooling.

Wondering whether you should be interested? Well, let's see:

Are you trying to proof-of-concept some CSS effect, SVG animation, JS library implementation, et al, and are desperate to fast-forward to the project phase where you're actually working on it instead of debugging the mystery eight-second pause in your gulp compress toolchain?
Do you work mobile-first and responsively, but absolutely, positively, do NOT need anything as formally-scaffolded as a React/Webpack/Docker project?
Is your front-end work more about fulfilling specific, and maybe not completely digitally-rooted, design intent, much more than it is musing, "Hmm, I suppose my application will need an interface"?
Do you have four weekdays to crank out a microsite from a flat JPG left behind by a designer now mid-flight to Bali, and the last thing you want to think about right now is "sensible viewport meta defaults"?

If so, then hello!!!!!! Please read on!!!!!!

Requirements

Some flavor of Unix in a terminal, whether that's MacOS Unix in iTerm2, Xenial Xerias over Windows 10's WSL subsystem in ConEmu, or, like, Debian.
nvm
1. If you're using fish shell instead of bash or zsh, first install fisher, then fisher fish-nvm.
This repository. That's it!

First-time setup

Navigate to the empty folder that will house your project and clone this repo into it.
Run nvm use, or, if your CLI complains, nvm use lts/fermium.
Run npm install.
Install Gulp's command-line tooling, usually by running npm install --global gulp-cli -- for further reference, here's GulpJS's quickstart guide.
You're done! Write your code in /src and use the command-line tools to compile to /dst.

Using the command-line tools

gulp - Clears and rebuilds /dst; serves static site from /dst; watches /src and rebuilds codebase upon noticing changes
gulp build - Clears and rebuilds htdocs.

Developing within the codebase

Run gulp from the command-line, in the root directory of your project folder.
Open /src in your code editor of choice, pick your favorite file, and begin working.
Gulp will watch the non-vendor contents of /src, and recompile and reload the page when a change is detected.
- Vendor libraries and site media should be placed in /src as well.
Code in /src is compiled into /dst.
- The compilation process is destructive. Be safe! When not actively cutting a release, treat the contents of /dst as ephemeral data.
- (This is why vendor libraries and site media all live in src. ;-) )
BrowserSync then serves that compiled code to your browser.

FAQ

Q: How did this repo come about?
A: I tried to start working on an idea that I'd had, and within an hour I was once again infuriated by how many disparate half-solutions there are in TYOOL 2019 to the common problem of "spinning up a sane working environment." No I do not need Webpack, no I do not need a virtualization layer, holy mother of PASV do I not want to need to deploy anything to Heroku.

Q: Who's the mascot? It's cute!
A: That is my friend Gooey, who has kindly agreed to pose pro bono for this repository's logo for the time being. While the rest of the repository is covered under the GPL3, Gooey is most decidedly not. (At least not until something profoundly wild happens to the corpus of the Game Boy library, anyway.) If Gooey is yours, let me know and I will get off my keister and figure out a real logo.
The font, thematically, is an early Future Fonts release of Very Cool Studio's Gooper.

Q: Do you plan to support hot reloading, JS modules, Coffeescript, et al?
A: If it's not in my TODO: not unless you can convince me that my bare-minimum front-end development process is suffering without it.

Q: What if I need a database layer?
A: I'm not sure I plan to address this use case.

Q: [clearly not listening] What if I need an entire full-stack Node application that has a database and a server and a front-end?
A: Weirdly enough, that question wraps all the way around "I don't plan to address that use case" to "this is now an entirely new use case that I also want a solution for". No promises or anything!

Q: The code seems alright, I just think the name is unneccesarily gross.
A: This is NOT a question

Etc.

See the .plan file included with this repository for development notes, mid-stream update scratchings, and a prospective roadmap.

Prior art and advice leveraged by (among others):
CSS Tricks
Foundation for Sites
Blueprint CSS

Please report any bugs, say hi if you use this, and for real, thank you for your time.

BONUS: GOOEY'S FAQ

Q: What has it been like being the extremely-unofficial mascot of a software project?
A: “Hello!!!!!!! I'm Gooey!!!!!!!!!!”

Q: How do you feel about your logo?
A: “It tastes...... good!!!!!!!!!!!!!!”

Q: Is there anything else you'd like to say?
A: “I'm Gooey!!!!! Hello!!!!!!!!!!!!!”

rap / thoughtful-slurp