gulpやgruntなどのタスクランナーを利用している方も多いと思います。

筆者もgulpを利用しておりましたが、gulpのバージョンアップデートで不具合が起きることが何度かありました。gulpやgruntなどのタスクランナーは便利ですがどうしても環境に依存してしまいがちです。

そこで今回はタスクランナーを使わず、npm-scriptsを主軸としたシンプルな開発環境を作ってみたいと思います。

開発環境を作る前の準備

npm-scriptsで開発環境を作成するにはNode.jsが必須となります。
gulpなどを使用したことがあればインストールされていると思いますが、インストールされていない方は下記のURLからダウンロードが可能です。

https://nodejs.org/ja/

次にNode.jsのバージョン管理システムをインストールしてください。
これはnode.jsとnpmのバージョンを管理するのに使用します。

案件ごとにバージョンが違っていることはよくありますので、可能であればインストールをおススメします。

※windows

https://github.com/nullivex/nodist/releases

※mac

https://brew.sh/index_ja.html

バージョンについて

gulpや-scriptsなど開発環境に関連する記事は沢山ありますが、その通りに作成してもうまくいかなかったことはないでしょうか？

ちなみに筆者は何度もありました…原因の一つとしては作成する際のバージョンが違っていることが挙げられます。ですので作成前にバージョンを確認・変更しておきましょう。

今回作成した開発環境のバージョンは下記のとおりです。

Node.jsバージョン　12.16.1

npmバージョン　6.13.4

バージョンの変更が完了したらプロジェクトフォルダ直下に移動して

$npm init

を実行します。基本的にyで進めて行けば問題ないので必要な情報を入力します。その後、package.jsonがプロジェクトフォルダの直下に自動的に生成されます。

ディレクトリ構成の紹介

ディレクトリ構成と処理内容は以下の通りです。プロジェクトフォルダを作成後srcフォルダとpublicフォルダを作成します。
処理の流れはsrc内で作成したファイルをpublic内にコンパイル・圧縮して出力します。

mapフォルダはソースマップファイルを格納するフォルダとなっています。画像に関しては今回処理を加えていないのでimgフォルダへ使用する画像を格納します。

タスクの流れ

■ejsの処理

　1.　ejs-cliでhtmlにコンパイル

■Sassの処理

　1.　node-sassでcssにコンパイル

　2.　cssを圧縮

　3.　ベンダープレフィックスを付与

■jsの処理

　1.　jsを圧縮

■ファイルの監視処理

　1.　browser-syncでローカルサーバーを立ち上げ

　2.　監視タスクでファイルの変更を監視

　3.　監視中のファイルを保存時に変更があればブラウザをオートリロード

　4.　全ての処理をコマンド一つで開始する

開発環境の作成手順

では上記のタスクを実現するために開発環境を作成していきます。

それぞれの処理を実行するために必要なパッケージをインストールしてpackage.jsonのscripts内に処理内容を記述します。

インストールしたパッケージはpackage.jsonのdependencies内に記述されます。アンインストールも可能なので心配ありません。

作成する注意点として今回は全てローカルにインストールします。
グローバルにインストールしない理由は、グローバルインストールするとpackage.jsonにパッケージ内容が記載されません。つまり確認するための作業量が増え可読性に欠けます。

そしてグローバルインストールのバージョンが管理外になるため、同一の環境になる保証が無い為です。

ejsをhtmlにコンパイル処理

ejsをhtmlにコンパイルする処理を作成します。
まず最初にejsとejs-cliのパッケージをインストールします。

$npm install ejs ejs-cli

インストールができたらscripts内に下記を記述します。

"ejs": "ejs-cli -b src/ejs/ \"*.ejs\" -o public/",

src内のejsフォルダに存在する全てのejsファイルを対象にしてpublic直下にhtmlとしてコンパイルするという処理です。

Scssをcssにコンパイル　ベンダープレフィックス付与と圧縮処理

まずはパッケージのインストールから行います。
インストールするパッケージはnode-sass、node-sass-globbing、postcss、autoprefixer、npm-run-allの五つです。

$npm install node-sass node-sass-globbing postcss-cli npm-run-all

 インストールができたらscripts内に下記を追記します。

"sass": "node-sass --importer node_modules/node-sass-globbing/index.js src/scss/ *.scss -o public/css/ --output-style compressed --source-map src/map",

"postcss": "postcss public/css/ --use autoprefixer --d public/css/",

"autoprefixer": "npm-run-all -s sass postcss",

加えてscripts外に下記を記述します。

"author": "",
　"license": "ISC",
　"private": true,
　"browserslist": [
　　"last 2 versions"
　],

