generator-scaffold

Generator to automate the most common tasks in day-to-day of a Front End project

Usage no npm install needed!

<script type="module">
  import generatorScaffold from 'https://cdn.skypack.dev/generator-scaffold';
</script>

README

NPM version NPM downloads License Tyoe Dependency Status Build Status

Scaffold

Yeoman + Grunt + Bower

Introduction

Scaffold is a generator to automate the most common tasks in day-to-day of a Front End project. He uses some tools like Yeoman, Grunt e Bower. This generator is all-in-one and have six versions: Mobile, Web, Responsive, Single Page, Single Page Mobile and Single Page Responsive. So you don't need to download each version to scaffolding your project. Just select which version is perfect for you and let the generator do all the stuff.

Features

  • Built-in preview server with cross device Browser Sync
  • HTML Templating
  • CSS Autoprefixing
  • Automatically compile LESS
  • Automatically lint javascript
  • Automatically wire up your Bower components
  • Image Optimization
  • Leaner Modernizr builds
  • Minify HTML, XML, CSS and JS
  • Configure a new git repository (optional)
  • Increase the project version (optional)
  • Include AngularJS
  • And more...

Getting Started

*If you are new to Yeoman, you will find a lot of answers to your questions in their getting started guide.

  • Install: npm install -g generator-scaffold
  • To init your project: yo scaffold and follow all the steps on the screen.
  • To start the server and develop your app: yo scaffold:run
  • To build your project: yo scaffold:build
  • To view the build in browser: yo scaffold:run build

Scaffold

Install dependencies from a existent project

If a previous project was built using Scaffold you will need to install all dependencies locally to run. For this you just need to execute yo scaffold:install and the generator will install all NPM packages and all Bower dependencies.

Automate the creation of pages

The Scaffold has a sub generator to help you to create files more quickly.
Just execute yo scaffold:create and follow the steps to generate a new blank page, with a new .less and .js (optional). Only works with non single page projects.

Grunt tasks

This generator make use of various tools to improve your web development workflow when using Grunt:

Folder structure

The Scaffold uses some default folders to work. These folders follow a pattern and cannot be renamed.

Folder Structure

  • dev: All development files without any compression, including HTML templates, images, LESS files and JS.

  • staging: All stage files. Everytime that you start the server, the Scaffold generator will generate all needed files for view in browser. That is the version of your project without any optimization. The code you see on the browser is exactly the same inside this folder. Is important that you do not delete this because bower put all dependencies inside this folder.

  • build: Every build that you do the generator put all files on this folder. These files were highly optimized using several Grunt tasks and are ready to be published on your web server.

  • grunt: The core of Scaffold. All tasks and options used for Grunt. Is highly recommended that you do not modify this files.

License

MIT