[npm-scripts] sass/scssの自動コンパイルとbrowser-sync の環境を久々に作ってみた [画像あり]

4656 ワード
Sass brower-sync npm-scripts タスクランナー Sass テキストリンク

cssの自動コンパイルとbrowser-sync の環境を久々に作ってみた

以前はglupを使っていましたが、最近はnpm-scriptsが主流ですよね。
最近たまたまHTMLを作成することがあったのでついでに記事にしてみました

ということで、今回はnpm-scriptsを使ってSass/Scssのコンパイルとブラウザ同期をいう
超基本的だけど、使えるタスクランナーを構築しました。

最終的に実行するとこんな感じになります。

htmlやcssが変更保存されると、自動でSass/Scssのコンパイルをして且つブラウザのリロードが走ります。

ちょっと画像では伝わりづらいですが、保存した時にブラウザが
自動でリロードがかかる瞬間はワクワクしますよね。

node と npm はあらかじめインストールされている前提でいきます！

$ node -v
v12.16.1
$ npm -v
6.14.2
$

npm 初期設定

まず作業ディレクトリにいって initコマンドを打ちましょう

$ npm init
$ ls
package.json
$

次に、使用するnpmモジュールをインストールしましょう

最後の --save-dev　はローカルインストールのことです。
開発段階ではとりあえずつけておくのがいいでしょう。
今回使うのは以下になります。
サクッと消すことも可能なので、なにも考えずにインストールしてしまいましょうw

## ブラウザ同期
npm install browser-sync --save-dev
## Sass/Scss をcssに変換
npm install node-sass --save-dev
## ベンダープレィックスと圧縮を行う
npm install postcss-cli cssnano autoprefixer --save-dev
## 変更監視モジュール
npm install watch --save-dev
## 同時タスク実行
npm install npm-run-all --save-dev

フォルダ構成

ディレクトリ構成 はこんな感じです。
(今思うと別にassetsフォルダはいらなかった...?)

./src/assets/images  ## 今回の記事では未使用
./src/assets/js      ## 今回の記事では未使用
./src/assets/html
./src/assets/css  ## ここはscssがコンパイルされたら配置される
./src/assets/scss

package.jsonの設定

package.jsonがnpmを起動するときに鍵になります。
今回の設定ではscriptsのところだけをこのように変更しています。

(略)
  "scripts": {
    "all" : "run-p server watch:css",
    "css:scss": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map src/assets/css",
    "css:postcss": "postcss src/assets/css/style.css -o src/assets/css/style.min.css",
    "watch:css": "watch 'run-s css:scss css:postcss' ./src/assets/scss",
    "server": "browser-sync start --server --files='src/assets/html/*.html, src/assets/css/*.css, src/assets/js/*.js' --startPath='src/assets/html'",
    "test": "echo 'npm run test....'"
  },
(略)

postcss.config.js

postcss-cliを使用すうのに使用する定義ファイルです。
今回は他様のものを パクって 参考にさせていただきました。
package.jsonと同じディレクトリに配置しておけばOKです

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

最終はこんな感じなります。

$find . -type f  | egrep -v '(node_modules|git)'
./package-lock.json
./package.json
./postcss.config.js
./src/assets/css/style.min.css.map ※コンパイル後作成される
./src/assets/css/style.min.css　　　※コンパイル後作成される
./src/assets/css/style.css.map　　　※コンパイル後作成される
./src/assets/css/style.css　　　　　 ※コンパイル後作成される
./src/assets/scss/style.scss
./src/assets/html/index.html
$

実行方法

package.jsonと同じ階層で下記を実行します。

## ブラウザsyncとコンパイル
npm run all

## 特定の作業のみを行いたい場合(例えばcssのコンパイル)
npm run watch:css

動画の右下のターミナルでは変更のたびに↓みたいのが出て、はじめて動いたときとかは
胸熱になるんですが、PC名とかフルパスがもろに表示されていたので出力を/dev/nullにしてごまかしていますw

[Browsersync] File event [change] : src/assets/css/style.min.css

最後に

以下サイトを参考にさせていただきました。
はじめてのbrowserSync
npm-scriptで開発環境を作ってみよう

それではよい、フロントエンド ライフを！