ちょっと大規模な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も自動的にインストールされる
nodeとnpmがインストールできれば、
まず、プロジェクトのためのディレクトリを作成。
作成したディレクトリに移動してからpackage.jsonを作成。
その後、
$ npm install
node_modulesがインストールされます。
実行
$ npm run all
終了
ctr + c