Create development guide

[ajusa]

Needs to include how to get set up with lit's build system (gulp), and how to extend and modify lit with minimal hassle. This should go on the readme, with a link from the website.

[JPeer264]

As a sidenote. It would be great if npm scripts such as npm run watch or npm run build exist. This will avoid to install gulp globally :)

[ajusa]

For now, I will ask users to install gulp, similar to what Spectre does. It should be a simple npm install in the source directory, and then a gulp to build everything, including the gzip, or a gulp watch to have the minified css build on save.

[ajusa]

It is a global install for now, I will figure out how to create scripts that will allow users to do a npm run watch

Thanks for the suggestion, it wouldn't have occurred to me.

[JPeer264]

It's pretty straight forward. E.g. in your devDependencies you have installed gulp. This allows you to run the cli within your npm scripts - it is kind of an own ecosystem.

So now, as you installed gulp in your devDependencies, dependencies will also work, it is available in the node_modules. Now you can write following into your package.json:

{
  "scripts": {
    "watch": "gulp watch",
    "build": "gulp"
  }
}

As you see in the "key" section there is the identifier how you run the npm script: npm run KEY_IDENTIFIER (e.g. npm run build). In the "value" section you add bash scripts, so that what you always wrote into your shell. Hope this clarified, how you use them, and how you add new scripts.

Why?

1. You do not need developers to install things globally on their machine (which saves time sometimes)
2. If developers are using different versions globally, you can still have another version in your project, which guarantees that developers are using the dependencies you allowed

[ajusa]

I tried doing that, but gulp wasn't accessible though node, unless I do a global install. Could you maybe make a pull request? I don't know if I am missing something. Relevant part of package.json:

"scripts": {
    "watch": "gulp watch",
    "build": "gulp"
  },
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-clean-css": "^3.9.2",
    "gulp-gzip": "^1.4.1",
    "gulp-postcss": "^7.0.1",
    "postcss-css-variables": "^0.8.0"
  },