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でサイト制作効率化
2.CSSのメタ言語Sass(SCSS)、LESSの完全入門
3.node-sass
4.ChromeのDeveloper ToolsでSassのデバッグ
5.CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入とお薦め設定
6.Node.jsのソース修正後、nodemonで自動再起動
7.browsersync

###コマンド

$ 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
  

テンプレートファイル

##注意事項

• 吐き出し先フォルダは事前に作成

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で憔悴したおっさんの話
npm-scripts で Web フロントエンド開発を管理する
【脱・gulp】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公式

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

nodebrewを使ってMac OSX環境のNode.jsを管理する

##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の環境構築をする

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

$ npm install

node_modulesがインストールされます。

実行

$ npm run all

終了

ctr + c