Sprouts S2BS - (Static Site Build System)

Introduction

Sprouts is an automated build system for static websites. It automates repetitive build tasks and provides live browser reload and live test runner.

Installation

Download and unzip sprouts in an empty directory. Then open the terminal in the directory and run:

npm run sprouts

This modifies the package.json file using your input and installs the dependencies from it.

Requirements

gulp-scss-lint package requires Ruby and scss_lint.

gem install scss_lint

Getting Started

Sprouts workflow

Sprouts creates development and production builds. The development build contains source maps for both the JavaScript and Sass files. The production build is minified and supposed to be deployed.

Sprouts commands

Development

To create a development build and start a server at http://localhost:3000, execute:

npm run dev

Each time you save a source file in the src directory, the development build updates and the browser reloads.

Testing

To start testing, execute:

npm test

The test runner starts and runs the tests each time the source files are changed.

Production

To create a production build execute:

npm run build:prod

Directory structure

.
├── builds
    ├── dev
    └── production
├── gulpfile.js
├── package.json
├── README.md
├── requirements
├── sprouts
└── src
    ├── fonts
    ├── img
    ├── index.html
    ├── js
    │   ├── compiledTemplates
    │   ├── lib
    │   ├── main.js
    │   └── test
    │       └── demo.test.js
    └── scss
        ├── styles.scss
        └── vendors

builds — directory contains the development and production builds. The contents of the builds directory is deleted automatically.

gulpfile.js — directory contains the gulp tasks.

src/ — directory is for your code and assets.

src/js/lib — directory for your js modules.

src/js/test — directory for js tests. File names should end in .test.js.

src/scss — directory is for sass and scss styles. The vendors directory is for third party libraries, like Bootstrap.

requirements — directory contains a template requirements file for your app/website.

Built With

Sprouts uses:

• Automation:
  • gulp to automate the builds and asset management;
• JS Compilation:
  • browserify to bundle the js files;
• Sass Compilation:
  • gulp-sass
• Testing:
  • karma to run tests;
  • mocha as a test framework;
  • chai assertion library;
• Live Server:
  • browser-sync for live server;
• Linting:
  • See package.json for a complete list.

Author

Dimitar Danov

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

Sprouts is influenced gulp-starter (blendid), article.