Skip to content

Commit

Permalink
fix npm start to exec css-watch and js-watch using npm-run-all (#9)
Browse files Browse the repository at this point in the history
* fix npm start to exec css-watch and js-watch using npm-run-all

* Add some beginner's notes
  • Loading branch information
frispete authored and jgthms committed Aug 22, 2018
1 parent 0e95064 commit 98e91aa
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 2 deletions.
69 changes: 69 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,75 @@ Apart from `package.json`, the following files are included:
* `_sass/main.scss` a basic SCSS file that **imports Bulma** and explains how to **customize** your styles, and compiles to `css/main.css`
* `_javascript/main.js` an ES6 JavaScript that compiles to `lib/main.js`


## Get your feet wet

This package is meant to provide a **good starting point** for working with Bulma.

When installing this package with the commands above, it landed in `$HOME/node_packages/bulma-start`.
In order to use it as a **template** for your **project**, you might consider copying it to a better suited location:

```sh
cd $HOME/projects
cp -a $HOME/node_modules/bulma-start my-bulma-project
```

Alternatively, you could do something similar with a GitHub clone as well.

```sh
cd $HOME/projects
git clone https://github.com/jgthms/bulma-start
mv bulma-start my-bulma-project
rm -rf my-bulma-project/.git # cut its roots
```

Now, that you prepared the groundwork for your project, set up Bulma and run the watchers:

```sh
cd my-bulma-project
npm install
npm start
```

As long as `npm start` is running, it will **watch** your changes. You can edit `_sass/main.scss` and `_javascript/main.js` at will. Changes are **immediately** compiled to their destinations, where `index.html` will pick them up upon reload in your browser.

Some controlling output is written to the `npm start` console in that process:

```sh
_javascript/main.js -> lib/main.js

=> changed: $HOME/projects/start-with-bulma/_sass/main.scss
Rendering Complete, saving .css file...
Wrote CSS to $HOME/projects/start-with-bulma/css/main.css
```

Use `npm run` to show all available commands:

```sh
Lifecycle scripts included in bulma-start:
start
npm-run-all --parallel css-watch js-watch

available via `npm run-script`:
css-build
node-sass _sass/main.scss css/main.css
css-deploy
npm run css-build && npm run css-postcss
css-postcss
postcss --use autoprefixer --output css/main.css css/main.css
css-watch
npm run css-build -- --watch
deploy
npm run css-deploy && npm run js-build
js-build
babel _javascript --out-dir lib
js-watch
npm run js-build -- --watch
```

If you want to learn more, follow these links: [Bulma homepage](http://bulma.io) and [Documentation](http://bulma.io/documentation/overview/start/).


## Copyright and license

Code copyright 2017 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma-start/blob/master/LICENSE).
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"babel-preset-es2015-ie": "^6.7.0",
"bulma": "^0.6.0",
"node-sass": "^4.5.3",
"postcss-cli": "^4.1.1"
"postcss-cli": "^4.1.1",
"npm-run-all": "^4.1.3"
},
"scripts": {
"css-deploy": "npm run css-build && npm run css-postcss",
Expand All @@ -27,6 +28,6 @@
"deploy": "npm run css-deploy && npm run js-build",
"js-build": "babel _javascript --out-dir lib",
"js-watch": "npm run js-build -- --watch",
"start": "npm run css-watch | npm run js-watch"
"start": "npm-run-all --parallel css-watch js-watch"
}
}

0 comments on commit 98e91aa

Please sign in to comment.