npm-scriptsで静的ページを量産するための最強タスクランナー

ちょっと大規模なwebサイトを作るときに便利なタスクランナーをnpm-scriptsで作成しました。
導入コスト低くて、タスクランナーのバージョンがあがって使えなくなるリスクなどが低くて、必要な機能を取捨選択できるカスタマイズ豊富な機能です。

##自動化する機能について
1.ejsでヘッダーやフッターなどの共通部分のテンプレート化
（ejsを使うとヘッダーやフッターなどの共通部分をテンプレート化できる）
2.scssをcssにコンパイル
3.cssを圧縮（１行になる）
4.scssでの修正場所がわかりやすいようにsource-map作成
5.オートプレフィクサー付与
6.コードを修正して保存すると画面が自動で更新される
7.開いた複数ブラウザ間でのスクロールやクリックなどの動きを同期でテストを容易に！
8.フォルダ分けでページごとに管理（folder_1、folder_2の配下にindex.ejs、content.ejsなど）
###解説
1.[EJSの基本 – EJSでサイト制作効率化](https://www.to-r.net/media/ejs-01/)
2.[CSSのメタ言語Sass(SCSS)、LESSの完全入門](http://qiita.com/ritukiii/items/67b3c50002b48c6186d6)
3.[node-sass](https://github.com/sass/node-sass)
4.[ChromeのDeveloper ToolsでSassのデバッグ](http://qiita.com/usk83/items/a80de1dc06b06abc4e63)
5.[CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入とお薦め設定](http://qiita.com/tonkotsuboy_com/items/377913c51b1ac00deffe)
6.[Node.jsのソース修正後、nodemonで自動再起動](http://qiita.com/twipg/items/cb969b335d66c4aee690)
7.[browsersync](https://www.browsersync.io/)

###コマンド
```
$ npm run all
```
これだけで全部自動で走ります！
※npm-run-allモジュールはwatchなどがうまく動かないらしいので、使っていません。ただ並列に繋げたのをallにしているだけです。


###package.json
```
{
  "name": "nagaokatakeshi",
  "version": "1.0.0",
  "description": "npm-scripts",
  "main": "index.js",
  "scripts": {
    "all": "npm run watch-css & npm run watch-ejs & npm run watch-autoprefixer & npm run start",
    "ejs": "ejs-cli --base-dir src/ejs/ '/**/**.ejs' --out ./public/",
    "watch-ejs": "nodemon -e ejs -x \"npm run ejs \"",
    "build-css": "node-sass --include-path scss src/scss/style.scss public/assets/css/style.css --output-style compressed --importer node_modules/node-sass-import --source-map public/assets/css/",
    "watch-css": "nodemon -e scss -x \"npm run build-css \"",
    "autoprefixer": "postcss --use autoprefixer -o public/assets/css/style.min.css public/assets/css/style.css",
    "watch-autoprefixer": "nodemon -e scss -x \"npm run autoprefixer \"",
    "start": "browser-sync start --server ./public/ --files='./public/**/*.html, ./public/assets/**/*'"
  },
  "author": "nagaoka",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "ejs-cli": "^2.0.0",
    "node-sass": "^4.5.0",
    "nodemon": "^1.11.0",
    "autoprefixer": "^6.7.7",
    "node-sass-import": "^1.1.1",
    "postcss-cli": "^3.1.1"
  }
}
```
4/14 cssをwatchしていたのをscssのみに変更。
プラグインをautoprefixer-cliをやめて、postcss-cliのautoprefixerに変更しました。
ループ問題を解決するため、autoprefixerで吐き出すheadで読み込むcssをstyle.min.cssにしています。
style.scss→（node-sassでコンパイル）→style.css→（autoprefixer作動）→style.min.css
###フォルダ階層
```
site
├── package.json
├── public
│   ├── assets
│   │   ├── css
│   │   │   ├── reset.css
│   │   │   ├── style.css
│   │   │   └── style.css.map
│   │   ├── img
│   │   │   └── common
│   │   │       └── **.svg
│   │   └── js
│   │       └── **.js
│   ├── folder_1
│   │   └── index.html
│   ├── folder_2
│   │   └── index.html
│   └── index.html
└── src
    ├── common
    │   └── **.ejs
    ├── ejs
    │   ├── folder_1
    │   │   └── index.ejs
    │   └── folder_2
    │       └── index.ejs
    └── scss
        ├── style.scss
        └── _head.scss
  
```
[テンプレートファイル](https://github.com/takeshi-nagaoka/npm-scripts/tree/master/template)

##注意事項
- 吐き出し先フォルダは事前に作成

```
public/folder_1
public/folder_2
```

- 記述ミスやフォルダがないなどのエラーが一つでもあると動かない。

ターミナルでERRORとでていたら内容を読んで対応しよう。scssのinportがないとか、scssが間違っていたり、吐き出し先のフォルダがなかったりということが多いです。

- public直下のindex.htmlは自動化未対応。
package.jsonに追記すればできます。


###nodeのバージョン
v6.10.0

##実装方法
package.jsonと同じ階層で

```
$ npm install
```
node_modulesがインストールされます！準備ok!


実行

```
$ npm run all
```
これで動くはず・・・
最初はエラーがよく出るので、node_modulesを削除してやり直したりしていると動くようになります。
nodeの導入からの解説はHomebrewのインストールへ。

##なぜgulpではなくnpm-scriptsなのか？
[Grunt/Gulpで憔悴したおっさんの話](https://t32k.me/mol/log/npm-run-script/)
[npm-scripts で Web フロントエンド開発を管理する](http://akabeko.me/blog/2016/10/npm-scripts-web-front-end-development/)
[【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る](http://techblog.kayac.com/2016-12-22_npm-scripts)

ではnpm-scriptsを使うための準備からみていきましょう。

#npm-scriptsを使うための準備

##Homebrewのインストール
（最近はHomebrewが不要でnodebrewを直接インストールできるらしい）

ターミナルを起動し下記コマンドを打つ
`$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`

command not foundになったら、Homebrewがすでに入っているのかもしれません。
`$ brew -v`で調べましょう。
よくわからないエラーが出てきた時は、エラー内容でググるとだいたい原因と解決方法が出てきます。もしくは一旦Homebrewをアンインストールしてやり直すのが 吉。

正常に終了すればHomebrewのインストール完了です
[Homebrew公式](https://brew.sh/index_ja.html)

##nodebrewのインストール
インストール
`$ brew install nodebrew`
ファイルのパスを通す
`$ export PATH=$HOME/.nodebrew/current/bin:$PATH`
バージョン確認
`$ nodebrew -v`
バージョンが表示されていればok

[nodebrewを使ってMac OSX環境のNode.jsを管理する](http://mae.chab.in/archives/2880)

##Node.jsのインストール


最新のnode.jsをインストールする場合
`$ nodebrew install-binary v6.10.0`

上記でインストールした中から使用するバージョンを選択する
`$ nodebrew use v6.10.0`

インストールされたか確認する
`$ node -v`
`$ npm -v`
バージョンが表示されたらインストール完了。node.jsをいれるとnpmも自動的にインストールされる

[MacにNode.jsの環境構築をする](http://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)

nodeとnpmがインストールできれば、
まず、プロジェクトのためのディレクトリを作成。
作成したディレクトリに移動してからpackage.jsonを作成。
その後、

```
$ npm install
```
node_modulesがインストールされます。


実行

```
$ npm run all
```

終了

`ctr + c`