novicell-build v0.0.1
🏗 Novicell Build !!BETA!!
WORK IN PROGRESS - Use with care, for now!
Novicell build is a framework for your frontend setup. This setup helps developers by automizing frontend workflow using certain technologies like NPM Scripts and Webpack. It includes PostCSS, Stylelint, Webpack, ESLint, Babel & Fractal. When setup, it also helps you optimize images, combine SVGs to a sprite, generate favicons, minifying/optimizing CSS and Javascript.
Table of content
Setup
- Download and install Node.js min. v. 8.9.2 (https://nodejs.org/en/download/)
- Clone the repo
git clone https://github.com/Novicell/novicell-frontend.git
. - Run
npm i
to install all dependencies. - Insert paths/variables to config.js Configuration and paths
- Run
npm run build:dev
to build the dist folder with all the minified/optimized files. - Run
npm run dev
to start watching file changes and continuous copilation.
Configuration and paths
The whole automized build system looks for paths and variables in order to work dynamically with different projects. Therefore, when starting new project edit options in 2 files (they are both in root directory):
config.js
package.json
config.js:
const dist = '/dist/'; // /dist by default. Folder where all the built files will go to (minified/optimized/compiled)
const sourceRootFolder = '/src/'; // /src by default. Folder where ATOM modules belong
const modulesDir = '/src/modules/**/*.js'; // Where JavaScript files should be placed. Add CSS files here if you want them as separate bundle
const assetsDir = '/assets/'; // Wheer you keep images, fonts, icons...
Look for "config" field in package.json and fill in:
"config": {
"DIST": "dist",
"CSS_MODULES": "src/modules/*.css"
},
NPM Scripts
These are most often used scripts:
- for development:
npm run dev
andnpm run build:dev
- for production:
npm run prod
andnpm run build:prod
But there are more available in this package (add npm run
before script name):
fractal
- Runs fractalfractal:build
- Builds static siteclean
- Deletes the files/directories defined in:gulp/config.js > pathsToClean
fonts
- Copies the fonts defined in:config.js
todist
images
- Minifies images defined in:config.js
todist/images
sprites
- Minifies all sprites fromassets/icons
todist/icons
.styles
- Minifies/lints and bundles CSS files defined in:src/modules
todist/styles
webpack
- Minifies/optimizes/lints and bundles JS files defined in:src/modules
todist/scripts
watch:styles
- Automatically bundles CSS changes while developingwatch:webpack
- Automatically bundles JS changes while developingdeploy
- Uploads file via FTP, configuration can be found ingulp/config.js
dev
- webpack:watch + styles:watch + fractalstart
- Equal todev
prod
- Same as dev but in production (extra optimization) but slower build,fix
- Fixes all possible linting for JavaScriptbuildDrupal
- (For drupal projects) Bundles JavaScript and CSS into same locationgenerateFavicon
- generates a favicon based on config/favicon/faviconDescription.json settings
Generate component
- To allow generating components write:
npm link
in the root dir. (only have to do it once) - Run
createComponent -t a -n my-component
This example will create files in /src/01-atoms/my-component
Argument | Name | Type | Description |
---|---|---|---|
-t | Type | a/m/o/p | Defines the type of your component, this decides where the component is created. a = atom, m = molecule, o = organism, p = page; |
-n | Name | string | Sets the filename of the component files, and a capitalized version will be used as title in the config file |
Additional
If you need more information, we have a Wiki that contains in-depth explanations:
- Home
- Adding new files
- Atomic guidelines
- BEM
- CSS (PostCSS)
- Fractal guidelines
- FAQ
- HTML + Handlebars
- VueJS Usage
- Prettier extension
- Netlify
Contribution
Looking to contribute something? Here's how you can help. Please take a moment to review our contribution guidelines in order to make the contribution process easy and effective for everyone involved.
License
The Novicell Frontend is licensed under the MIT license. (http://opensource.org/licenses/MIT)