最後にpostcss.config.jsを作成します。
中には下記を記述します。

module.exports = {    
　plugins: [      
　　require(‘autoprefixer’)({
　　　cascade: true
　　})
　]
}

Sass関連の処理では三つのタスクを作成しました。

まず”sass”はsrc内のscssフォルダに含まれる全てのScssファイルを対象にしてpublic内のcssフォルダにcssとしてコンパイルします。同時にソースマップファイルをsrc内のmapフォルダに出力します。

node-sass-globbingはScss内でglobパターンを使えるようにします。Scss内で

@import "base/*.scss";

上記のように記述するとbaseフォルダ内に存在する全てのScssファイルを対象にすることができます。importするファイルが多いと一行ずつ記述するのは面倒なので便利です。

次に”postcss”はpublic内のcssフォルダに存在するCSSファイルを対象にしてベンダープレフィックス付与したファイルに書き換えます。

最後に”autoprefixer”は”sass”と”postcss”の処理を一連の流れとして順に処理します。この時に重要なのは”-s”の記述です。これは順次処理を意味します。

順次処理にする理由はScssファイルをコンパイルしたCSSファイルに対してベンダープレフィックス付与したいからです。
この順で処理をしないとベンダープレフィックス付与したCSSファイルをコンパイル後のファイルが上書きしてしまう為です。

ちなみに”-p”は並列処理となります。同時に処理したいときはこちらを使用します。

jsの圧縮処理

まずはパッケージのインストールから。jsの圧縮処理にはuglify-jsを使用します。

$npm install uglify-js

インストールができたらscripts内に下記を追記します。

"js": "uglifyjs src/js/script.js -c -o public/js/script.js",

src内のjsフォルダに存在するscript.jsを圧縮してpublic内のjsフォルダに出力します。

ファイル監視とローカルサーバー立ち上げ＆変更時オートリロード

ここまではファイルのコンパイルや圧縮の処理を記述してきました。既に記述している分でも作業を進めることは可能ですが、変更があるたびに一々コマンドを手動で走らせなければなりません。

加えてファイル更新後には確認の為にブラウザを手動でリロードする必要があります。そこでここからはそれらの煩わしい作業を減らすための処理を記述していきます。

具体的にはファイルを保存する際に変更を検知すると自動的にコマンドを走らせてくれる監視処理と、ファイルの変更を検知してブラウザをオートリロードさせる処理を追加していきます。

ではまず例によってパッケージのインストールから始めます。

インストールするパッケージはbrowser-sync、chokidar、chokidar-cli、concurrentlyの四つです。

$npm install browser-sync chokidar chokidar-cli concurrently

インストールができたらscripts内に下記を追記します。

"server": "browser-sync start --server --files=' public/ ' --startPath=/public/ index.html",

"watch-ejs": "chokidar \"src/ejs/\" -c \" npm run ejs \"",

"watch-sass": "chokidar \"src/scss/\" -c \" npm run autoprefixer \"",

"watch-js": "chokidar \"src/js/\" -c \" npm run js \"",

"watch-all": "concurrently \"npm run watch-sass\" \"npm run watch-ejs\" \"npm run watch-js\"",

"start": "npm-run-all -p server watch-all"

“server”でローカルサーバーを立ち上げます。最初に表示するページはpublic直下のindex.htmlを指定しています。トップページのファイル名が異なる場合や最初に表示したいページがあればパスを変更してください。

–files=’ public/ ’の部分でpublic下のファイルに変更があればオートリロードされるように設定します。

“watch-ejs”、“watch-sass”、“watch-js”はchokidarでファイルの変更を監視しています。ファイルを保存した際に変更があれば、それぞれ右側に記載したタスクを実行します。

“watch-all”は“watch-ejs”、“watch-sass”、“watch-js”を並列処理で実行しています。これでejs、scss、jsの監視、コンパイル・圧縮が同時に行うことができます。

最後に”start”で”server”と“watch-all”を並列処理で実行します。
ローカルサーバーの立ち上げとファイルの監視、コンパイルを全てコマンド一つで実行することができます。

まとめ

長くなりましたがタスクランナーを使わず、npm-scriptsを主軸としたシンプルな開発環境の紹介でした。

直接package.jsonに記述するのでタスクランナーと比べ少し冗長になってしまいますが、タスクランナーの環境に左右されることなく作業することが可能です。

開発環境の構築は最初こそ大変かもしれませんが、一度作成しておくと後は使いますことが可能ですし、作業効率も向上します。

興味を持たれましたらご自身に合う開発環境を構築してみるのも良いと思います。