1.1.9 • Published 8 years ago
generator-simple-boilerplate v1.1.9
A simple frontend boilerplate to build professional web projects easily and quickly.
Features
Automation
- Gulp - Task Runner.
- Bower - Package Manager.
- Browsersync - Watch project changes and updates browsers.
HTML
- Nunjucks - Template Engine.
CSS
Javascript
- Browserify - CommonJS Modules.
- Karma - Javascript Test Runner.
- Jasmine - Javascript Test Framework.
Instalation
You will need to install NodeJS.
# Install Yeoman
$ npm install -g yo
# Install the Generator
$ npm install -g generator-simple-boilerplate
$ mkdir project
$ cd project
$ yo simple-boilerplate
# Start a mini server to view the project and watch their changes on http://localhost:3000/
$ gulp watch
Folder Structure
Basically the development files are in the src folder and compiled files go directly to assets.
├── assets
│ ├── css
│ │ ├── main.css
│ ├── fonts
│ ├── images
│ │ ├── favicon
│ │ ├── logo.png
│ ├── javascript
│ │ ├── build.js
├── src
│ ├── images
│ │ ├── favicon
│ │ ├── logo.png
│ ├── scripts
│ │ ├── modules
│ │ ├── my-module.js
│ │ ├── main.js
│ ├── styles
│ │ ├── base
│ │ │ ├── base.styl
│ │ │ ├── fonts.styl
│ │ ├── config
│ │ │ ├── functions.styl
│ │ │ ├── variables.styl
│ │ ├── layout
│ │ │ ├── l-footer.styl
│ │ │ ├── l-header.styl
│ │ ├── modules
│ │ │ ├── animations.styl
│ │ │ ├── container.styl
│ │ │ ├── forms.styl
│ │ ├── vendor
│ │ │ ├── normalize.styl
│ │ ├── main.styl
│ ├── views
│ │ ├── includes
│ │ │ ├── footer.html
│ │ │ ├── header.html
│ │ │ ├── metatags.html
│ │ │ ├── scripts.html
│ │ │ ├── styles.html
│ │ ├── layouts
│ │ │ ├── default.html
│ │ ├── pages
│ │ │ ├── contact
│ │ │ ├── index.html
│ │ │ ├── index.html
├── tests
│ ├── module.spec.js
├── .csslintrc
├── .editorconfig
├── .gitignore
├── bower.json
├── gulpfile.js
├── karma.conf.js
├── contact
│ ├── index.html
├── index.html
├── package.json
├── README.md
Available Tasks
gulp
orgulp watch
Start watch for changes and server with Browsersync.gulp build
Run all development tasksgulp build --production
Run all development tasks and minify all files for production.gulp build:javascript
Create and lint Javascript bundle.gulp build:styles
Create and lint css files.gulp compile:template
Compile Nunjucks template.gulp compile:styles
Compile Stylus.gulp optimize:images
Optimize all images.gulp lint:javascript
Lint Javascript files.gulp bundle:javascript
Create Javascript bundle.