Antoine dafb6b2af5 | ||
---|---|---|
artwork | ||
mockup | ||
src | ||
styleguide | ||
.babelrc | ||
.gitignore | ||
README.md | ||
config.js | ||
gulpfile.babel.js | ||
package-lock.json | ||
package.json |
README.md
BETG - assets
Bien Être au Travail à Grenay
This are the BETG assets powered by ZURB Foundation for Sites. It includes CSS style, JavaScript, fonts and images for the application and has a Gulp-powered build system to compile compressed assets for production use.
Installation
Requirements
On a Debian-based host - running at least Debian Jessie with backports, you will need the following packages:
- nodejs (>= 4)
If you are running Debian, do not rely on the npm
package which is either
outdated or removed - starting from Debian Stretch. Instead, here is a way
to install the last npm version as a regular user:
-
Install the other required packages:
nodejs-legacy
andnode-rimraf
. -
Set the npm's installation prefix as an environment variable:
$ export npm_config_prefix=~/.node_modules
-
Retrieve and execute the last npm's installation script:
$ curl -L https://github.com/npm/npm/raw/latest/scripts/install.sh | sh
-
Add the npm's binary folder to your environment variables:
$ export PATH="${HOME}/.node_modules/bin:${PATH}"
In order to keep those environment variables the next time you will log in, you can append the following lines to the end of your
~/.profile
file:if [ -d "${HOME}/.node_modules/bin" ] ; then PATH="${HOME}/.node_modules/bin:${PATH}" export npm_config_prefix=~/.node_modules fi
-
That's it! You can check that npm is now installed by running the following:
$ npm --version
Step by step
Application and build system dependencies are all defined in package.json
,
which will be used by npm
. Install them by running:
$ npm install
Usage
The build system defines two environments:
- development: define and work on the assets using the mockup to preview the results, imagine and draw the pages.
- production: generate the assets to be used by the real application, compressing them by the way.
If Gulp is installed on your system, you can run each task independently. There are 4 main tasks which can be run in any case just with npm.
Development
In development, the following commands can be used:
$ npm run build
: build the assets, the mockup and the styleguide under thebuild
folder.$ npm run server
: run thebuild
task, launch a local server to serve the mockup and watch for assets changes.
Production
In production, the following commands can be used:
$ npm run dist
: build the optimised and compressed assets for production usage and put them into the distribution folder (seeconfig.js
).$ npm run proxy
: run thebuild:dist
task, launch a proxy server to the application and watch for assets changes.$ npm run watch
: run thebuild:dist
task and watch for assets changes.
Structure
Overview
Here are some details about the package's files structure:
├── config.js
├── gulpfile.babel.js
├── README.md
├── package.json
├── mockup
│ ├── data
│ ├── helpers
│ ├── layouts
│ │ └── default.html
│ ├── pages
│ │ └── index.html
│ └── partials
├── src
│ ├── fonts
│ ├── img
│ ├── js
│ │ ├── app.js
│ │ └── lib
│ │ └── foundation.js
│ └── scss
│ ├── _settings.scss
│ ├── _zf_settings.scss
│ ├── app.scss
│ ├── base
│ │ ├── _base.scss
│ │ ├── _fonts.scss
│ │ ├── _icons.scss
│ │ └── _mixins.scss
│ ├── components
│ │ ├── _components.scss
│ │ └── _forms.scss
│ └── pages
│ ├── _base.scss
│ └── _pages.scss
└── styleguide
├── index.md
└── template.html
TODO: explain the main concepts and folders - e.g. src, mockup, styleguide
License
BETG is developed by Cliss XXI and licensed under the AGPLv3+.