App generator (J)avascript p(ug) (s)tylus makes development fun again!
- Browser Sync : Live reloading system
- Babel : ES2015+ to ES5 compiler formerly called 6to5
- Pug : Templating system made easy, formerly jade
- Autoprefixer : With PostCSS means no more vendor prefixs, it's all auto-magical!
- Stylus : Powerful CSS Preprocessor with a beautiful syntax
- Uglify : Both CSS and JS to make your client payloads small and quick to load
- Parcel : *Performant Module bundler
Table of Contents
Simply install this app generator globally:
npm i -g jugs mkdir appName cd appName jugs
Follow the questions and it will finalize by installing all dependencies for you. In order to start the app and have it automatically check for code changes and autoupdate merely run the command:
And just like that, you're on the way to making your app!
import statements. You can add additional entry files in the gulpfile under the
scripts task. Use
include for jade files and
import for stylus files.
project ├─dist │ ├<<────(assets are copied here on compile) │ ├─ file.js (includes all styles) │ └─ index.html ├─ src │ ├─assets │ │ └─ (imgs/pdf/other go here) │ ├─ app.js │ ├─ makeItRain.js │ └─ app.styl ├─ config.babel.js ├─ package.json └─ readme.md
The boilerplate comes setup with the perspective of a video game developer, but can be easily transitioned into other avenues. Two very basic libraries are included that I developed : Easel and Ion.
Easel sets up a canvas that will fit the perspective of the window and automatically adjust in size when the window is resized.
Ion is a particle engine made for canvas 2d context. The library is well-documented.
This boilerplate of mine is just a combination of great tools, all credit goes to those who actually put in all the hard work to create them.
- Parcel has been an instrumental boost in productivity and clean code, allowing the the use of the ES2015 module system. Moving from webpack to parcel greatly decreased complexity and made starting projects so much easier!
- Though Pug (formerly Jade,) has been seen predominately as a server-side helper for templating, I find it incredibly helpful on front-end projects where I'm using a build system anyways, as the syntax is far easier to read and reduces duplication of segments with partials.
- From css to less to sass to Stylus, it's been a long road with css pre-processors, but I finally found one that lets me drop all the redundant syntax and focus more on the design. I love my curly brace languages, but personally think that it gets in-between me and focusing on what's important when dealing with UX, wireframing or general design.
- No more worrying about vendor prefixes! Autoprefixer has been an instrumental improvement to my workflow when it comes to styling. None of that would be possible without PostCSS and all of the benefits it's brought to frontend development.
- If you're still coding without a linter like ESLint, I'm not sure whether to give you a high-five for all the hard work or question your dedication for only stupidity.