Web starter kit
Bramework is a web starter kit to build simple websites. You can build only the assets or build full websites, also integrate it with other tools like Eleventy or barcia/wp.
- Clone the repository:
git clone https://github.com/barcia/bramework.git
- Install the NPM packages:
npm install
- Start to develop with
npm start
or build your project withnpm run build
.
By default, bramework only build the assets (/src/scss/
, /src/js/
and /src/img/
) and can work with other static site generators like Eleventy (included by default).
By default build only one css and one js file, but you can pass more entry files in gulpfile.js
If you add the option --web
in the start or build task in package.json
, also copy the content in /src/web/
to /dist/
. This is useful to use it with simple html (without site generators) or to build, for example, WordPress templates.
Use it only if you are not using a static site generator.
"scripts": {
"start": "gulp watch --web",
"build": "gulp build --web",
"test": "gulp test"
},
You can also pass the options directly when call the task:
npm run build -- --web
If you want to enable live server with live reload, you should pass the --server
option in the start task.
The
--serve
option already includes the--web
option.
Can also sync with a existing host (For example, if you are building a WordPress theme with barcia/wp) passing the proxy url: --proxy=localhost:8080
.
"scripts": {
"start": "gulp watch --serve --proxy=localhost:8080",
"build": "gulp build",
"test": "gulp test"
},
-
start: Build all assets in development mode and watch changes on then.
--web
: Works also with the content in/src/web/
--serve
: Start a live server. Already includes the--web
option.--proxy=localhost:8080
: Redirect the live server to passed URL.
-
build: Test and build all assets in production mode.
--web
: Works also with the content in/src/web/
--force
: Force the build without ignoring the tests
-
test: Pass all linters and tests indicated in
gulpfile.js
By default this project installs Eleventy, a simple Node based static site generator. Read his documentation if you want to work with him.
Eleventy creates his own live server, so you must configure it in his configuration file, .eleventy.js
.
IMPORTANT. If you use Eleventy, you can not use the
--web
or--serve
options.
Change the start and build tasks to work with Eleventy.
"scripts": {
"start": "gulp watch & eleventy --serve",
"build": "gulp build & eleventy",
"test": "gulp test"
},
Developed by Iván Barcia
Project tested on BrowserStack
This project is under MIT License