サイト構築時のSCSSやJsなどの環境構築

2023.09.01 09:00
2023.08.17 11:21
サイト構築時のSCSSやJsなどの環境構築

cssの生成や画像の最適化などを行うためのフロントの開発環境構築をやってみます。主にnpmとhomebrewを使ってやっていきます。

画像の最適化とCSSの出力、jsの圧縮などがコマンド一発でできるようになります。

1. ツールのインストール

インストールはツールごとに入れ方が違い、主に2種類あります。
「画像系」はHomebrew経由でMacにインストールし、それ以外をnpm経由でインストールします。

Homebrew

  • jpegoptim（JPGの最適化）
  • mozjpeg（PNGの最適化）

homebrewでインストールします（homebrewが入ってる前提です）。

brew install jpegoptim mozjpeg

npm

つづいてnpmでインストールします（nodeとnpmが入ってる前提です）。

  • autoprefixer（CSSのベンダープレフィックスを自動でつける）
  • postcss-cli（CSSに処理を施すためのツール。autoprefixerなどを実行するためなどにつかう）
  • postcss-sort-media-queries（ばらけたメディアクエリをまとめてくれる）
  • sass（dart-sass）
  • uglify-js（javascriptのminify）

まずは初期化。

npm init

つづいてインストール。

npm install postcss-cli autoprefixer postcss-sort-media-queries uglify-js sass --save-dev
npm install -g uglify-js

次にpostcssの設定ファイルを書きます。

module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('postcss-sort-media-queries')()
  ]
}

そして「package.json」をこんな感じにします。
バージョンや名前は適宜読み替えてください。

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "watch": "sass assets/css/app.scss pre/css/app.css --style compressed",
    "finish": "npm run scss && npm run postcss && npm run js && npm run optim",
    "scss": "npx sass assets/css/app.scss pre/css/app.css --style compressed",
    "postcss": "postcss -c postcss.config.js pre/css/app.css -o pre/css/app.css",
    "js": "npm run js:concat && npm run js:minify",
    "js:concat": "cat assets/js/*.js > pre/js/app.min.js",
    "js:minify": "uglifyjs pre/js/app.min.js --output pre/js/app.min.js",
    "optim": "cp -R assets/img img && npm run optim:png && npm run optim:jpg",
    "optim:png": "find ./img -name '*.png' | xargs pngquant --ext .png --force -v",
    "optim:jpg": "find ./img -name '*.jpg' | xargs jpegoptim --strip-all --max=60"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "google-closure-compiler": "^20230802.0.0",
    "postcss-cli": "^10.1.0",
    "postcss-sort-media-queries": "^5.2.0",
    "sass": "^1.65.1"
  }
}

ちなみに「watch」は、scssの監視で、変更したら自動でコンパイルしてくれます。

2. 実行

実行してみます。

npm run finish

css、jsが出力され、画像も圧縮されました！

今回は以上です！