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!!!!!!
- 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
- If you're using
fish
shell instead ofbash
orzsh
, first installfisher
, thenfisher fish-nvm
.
- If you're using
- This repository. That's it!
- 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
.
gulp
- Clears and rebuilds/dst
; serves static site from/dst
; watches/src
and rebuilds codebase upon noticing changesgulp build
- Clears and rebuildshtdocs
.
- 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.
- Vendor libraries and site media should be placed in
- 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.
;-)
)
- The compilation process is destructive. Be safe! When not actively cutting a release, treat the contents of
- BrowserSync then serves that compiled code to your browser.
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
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.
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!!!!!!!!!!!!!”