Macでやってる人は多かったのですが、Windowsでnpm-scripts開発環境作ってる人が周りで少なかったのでその手順をご紹介します。
１．Node.jsのインストール
Windows10環境にNode.jsをインストールします。
以下のページでインストール手順を説明してます。
準備ができたら、
（※参考ページにもありますが以降、Windows PowerShellを起動してコマンドを実行してください）
開発ディレクトリにてPowerShellコマンド
npm init
を実行します。
実行後、
package name:
version:
description:
git repository:
keywords:
license:
を入力し、最後に
Is this OK? (yes):
で「yes」を入力すると「package.json」と「package-lock.json」ができます。
Windows10環境用のnpm-scripts独自テンプレートディレクトリ構造
以下の様なディレクトリ構造になります。
npm-scripts-win10
│ package-lock.json
│ package.json
│ postcss.config.js
│ rollup.config.js
├─dist
│ │ index.html
│ └─assets
│ ├─css
│ │ style.css
│ │ style.css.map
│ │ style.min.css
│ │ style.min.css.map
│ ├─images
│ │ 1.jpg
│ └─js
│ index.js
│ index.min.js
└─src
├─assets
│ ├─images
│ │ 1.jpg
│ ├─js
│ │ index.js
│ └─sass
│ style.scss
└─pages
index.html
２．cssファイルを出力
２-１．Sassをインストール
今回はnode-sassをインストールします。
PowerShellコマンド
npm install node-sass --save-dev
を実行するとインストールされます。
package.jsonのscriptsに
"css/sass": "node-sass src/assets/sass/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
を記述します。
src/assets/sass/style.scss
ファイルを作成し、PowerShellコマンド
npm run css/sass
を実行すると、
dist/assets/css/style.css
dist/assets/css/style.css.map
ファイルが出力されます。
２-２．出力されるcssにベンダープレフィックスの付与と圧縮
postcss-cli
cssnano
autoprefixer
postcss
をインストールします。
PowerShellコマンド
npm install postcss-cli postcss cssnano autoprefixer --save-dev
を実行するとまとめてインストールされます。
package.jsonのscriptsに
"css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
を記述します。
上記scriptsを実行するにはpostcss.config.jsファイルが必要になります。
ルートディレクトに
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['last 2 versions'],
cascade: false
}),
require('cssnano')({
preset: 'default',
})
]
}
ファイルを作成します。
PowerShellコマンド
npm run css/postcss
を実行すると、style.cssが圧縮された
dist/assets/css/style.min.css
dist/assets/css/style.min.css.map
ファイルが出力されます。
２-３．出力先cssディレクトリの削除と作成
cssファイル出力先cssディレクトリを作成します。
package.jsonのscriptsに
"clean/css": "rimraf dist/assets/css && cd dist/assets && mkdir css && cd ../../",
を記述します。
rimrafでcssディレクトリを削除し、dist/assetsに移動してcssディレクトリを作成、最後にルートディレクトリに戻ります。
PowerShellコマンド
npm run clean/css
を実行すると、cssディレクトリが削除され、cssディレクトリが再度作成されます。
Windowsの場合なぜかルートからcssを作成するディレクトリまでcdコマンドで移動しないと作成できませんでした。Macでは恐らくディレクトリ移動はせずルートパスを指定すれば指定箇所にcssディレクトリを作成できるかと思います。原因と解決方法はわかり次第追記します。
２-４．css（Sass）に関する一連の処理をまとめて実行
２-１.cssファイルの出力
２-２.ベンダープレフィックスの付与と圧縮
２-３.cssディレクトリの削除と作成
を行いましたが、一連の処理をまとめて実行する場合、流れ的に
２-３→２-１→２-３
となります。
一連の処理を実行するにあたり
npm-run-all
をインストールします。
PowerShellコマンド
npm install npm-run-all --save-dev
を実行するとインストールされます。
package.jsonのscriptsに
"css": "npm run clean/css && npm-run-all -s css/*",
を記述します。
上記パラメータより
-p が 並行処理
-s が 順次処理
となります。
clean/css
実行後、
css/*
関連の処理を順次全て実行します。
３．JavaScriptファイルを出力
３-１．rollup関連をインストール
PowerShellコマンド
npm install rollup --save-dev
を実行するとインストールされます。
あわせて、rollupのプラグイン
rollup-plugin-node-resolve
rollup-plugin-commonjs
rollup-plugin-babel
をインストールします。
PowerShellコマンド
npm install rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel --save-dev
を実行するとインストールされます。
@babel/core
@babel/preset-env
をインストールします。
PowerShellコマンド
npm install @babel/core @babel/preset-env --save-dev
を実行するとインストールされます。
ルートディレクトに
rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
export default {
output: {
format: 'iife',
dir: 'dist/assets/js'
},
plugins: [
resolve({ jsnext: true }),
commonjs(),
babel({
presets: [
[
"@babel/preset-env", {
"modules": false,
"targets": {
"browsers": ['last 2 versions']
}
}
]
],
babelrc: false
})
],
experimentalCodeSplitting: true
};
ファイルを作成します。
package.jsonのscriptsに
"js/rollup": "rollup src/assets/js/index.js -c=rollup.config.js",
を記述します。
３-２．JavaScriptファイルを圧縮、uglify-jsをインストール
PowerShellコマンド
npm install uglify-js --save-dev
を実行するとインストールされます。
package.jsonのscriptsに
"js/uglifyjs": "uglifyjs dist/assets/js/index.js -o dist/assets/js/index.min.js",
を記述します。
３-３．出力先jsディレクトリの削除と作成
jsファイル出力先jsディレクトリを作成します。
package.jsonのscriptsに
"clean/js": "rimraf dist/assets/js && cd dist/assets && mkdir js && cd ../../",
を記述します。
rimrafでjsディレクトリを削除し、dist/assetsに移動してjsディレクトリを作成、最後にルートディレクトリに戻ります。
PowerShellコマンド
npm run clean/js
を実行すると、jsディレクトリが削除され、jsディレクトリが再度作成されます。
３-４．JavaScript（js）に関する一連の処理をまとめて実行
jsディレクトリを作成し → jsファイルを出力 → jsファイルの圧縮を行います。
package.jsonのscriptsに
"js": "npm run clean/js && npm-run-all -s js/*",
を記述します。
clean/js
実行後、
js/*
関連の処理を順次全て実行します。
４．画像を出力先にコピー
４-１．cpxをインストール
PowerShellコマンド
npm install cpx --save-dev
を実行するとインストールされます。
package.jsonのscriptsに
"images/copy": "cpx src/assets/images/** dist/assets/images/",
を記述します。
PowerShellコマンド
npm run images/copy
を実行すると、src/assets/images/ディレクトリ配下のファイルが、dist/assets/images/ディレクトリにコピーされます。
４-２．出力先imagesディレクトリの削除と作成
画像ファイル出力先imagesディレクトリを作成します。
package.jsonのscriptsに
"clean/images": "rimraf dist/assets/images && cd dist/assets && mkdir images && cd ../../",
を記述します。
rimrafでimagesディレクトリを削除し、dist/assetsに移動してimagesディレクトリを作成、最後にルートディレクトリに戻ります。
PowerShellコマンド
npm run clean/images
を実行すると、imagesディレクトリが削除され、imagesディレクトリが再度作成されます。
４-４．画像ファイルコピーに関する一連の処理をまとめて実行
imagesディレクトリを作成し → imagesファイルをコピーします。
package.jsonのscriptsに
"images": "npm run clean/images && npm-run-all -s images/*",
を記述します。
clean/images
実行後、
images/*
関連の処理を順次全て実行します。
５．htmlファイルを出力先にコピー
package.jsonのscriptsに
"html/plain": "cpx src/pages/**/*.html dist/",
を記述します。
PowerShellコマンド
npm run html/plain
を実行すると、src/pages/ディレクトリ配下のhtmlファイルが、dist/配下にコピーされます。
htmlファイルコピーに関する一連の処理をまとめて実行
package.jsonのscriptsに
"html": "npm-run-all html/*",
を記述します。
html/*
関連の処理を順次全て実行します。
６．ファイルの監視
html、scss、js、画像ファイルが更新された稼働が監視します。
６-１．ブラウジングでサーバーを起動、browser-syncをインストール
PowerShellコマンド
npm install browser-sync --save-dev
を実行するとインストールされます。
package.jsonのscriptsに
"watch/server": "browser-sync start -s dist -f \"src, **/*.html, !node_modules/**/*\"",
を記述します。
PowerShellコマンド
npm run watch/server
を実行するすると、dist/ディレクトリ配下のindex.htmlファイルがブラウザで起動します。
起動したブラウザではdist/ディレクトリ配下のファイルが表示可能になります。
６-２．html、scss、jsを監視、watchをインストール
PowerShellコマンド
npm install watch --save-dev
を実行するとインストールされます。
package.jsonのscriptsに
"watch/css": "watch \"npm run css\" ./src/assets/sass",
"watch/js": "watch \"npm run js\" ./src/assets/js",
"watch/html": "watch \"npm run html\" ./src/pages",
を記述します。
src/ディレクトリ配下で更新があれば
npm run css
npm run js
npm run html
を実行します。
６-３．imagesを監視、onchangeをインストール
PowerShellコマンド
npm install onchange --save-dev
を実行するとインストールされます。
package.jsonのscriptsに
"watch/images": "onchange \"src/assets/images\" -e \"**/*.DS_Store\" -- npm run images",
を記述します。
images/ディレクトリ配下で更新があれば
npm run images
を実行します。
６-４．監視タスクを1つにまとめる
package.jsonのscriptsに
"watch": "npm-run-all -p watch/*"
を記述します。
PowerShellコマンド
npm run watch
を実行するとブラウジングサーバーが起動しhtml、scss、js、images全ての監視を行います。
７．Windows10環境用のnpm-scripts独自テンプレートまとめ
以下にアップしてます。
package.jsonのdevDependenciesに1～6でインストールしたモジュールが記述されてるので、
PowerShellコマンド
npm install
を実行すると、1～6でインストールしたモジュールがすべてnode_modules配下にインストールされます。
※流用される場合は自己責任でお願いします。
