Starter boilerplate for new projects
Includes:
- BrowserSync
- CommonJS
- Javascript
- Javascript ES6
- CSS
- Stylus
- HTML
- Jade
- Handlebars
- Sprite generation
- Image optimization
- Semver tag
- Locale
Structure:
nakedapp
├── README.md
├── package.json
├── .gitignore
├── LICENSE
├── gulpfile.js
├── public
│ ├─── images
│ │ ├── sequences
│ │ └── icons.png
│ │ └── sprite.svg
│ ├─── app.js
│ ├─── index.html
│ └─── app.css
│── src
│ ├── audio
│ ├── data
│ ├── fonts
│ ├── images
│ │ ├── sequences
│ │ └── icons
│ ├── scripts
│ │ ├── models
│ │ ├── shared
│ │ │ ├── comp
│ │ │ └── lib
│ │ ├── views
│ │ └── app.js
│ ├── styles
│ │ ├── shared
│ │ │ └── comp
│ │ │ └── spritesheets
│ │ └── views
│ └── templates
│ ├── comp
│ └── views
│ └── index.html
└── build
├── tasks
└── config.json
All your files import path are relative to the src
folder:
var myLib = require("scripts/shared/lib/myLib");
You can load your templates the same way you load the Javascript files:
var Tmpl = require("templates/views/layout.hbs");
All the ES6 features are avaliable using the Babel pre-compiler.
That means that you can import your files...
import * as myLib from "scripts/shared/lib/myLib";
...And export your methods using the ES6 syntax:
export function myMethod(x, y) {
return x + y;
}
All the ES6 code will be converted to ES5 syntax and CJS pattern.
At the moment, this boilerplate only supports Stylus and CSS (as stylus support plain CSS).
The CSS entry point is the src/styles/app/styl
, all your styles must be linked to this file:
You can import Nib to use its features/mixins.
@import "nib"
All your files import path are relative to the styles
folder:
app.styl
@import "shared/reset.styl";
Stylus support the plain CSS syntax!
You can use Jade, Handlebars, or regular HTML as templates, and import them in your scripts:
Using Jade or Handlebars
.layout
h1 Hello World!
var tmpl = require("templates/views/layout.jade")
console.log(tmpl()); // <div class='layout'><h1>Hello World!</h1></div>
and yes, you can use the ES6 import syntax to load the templates:
import * as tmpl from "templates/views/layout.jade"
console.log(tmpl()); // <div class='layout'><h1>Hello World!</h1></div>
Using HTML
<div class='layout'>
<h1>Hello World!</h1>
</div>
var tmpl = require("templates/views/layout.html")
console.log(tmpl); // <div class='layout'><h1>Hello World!</h1></div>
All the .png
files inside the src/images/icons
folder will be assembled as one image at public/images/icons.png
.
A icons.styl
file will be generated at src/styles/shared/icons.styl
, containing all the information about the icons.
Loading an icon:
.my-icon
sprite($icon_name)
All the .svg
files inside the src/images/icons
folder will be assembled as one SVG at public/images/sprite.svg
.
A sprite.styl
file will be generated at src/styles/shared/spritesheets/sprite.styl
, containing all the information about the sprites.
Every time you run npm run build:<dev|prod>
a minor bump will be added to the version. If you want to have control of the bump, you can run:
npm run bump:<major|patch|minor>
Also, a html tag will be added on the top of the page with the project version and build time.
It will be removed if you run the production build
Install dependencies:
npm install
Watch:
npm run watch
Build:
npm run build:dev
or
npm run build:prod
Config:
You can change some config options at build/config.json