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

Windows10で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配下にインストールされます。