This is just a simple, extendable skeleton for creating a brand new frontend website.
Key features:
- ES2015 via Babel
- SCSS
- browser-sync
- Clone the repo
- Change details (name, version) in
package.json
. - Remove the git origin:
git remote remove origin
npm install
(and maybenpm update
if you run into problems)
Now you can run gulp serve
, edit your files and watch browser-sync do its magic.
This is just the basic structure for HTML5.
Here you can put your JavaScripts and SCSS. You can also use sub-directories to keep things organized. JavaScript files will be compiles into one file (dist/js/main.js
) by Browserify, Sass files will be compiled as-is.
npm install --save jquery
And in your script:
import $ from "jquery";
$('<h1>').text('Yay!').appendTo('body');
By default, Browserify will add source maps to the output and Sass's output style will be the default nested one. To disable source maps and enable CSS compression run gulp --production
.
There's a WIP version of this repo which uses rollup.js instead of Browserify. You can find it in its own branch.