Pit stop on the way to a JS framework
Sassy Pug Stack is for developers who have learned the basics of web dev fundamentals and understand the basics of vanilla html, css, and js but feel like they have plateaued. This project is built to help you learn about how to start building your own professional workflows by using html/css/js preprocessors and using a task automation tool.
This meant solely for education! Don't use this as a project starter. I don't maintain this project. Please use something better like ParcelJS, which has support for all these preprocessors.
- PugJS makes writing html super easy by templating and preprocessing HTML.
- Sass makes writiing CSS super easy by preprocessing css.
- Babel makes writing JS super great because now you can write ES6!
- Gulp to automate the task of compiling all that preprocessor stuff
note: do not input the $
character. This just means put the below into a command line prompt
$git clone https://github.com/axecopfire/Sassy_Pug_Stack
$cd Sassy_Pug_Stack
$npm install
$npm run dev
You should start to see pug spinning up and watching your files. Now whenever you make a change in the src
folder and save it, Gulp
will run and compile that code you changed. The new compiled code will show up in the public
folder.
The next thing you need to do is make a change in a file in the src
folder and save it. When you do that watch your Sassy_Pug_Stack
folder and see that a public
folder should show up and in there should be your compiled code. Open the html up in a browser.
As the developer you will work out of the src
directory. Gulp
will take your files, compile them down into vanilla code and place them in a public
directory.
The src
directory looks like
src/
|- views/
|-- Pug files
|- sass/
|-- Sass files
|- js/
|-- Javascript files