Component Driven Static Website Development Tool
npm install adm-dev-kit
npm i —save adm-dev-kit
`#### Example of Project Structure
`
adm-dev-kit-project-example/
|- src/
|- index/
|- index.pug
|- views
|- gulpfiles.js
|- server.js
`#### Create server file:
`js
//server.js
const app = require('adm-dev-kit');app.server({
src: './src', // working directory
views: './views' // express views folder
});
`#### Create build file:
`js
//gulpfile.js
const app = require('adm-dev-kit');app.build({
src: './src', // working directory
dest: './dest' // build directory
});
`#### Project’s Source Files
In project’s root folder create
`src/` folder for project’s source files and `view/` folder for view.Create
`index.pug` inside `src/` folder it will represent main page of the project.#### Adding JavaScript
JSPM is used as main JS bundler. To add any JS file use JSPM’s
`System.import`:
`
p.hello-world Hello, World!
script System.import('hello-world.js')
`
Important to know path to any js file should be relative to `src/` folder:
`
src/
|- index
|- hello-world
|- hello-world.pug
|- hello-world.js
|- index.pug
index.pug:
...
include index/hello-world/hello-world.pug
...hello-world.pug:
script System.import('index/hello-world/hello-world/hello-world.js')
`#### Adding CSS
PostCSS is used as main pre and post processor for CSS.
To add CSS just use
`link` tag:
`
link(href="hello-world.css" type="text/css" rel="stylesheet")
p.hello-world Hello, World!
`
Important to know path in `href` should be relative to `src/` folder:
`
src/
|- index
|- hello-world
|- hello-world.pug
|- hello-world.css
|- index.pug
index.pug:
...
include index/hello-world/hello-world.pug
...hello-world.pug:
link(href="index/hello-world/hello-world/hello-world.css" type="text/css" rel="stylesheet")
`#### Running Server
To run server use:
`
npm start
`
After server has started jspm file will be generated automatically to `src/` folder. Don’t delete this file, it is required for the build.#### Build
To build project just run:
`
gulp
``