An npm based frontend build system using Less, ES6 with webpacks and Pug
ISC License
simplyEvil is a starter project template using a simple npm script based build system. There are times when setting up a build system like gulp or grunt is a bit heavy. That is where simplyEvil comes in. It gives you all the goodies you need to get started, and is pretty light.
After pulling down this repo, the git history for the build system resides in the project. To remove the history and start fresh, a zap
script is included. When you run zap
, it will remove the git history, set up a new history and commit the initial build system to your new repo. You will need to set up your remote branch yourself. To run this, just run the following inside of your new project directory:
$ npm run zap
Now that you have made the project your own, it is time to pull down the dependencies. All you need to do, using the package manager of your choosing (npm
is shown here):
$ npm install
After everything is installed, may take a while depending on what you have cached/built through npm
, you can start the development server by running:
$ npm start
This will compile everything (html, js and css) and start a browser-sync instance available at:
http://localhost:1337
The start command will also set up watches on the source files for: html, css and javascript. What that means is that when you edit a file in the dev/
directory, the appropriate asset (html, css or js) will be recompiled and because of browser-sync the browser you are developing in will reload with the new changes.
This build system will compile the following with one of two flavors (development and distribution):
src/pages/
.src/less/main.less
so make sure to import your application specific *.less
files there. Vendor prefixing is provided through less-plugin-autoprefix that is setup to provide vendor prefixes for the lastest two versions of all the major browsers. Just write your CSS as it would be expected without prefixing and you will be good(display: flex;
). Also I have included some of the helpers and vars I use in my projects for quick and easy layout, colors typography. Not much to get in the way, and it is easy to wipe if you don't want to use them. DO NOT remove the entry point file.
src/js/
(either *.js
or *.jsx
for you React folks out there as babel does JSX out of the box). The entry point for the app is the file src/js/index.js
. From there using the default CommonJS interface of webpack, you just need to import Blah from 'path/to/blah'
and the build system will include that file in your final bundle. As a side note, your development code will be eval'ed and an inline source map is created, so you can see where exceptions have occurred in your original source (in the browser under sources, available in the webpack tree item). DO NOT remove the entry point file.
site/
using browser-sync. Once you make changes to any of your source files, a build will be triggered and the new assets update in the site/
folder. Once those files are changed, your open web browser will refresh itself with the changes.In this simple build system, we are using npm to synchronize the build process (as opposed to using a grunt or gulp system). That means all commands you would use to interact with the build system will be run through npm. Some commands are against baked in scripts in npm and other are not. That is why you will see some commands that use the command run
in the command. Also you MUST USE npm -v >= 2.0.
$ npm start
This is the main command used in development. This command does the following:
dev/
folder.dev/
folder exists.dev/
.This command can be stopped in the terminal with a simple Ctrl+c
. There is a browser-sync web interface for tweaking the synchronization between browsers. It is available at http://localhost:3030
. Read up on the browser-sync docs for all the fun you can have with it.
$ npm run build
This is the command to run when you are releasing your awesome into the universe. It provides production ready assets for tagging on the githubs. It does a lot like the npm start
command but in different ways, and it does not start a development server. It goes like this:
dist/
folder.dist/
folder exists.dist/
. These assets will be stripped of any dead code paths, uglified and minified.