08 November, 2019

Coding

npm(yarn) scriptでSCSSコンパイル機能付きの開発環境を構築する

「プロジェクトが始まったばかりでまだ開発環境が準備できていないけど、とりあえず仮でコーディングしたWebページを他の人と共有したい」「コーディング作業中、自動でSCSSコンパイル・ベンダープレフィックス自動付与・CSS圧縮は行いたい（Preprosなどのコンパイラ、Gulpなどのタスクランナーは導入したくない）」などの時に、npm(yarn) scriptsを使って静的サイトの開発環境を作った時の覚え書きです。

とても参考になったこちらの記事を、自分の必要な部分のみ抜き出し・編集、あとで自分で読み返した時に問題なくできるように、初歩的な動作などを追記したものになります。

参考元の記事にはJavaScriptや画像の圧縮、ファイル構成などの説明などがとても丁寧に行われているので、フル機能が欲しい方やきちんとした説明を知りたい方はそちらを参考にしたほうがよいです！
（私も必要になったタイミングで導入しようと思っています）（この記事に追記しているかもしれません）

yarnとnpm、どちらでも出来るようにそれぞれのコマンドを書いています。
私自身業務ではyarnを使ってるものの、プライベートで両方使っている・今後どちらを使うかはまだ迷い中なので…

前提条件・バージョン

  • 以下の操作ができること

    • Git/GitHub
    • ターミナル
    • npm もしくは yarn
    • SCSS

  • バージョン

    • node.js v12.11.1
    • npm 6.12.1
    • yarn 1.19.1

開発環境の構築

作業ディレクトリの作成

ターミナルを起動し、開発用ワークスペースから作業ディレクトリを作成します。

# 開発用ワークスペースに移動（適量書き換えてください）
cd /Users/（ユーザ名）/workspace

# 「starter-kit」ディレクトリ作成
mkdir starter-kit

# starter-kit内に移動
cd starter-kit

Git導入

作業ディレクトリでGitが使えるように設定します。

git init

をターミナルで実行後、

Initialized empty Git repository in /（workspace-dir）/.git/

というメッセージが出て、ディレクトリ内に「.git」というフォルダができていれば成功です。

.gitignore設定

Gitで監視から外すファイル・ディレクトリを指定する、 .gitignore もコミット前に作っておきます。

これを作っておかないと、勝手に生成される膨大なファイルがGit内に紛れ込んできて、少しファイル操作するたびに更新ファイル数がとんでもないことになります… 慣れてない頃はよくやらかして、キャッシュをクリアしていました…

毎回.gitignoreを追加するのが手間なので、下記の方法でグローバルから一括適用させると楽です。

グローバルで.gitignoreを適応する - Qiita

ですが、グローバル設定をしていなかった時の為に、GitHub公式アカウント > gitignoreリポジトリ > Node.gitignoreの内容をコピペし、適量調整したものを.gitignoreとしてディレクトリ内に置きました。

package.json作成

ターミナルから、インストールしたパッケージを管理するためのファイル、package.jsonを作成します。
ターミナルからコマンド入力で簡単に作れますが、作成時の質問が面倒なので-yオプションで飛ばしてしまいます（初期値が入力されます）

# npm
npm init -y

# yarn
yarn init -y

実行後、こんなメッセージが出て、ディレクトリの中に「package.json」というファイルができていれば成功です。

npm:
Wrote to /（workspace-dir）/package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": { "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

yarn:
yarn init v1.19.1 warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨ Done in 0.08s

環境によっては差異があるかもしれません…

SCSS変換

SCSSからCSSにファイル変換するためのパッケージを、node-sassターミナルからインストールします。

今回のような、開発時にのみ必要（アプリケーション自体の実行には必要がない）なパッケージは--save-devで開発時にだけ使うパッケージとしてインストールします。

# npm
npm install node-sass --save-dev

# yarn
yarn add node-sass --dev

package.jsonをエディタで開き、実行コマンドを指定します。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},

↓

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css"
},

もし"scripts:"自体がなければ追加してください。

ディレクトリ内に下記ディレクトリとファイルをそれぞれ作成します。

  • src/assets/scss ディレクトリ

  • src/assets/scss/style.scss ファイル

    • コンパイルの動作確認のために簡単にSCSSを記述しておくと良い
  • dist/assets/css ディレクトリ

ターミナルから以下を実行します。

# npm
npm run css/scss

# yarn
yarn run css/scss

さきほど作ったdist/assets/css内に、style.css.mapとstyle.cssが生成されていれば成功です。

Rendering Complete, saving .css file... Wrote Source Map to /（workspace-dir）/dist/assets/css/style.css.map Wrote CSS to /（workspace-dir）/dist/assets/css/style.css

CSS圧縮＋ベンダープレフィックス自動付与

SCSSからCSSにコンパイルできましたが、ベンダープレフィックスをつけてくれるautoprefixや、ファイル圧縮などの機能はついていません。 せっかくなら一緒に行いたいのでそのためのパッケージ、autoprefixer、、cssnano、postcss-cliをインストールしていきます。

ターミナルから以下を実行、

# npm
npm install postcss-cli cssnano autoprefixer --dave-dev

# yarn
yarn add postcss-cli cssnano autoprefixer --dev

package.jsonをエディタで開き、実行コマンドを指定します。

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css"
},

↓

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css"
},

このままnpm run css/postcssまたはyarn run css/postcssを実行してしまうと、ターミナル実行時に「PostCSSの設定がまだ終わっていないよ」というエラーが出てしまいます。

Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at: https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist

