Frontvue

Front-End plugable build system

Status:

• Documentation needs improvement, especially in the plugin authoring section.
• JavaScript related plugins are next to come.

Quickstart

# Go to your project's folder
mkdir my-project && cd my-project

# Set up your package.json and add frontvue
yarn init
# or
npm init

yarn add -D @frontvue/core
# or
npm i -D @frontvue/core

# Install plugin(s)
# e.g.
yarn add -D @frontvue/plugin-stylus

# Configure and copy boilerplate templates
frontvue init
# or
fv i

# Start build system in development mode
frontvue dev
# or
fv d

# Start build system in production mode
frontvue build
# or
fv b

# Run a specific sequence
# e.g. config, template, clean, process, watch
frontvue run <hook>
# or
fv r <hook>

# View available commands
frontvue --help
# or
fv -h

# You can combine shorthand commands:
# e.g. fv i, fv init, frontvue i, frontvue init
#      fv d, fv dev, frontvue d, frontvue dev
#      etc.

The Problem

Your put together your Front-End or Back-End build system, with Gulp or Webpack—or just pure npm/yarn scripts. At some point in the future you need a new feature, so of course, you add it in. Then you need something else that wasn't in the initial plan and sooner rather than later you'll end up with something that barely hangs by a thread and is a mess to update or maintain—not to mention trying to do all of this to someone else's code.

The Solution

The afore mentioned scenario lead to the creation of this tool: a build system that supports plugins, which allow you to easily bootstrap new projects by running configuration questionnaires, separate the things that should stay separated (e.g. CSS, HTML, JS, Vue.js, React, Electron, etc.) and individually maintain with ease.

Version control for each separate plugin will most likely make things easier as time goes by and you have to reopen old projects that use a deprecated boilerplate. Today you're writing your CSS with LESS, but maybe you'll want Stylus for a particular project in the future—and modifying your build system just for that particular project is a hassle.

Each plugin can register to specific hooks and perform actions by taking advantage of Gulp's synchronous and asynchronous taks sequences.

A plugin can copy its boilerplate template files to the current project, watch source files, process and output to the projects build folder.

Plugins for the Future

Here are some of the plugins that you'll be able to choose from and combine when starting a new project:

• Stylus CSS pre-processor (plugin available, but boilerplate template is w.i.p)
• HTML with a modern templating engine (Pug, Handlebars, etc.)
• Vue.js app boilerplate
• Typescript linting and compilation
• ES6+ linting and compilation with Babel
• Electron.js app boilerplate
• (More things planned, but I won't spoil the fun...)

Write your own plugins

Guide coming soon...

License

MIT