-->

Click

【簡単便利】npmのコマンドを1クリックで実行する方法

2021/04/11

Node.js

はじめに

管理人はブログのカスタマイズをNode.jsのnpmコマンドを用いて、ファイルのコンパイルとブラウザの自動更新を実行してます。

手順を簡単に書くと

・コマンドプロンプトを起動
 ↓
・作業ディレクトリへ移動
 ↓
・npmコマンドの実行

の3ステップとなってますが、毎回コマンドプロンプトを立ち上げ、コマンドを手入力するのは正直面倒臭く感じてます。


そこでnpmコマンドを1クリックで実行出来るようにプログラムを作ってみました。

コマンドプロンプトでnpmを実行している方は参考にしてみて下さい。


npmのコマンドを1クリックで実行する方法

特別なアプリの導入は不要です。

DOS時代からあるバッチコマンドを使い、npmを実行するバッチファイルを作成しました。

npm startと記述したバッチファイルを作業フォルダに保管し、これを実行すれば良いのですが、これだとプログラムとは言い難く、わざわざブログで紹介する意味がありません。


バッチコマンドのお勉強もかね、ある程度汎用性があるバッチファイルを作成してみました。


バッチファイルのコマンド

今回作ったバッチファイルはこれです。ブログ毎に作業フォルダが分かれているので、フォルダ名を取得し、どのブログで実行しているのか表示する仕様にしました。

@echo off
set current_dir=%~dp0
set cur_path=%current_dir:~0,-1%
for %%a in ("%cur_path%") do set folder_name=%%~nxa
if exist package.json (
  @echo.
  @echo. %folder_name%のファイルをコンパイルしブラウザを自動更新します。
  npm start
) else (
  @echo.
  @echo. package.jsonが存在しないので終了します。
  @echo.
  pause
)
exit /b


備忘録の為、使用したバッチコマンドの一部を少し説明します。

2行目:%~dp0でバッチファイルを保存しているカレントディレクトリのパスを取得します。

3行目:カレントディレクトリのパスの0文字目から最後の1文字目を取り除きます。
    何をやっているかと言うと、パスの終端にある「\」を取り除いてます。

4行目:forコマンドを使ってフォルダ名のみを取得します。

5行目:if~exist~コマンドを使い、package.jsonが存在したらnpm startを実行します。


やったー!完成だ!と思ったら、echoの出力が文字化けしてました。😅



文字化けの修正方法

バッチファイルはメモ帳で作成したのですが、文字コードはUTF-8でした。



しかし、コマンドプロンプトで使用している文字コードがShift‗JIS(ANSI)だったので文字化けが発生していたのです。。

バッチファイルの文字コードをANSIで保存すれば文字化けは直りますが、複数の文字コードファイルが存在していると、今度は別の障害を招く恐れがあるのでANSIへの変換は止めました。

その代わりコマンドプロンプトが使用する文字コードをUTF-8に変更し文字化けを回避しました。

chcpコマンドの識別子を65001に指定すると、コマンドプロンプトが使用する文字コードをUTF-8に設定できます。


バッチファイルの最終完成版がこれです。

@echo off
chcp 65001
set current_dir=%~dp0
set cur_path=%current_dir:~0,-1%
for %%a in ("%cur_path%") do set folder_name=%%~nxa
if exist package.json (
  @echo.
  @echo. %folder_name%のファイルをコンパイルしブラウザを自動更新します。
  npm start
) else (
  @echo.
  @echo. package.jsonが存在しないので終了します。
  @echo.
  pause
)
exit /b

文字化けは無事直りました。



以上で完了、と言いたいとこですが、まだ終わりではありません。

バッチファイルを1クリックで実行させるために、バッチファイルのショートカットをタスクバーにピン留めします。


バッチファイルをタスクバーにピン留めする方法

バッチファイルを右クリック → 「ショートカット」を作成を選択します。



ショートカットを右クリック → 「プロパティ」を選択します。



ショートカットの「リンク先」の先頭にcmd.exe /c を挿入 → 「適用」ボタンを押します。(注)/cの後ろには半角スペースがあります。



バッチファイルのショートカットをタスクバーにドラックしピン留めして終了です。



なお、ショートカットのアイコンを元に戻したい場合は、ショートカットのアイコンの変更をクリックし、%SystemRoot%\System32\SHELL32.dllからアイコンを選択して下さい。


気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

それでは今回の記事はこれでおしまい。

Advertisements

Author

自分の写真
このブログのヒーローヘッダーは「きれいなお姉さん」がブラウザのアクセプト比に合わせてランダムに表示されます。
\ Follow me! /

Follower

Labels

PC (8) Internet (7) Blog (6) Windows10 (6) Repair (5) WebDesign (5) YouTube (5) Blogger (4) hatenablog (4) CSS (3) Cooking (3) Review (3) SEO (3) Domain (2) GitHub (2) HDD (2) HTTPS (2) JavaScript (2) MFI (2) Node.js (2) Anime (1) Beer (1) Browsersync (1) Coding (1) Customize (1) Editor (1) Git (1) Google (1) Monitor (1) New Year (1) Nomad Code (1) Smart Watch (1) Twitter (1) iPhone (1) nodist (1)

Sponsored Links

QooQ