npm-scripts

Windowsでnpm-scripts開発環境~独自テンプレートを作ってみた

Macでやってる人は多かったのですが、Windowsでnpm-scripts開発環境作ってる人が周りで少なかったのでその手順をご紹介します。

1.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

2.cssファイルを出力

2-1.Sassをインストール

今回はnode-sassをインストールします。
PowerShellコマンド

npm install node-sass --save-dev

を実行するとインストールされます。

package.jsonscripts

"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
ファイルが出力されます。

2-2.出力されるcssにベンダープレフィックスの付与と圧縮

postcss-cli
cssnano
autoprefixer
postcss
をインストールします。
PowerShellコマンド

npm install postcss-cli postcss cssnano autoprefixer --save-dev

を実行するとまとめてインストールされます。

package.jsonscripts

"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
ファイルが出力されます。

2-3.出力先cssディレクトリの削除と作成

cssファイル出力先cssディレクトリを作成します。

package.jsonscripts

"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ディレクトリを作成できるかと思います。原因と解決方法はわかり次第追記します。

2-4.css(Sass)に関する一連の処理をまとめて実行

2-1.cssファイルの出力
2-2.ベンダープレフィックスの付与と圧縮
2-3.cssディレクトリの削除と作成
を行いましたが、一連の処理をまとめて実行する場合、流れ的に
2-3→2-1→2-3
となります。

一連の処理を実行するにあたり
npm-run-all
をインストールします。

PowerShellコマンド

npm install npm-run-all --save-dev

を実行するとインストールされます。

package.jsonscripts

"css": "npm run clean/css && npm-run-all -s css/*",

を記述します。
上記パラメータより
-p が 並行処理
-s が 順次処理
となります。
clean/css
実行後、
css/*
関連の処理を順次全て実行します。

3.JavaScriptファイルを出力

3-1.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.jsonscripts

"js/rollup": "rollup src/assets/js/index.js -c=rollup.config.js",

を記述します。

3-2.JavaScriptファイルを圧縮、uglify-jsをインストール

PowerShellコマンド

npm install uglify-js --save-dev

を実行するとインストールされます。

package.jsonscripts

"js/uglifyjs": "uglifyjs dist/assets/js/index.js -o dist/assets/js/index.min.js",

を記述します。

3-3.出力先jsディレクトリの削除と作成

jsファイル出力先jsディレクトリを作成します。

package.jsonscripts

"clean/js": "rimraf dist/assets/js && cd dist/assets && mkdir js && cd ../../",

を記述します。
rimrafでjsディレクトリを削除し、dist/assetsに移動してjsディレクトリを作成、最後にルートディレクトリに戻ります。

PowerShellコマンド

npm run clean/js

を実行すると、jsディレクトリが削除され、jsディレクトリが再度作成されます。

3-4.JavaScript(js)に関する一連の処理をまとめて実行

jsディレクトリを作成し → jsファイルを出力 → jsファイルの圧縮を行います。

package.jsonscripts

"js": "npm run clean/js && npm-run-all -s js/*",

を記述します。
clean/js
実行後、
js/*
関連の処理を順次全て実行します。

4.画像を出力先にコピー

4-1.cpxをインストール

PowerShellコマンド

npm install cpx --save-dev

を実行するとインストールされます。

package.jsonscripts

"images/copy": "cpx src/assets/images/** dist/assets/images/",

を記述します。

PowerShellコマンド

npm run images/copy

を実行すると、src/assets/images/ディレクトリ配下のファイルが、dist/assets/images/ディレクトリにコピーされます。

4-2.出力先imagesディレクトリの削除と作成

画像ファイル出力先imagesディレクトリを作成します。

package.jsonscripts

"clean/images": "rimraf dist/assets/images && cd dist/assets && mkdir images && cd ../../",

を記述します。
rimrafでimagesディレクトリを削除し、dist/assetsに移動してimagesディレクトリを作成、最後にルートディレクトリに戻ります。

PowerShellコマンド

npm run clean/images

を実行すると、imagesディレクトリが削除され、imagesディレクトリが再度作成されます。

4-4.画像ファイルコピーに関する一連の処理をまとめて実行

imagesディレクトリを作成し → imagesファイルをコピーします。

package.jsonscripts

"images": "npm run clean/images && npm-run-all -s images/*",

を記述します。
clean/images
実行後、
images/*
関連の処理を順次全て実行します。

5.htmlファイルを出力先にコピー

package.jsonscripts

"html/plain": "cpx src/pages/**/*.html dist/",

を記述します。

PowerShellコマンド

npm run html/plain

を実行すると、src/pages/ディレクトリ配下のhtmlファイルが、dist/配下にコピーされます。

htmlファイルコピーに関する一連の処理をまとめて実行

package.jsonscripts

"html": "npm-run-all html/*",

を記述します。
html/*
関連の処理を順次全て実行します。

6.ファイルの監視

html、scss、js、画像ファイルが更新された稼働が監視します。

6-1.ブラウジングでサーバーを起動、browser-syncをインストール

PowerShellコマンド

npm install browser-sync --save-dev

を実行するとインストールされます。

package.jsonscripts

"watch/server": "browser-sync start -s dist -f \"src, **/*.html, !node_modules/**/*\"",

を記述します。

PowerShellコマンド

npm run watch/server

を実行するすると、dist/ディレクトリ配下のindex.htmlファイルがブラウザで起動します。
起動したブラウザではdist/ディレクトリ配下のファイルが表示可能になります。

6-2.html、scss、jsを監視、watchをインストール

PowerShellコマンド

npm install watch --save-dev

を実行するとインストールされます。

package.jsonscripts

"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
を実行します。

6-3.imagesを監視、onchangeをインストール

PowerShellコマンド

npm install onchange --save-dev

を実行するとインストールされます。

package.jsonscripts

"watch/images": "onchange \"src/assets/images\" -e \"**/*.DS_Store\" -- npm run images",

を記述します。
images/ディレクトリ配下で更新があれば
npm run images
を実行します。

6-4.監視タスクを1つにまとめる

package.jsonscripts

"watch": "npm-run-all -p watch/*"

を記述します。

PowerShellコマンド

npm run watch

を実行するとブラウジングサーバーが起動しhtml、scss、js、images全ての監視を行います。

7.Windows10環境用のnpm-scripts独自テンプレートまとめ

以下にアップしてます。

package.jsondevDependenciesに1~6でインストールしたモジュールが記述されてるので、
PowerShellコマンド

npm install

を実行すると、1~6でインストールしたモジュールがすべてnode_modules配下にインストールされます。

 
※流用される場合は自己責任でお願いします。