ディレクトリ直下にpostcss.config.jsというファイルを作り、以下をそのままコピペします。

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 2 versions'],
            cascade: false
        }),
        require('cssnano')({
            preset: 'default',
        })
    ]
}

もう一度npm run css/postcssまたはyarn run css/postcssすると、処理が完了します。

もしここでエラーが起きたら

Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at: https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist

npm run css/postcssまたはyarn run css/postcssのあとに、このようなエラーが表示されたら、postcss.config.jsのrequire('autoprefixer'){}表記をpackage.jsonに移動する必要があります。

postcss.config.jsを開き、下のコメントアウト部分を全部消します。

module.exports = {
    plugins: [
        // require('autoprefixer')({
        //     browsers: ['last 2 versions'],
        //     cascade: false
        // }),
        require('cssnano')({
            preset: 'default',
        })
    ]
}

package.jsonを開いて、autoprefixer設定を足します。

{
  "devDependencies": {
    "autoprefixer": "^9.7.1",
    "cssnano": "^4.1.10",
    "node-sass": "^4.13.0",
    "postcss-cli": "^6.1.3"
  },
  "browserslist": [
    "last 2 version"
  ]
}

もう一度npm run css/postcssまたはyarn run css/postcssを実行してみてください。

ゴミファイル掃除

ファイルを作成、名前を変更中にコンパイルが実行され、変更前の名前のファイル、変更後の名前のファイルの両方が生成されてしまったり、気づかないうちに不要なファイルが量産されてしまうことがあります。

一連の処理を走らせる前にコンパイルで生成されたファイルを全部削除してから、ファイルを生成しなおすという処理を追加します。

package.jsonをエディタで開き、実行コマンドを指定します。

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css"
},

↓

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
    "clean/css": "rimraf dist/assets/css && mkdir -p dist/assets/css"
},

npm run clean/cssまたはyarn run clean/cssを実行すると、

一連のSCSS変換処理をまとめて実行する

いったん、これまで作ったSCSSまわりの処理を1つにまとめます。 ひとつひとつ実行するのは骨が折れるので…

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

# yarn
yarn add npm-run-all --dev

package.jsonをエディタで開き、実行コマンドを指定します。

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
    "clean/css": "rimraf dist/assets/css && mkdir -p dist/assets/css"
},

↓

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
    "clean/css": "rimraf dist/assets/css && mkdir -p dist/assets/css",
    "css": "npm run clean/css && npm-run-all -p css/*"
},

ターミナルから以下を実行します。

# npm
npm run css

# yarn
yarn run css

先ほど作った処理が一括で行なえます。便利！

HTML監視

ブラウザに表示させるためのHTMLファイルを作成します。 src/assets/html/index.htmlを作り、必要最低限な中身を作成します。

<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document Title</title>
    </head>
    <body>
        <h1>Document Title</h1>
    </body>
</html>

ターミナルから以下を実行、

# npm
npm install watch cpx --save-dev

# yarn
yarn add watch cpx --dev
"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
    "clean/css": "rimraf dist/assets/css && mkdir -p dist/assets/css",
    "css": "npm run clean/css && npm-run-all -p css/*"
},

↓

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
    "clean/css": "rimraf dist/assets/css && mkdir -p dist/assets/css",
    "css": "npm run clean/css && npm-run-all -p css/*",
    "html/plain": "cpx 'src/assets/html/**/*.html' 'dist/'",
    "html": "npm-run-all html/*",
},

ターミナルから以下を実行します。

# npm
npm run html

# yarn
yarn run html

src内にあったhtmlファイルが、distにも表示されるようになりました！

ファイルを監視、更新があるたびに処理を行ってブラウザリロードまで行う

HTMLやSCSSファイルを変更するたびに、ターミナルにいちいちnpm(yarn) run htmlやnpm(yarn) run cssをするのはとても大変です。 ファイルに変更があるたびに、自動で処理を行ってくれる処理をwatchで作ります。 ついでに、更新があったらブラウザも再読み込みするようにbrowser-syncで設定してしまいます。

ターミナルから以下を実行、

# npm
npm install watch browser-sync --save-dev

# yarn
yarn add watch browser-sync --dev

package.jsonをエディタで開き、実行コマンドを指定します。

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
    "clean/css": "rimraf dist/assets/css && mkdir -p dist/assets/css",
    "css": "npm run clean/css && npm-run-all -p css/*",
    "html/plain": "cpx 'src/assets/html/**/*.html' 'dist/'",
    "html": "npm-run-all html/*",
},

↓

"scripts": {
    "css/scss": "node-sass src/assets/scss/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
    "css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
    "clean/css": "rimraf dist/assets/css && mkdir -p dist/assets/css",
    "css": "npm run clean/css && npm-run-all -p css/*",
    "html/plain": "cpx 'src/assets/html/**/*.html' 'dist/'",
    "html": "npm-run-all html/*",
    "watch/server": "browser-sync start -s dist -f 'src, **/*.html, !node_modules/**/*'",
    "watch/css": "watch 'npm run css' ./src/assets/scss",
    "watch": "npm-run-all -p watch/*"
},

ターミナルから以下を実行します。

# npm
npm run watch

# yarn
yarn run watch

これまで書いたすべての処理をwatchで行うようにしているので、作ったページがlocalhostのURLで表示されたら成功です！

[Browsersync] Access URLs:

Local: http://localhost:3000 External: http://XX.XX.XXX.XXX:3000
UI: http://localhost:3001

UI External: http://localhost:3001

おわりに

GitHubにこれまで作った一式をアップロードしました。 （URL）

git clone （リポジトリURL）

をしたあとにyarn run watchを実行するとサイトが表示されると思います！

← Home