Prototyping Tool

Installation

npm install

Features

• ES6 syntax today: let Webpack do a dirty job.
• Live reload: track changes in SCSS, JS and PHP files.
• PostCSS and Autoprefixer: write only clean CSS.
• Quality: SCSS & JavaScript code sniffers (ESLint and StyleLint).
• Configurability: Babel, Bower, BrowsersList, ESLint, PostCSS and StyleLint configs are open to you.

Tasks

• npm start - starts a built-in PHP web-server that tracks changes of all sources.
• npm run build - compiles the code in production-ready mode.

Requirements

• PHP >= 5.4
• NPM >= 4
• Node.js

Notes

• Why my resulting JS is about 500 Kb when main.js is empty?

  The file is not exactly empty - it has import 'babel-polyfill' for adding all missing ES6 features. Running npm start your application starts in development mode when JS is not compressed. If you run npm run build that compiles production-ready code the total size will be around 100 Kb. You also may consider removing import 'babel-polyfill' to have compiled file empty, but missing (in various browsers) ES6 features will no longer be available.

• Where and how the development server starts?

  To up the server and allow you to code we're using PHP's built-in web-server that is available from 5.4. It'll be serving an application at http://127.0.0.1:9011 but you may change this in config.json. Nobody requires you to code in PHP, you can just simply add a plain HTML in dist/index.php and do your app only using JavaScript and/or SCSS.