Skip to content
Yeoman generator for creating static website/templates using Sass, Pug, Gulp, Bower used by Lighting Beetle.
JavaScript ApacheConf HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
test
.gitignore
.jshintrc
.travis.yml
LICENSE
package.json
readme.md

readme.md

Generator LB

Build Status

Yeoman generator for creating static website/templates using Sass, Rollup, Pug, and Gulp, used by Lighting Beetle.

Prereqisities

(sudo) npm install -g yo
(sudo) npm install -g gulp

Built-in tools

  • Gulp (Task Manager)
  • Sass (LibSass) (CSS Preprocessor)
  • Pug (HTML templating)
  • ES2016 compilation to ES5 using Babel
  • ES2015 modules bundling with Rollup.js
  • Bootstrap (Frontend framework) (Sass version) (optional)
  • Foundation (Frontend framework) (optional)
  • Modernizr (HTML5/CSS3 features detection) (optional)
  • jQuery 2.x/3.x(feature-rich JavaScript library) (optional)
  • LightingFly (SCSS mixins library) (optional)

Built-in features

  • CSS autoprefixing (autoprefixer)
  • Webserver with liverelaod (browserSync)
  • Pug compilation
  • Sass compilation
  • YAML/JSON data sources for templates
  • CSS/JS concating and minification (cssnano)
  • JS linting (eslint with airbnb config)
  • ES2016 transpiling (babel)
  • ES2015 modules bundling (rollup)
  • Image optimaliztion (imagemin)
  • Lean Modernizr builds
  • Improved file caching
  • Deploying via rsync/sftp
  • Multi-language templates support (optional)
  • Advanced routing in development

Installation guide

  1. Install via npm (sudo) npm install -g generator-lb
  2. Create folder for your project and run inside: yo lb
  3. Complete installation
  4. ?
  5. Profit

Usage

Gulpfile contains some useful tasks:

  1. gulp serve for development with livereload
  2. gulp build for building from source to dist folder
  3. gulp serve:dist for build preview
  4. gulp deploy for deploying on dev server via sftp (config is in .env file)
  5. gulp deploy:prod for deploying on prod server via sftp (config is in .env file)
  6. gulp help for information about other tasks

Folder structure

.
+-- app
    +-- fonts
    +-- icons
    +-- images
    +-- scripts
        +-- external
            +-- jquery.js
        +-- modules
        +-- plugins
        +-- main.js
    +-- styles
        +-- modules
        +-- plugins
        +-- main.scss
    +-- views
        +-- data
            +-- index.[json/yaml]
        +-- helpers
        +-- layouts
            +-- _default.jade
        +-- modules
            +-- _footer.jade
            +-- _header.jade
        +-- index.jade
    +-- .htaccess
    +-- favicon.ico
    +-- robots.txt
+-- bower_components
+-- dist
+-- gulp
    +-- tasks
        +-- browserSync.js
        +-- build.js
        +-- clean.js
        +-- copy.js
        +-- default.js
        +-- deploy.js
        +-- images.js
        +-- modernizr.js (optional)
        +-- rev.js
        +-- scripts.js
        +-- serve.js
        +-- styles.js
        +-- templates.js
        +-- watch.js
    +-- utils
        +-- buildHelper.js
        +-- handleError.js
    +-- config.js
+-- node_modules
+-- .babelrc
+-- .editorconfig
+-- .env
+-- .gitattributes
+-- .gitignore
+-- .eslintrc
+-- .yo-rc.json
+-- gulpfile.js
+-- package.json

Notes

  • Gulp tasks can be configured inside config.js file in gulp folder.
  • Data for jade templates can by stored as YAML/JSON objects inside. app/views/data/
  • Build can be forced with gulp build --force

Contributors


Lighting Beetle

You can’t perform that action at this time.