SCSSの追加処理
画像ファイルの追加処理
画像ファイルのリサイズやフォーマット変換などの追加処理を行う方法です。
ImageMagickの使い方
画像ファイルの最適化
画像ファイルの最適化を行う方法です。
pngquantの使い方
PNGOUTの使い方
mozjpegの使い方
CSSファイルの文字列置換
CSSファイルの文字列置換を行う方法です。
文字列置換の使い方
不要ファイルの削除
以下のファイルはSprite作成時に生成されるファイルで、削除しても特に問題はありません。
生成後にこれらのゴミが残る場合は、以下のようにbatファイルを作成すると簡単に削除する事ができます。
ただし、オリジナルの元画像は次回のSprite作成時に再利用するため、別途保管しておく必要があります。
@echo off
rd /s /q ".sass-cacheのパス"
del /q "imgフォルダのパス\*.画像のファイル形式"
del /q "targetフォルダのパス\*.画像のファイル形式"
del /q "sprite.cssのパス"
一括処理
Sprite画像の生成と上記追加処理を連携させて1クリックで一括処理する方法です。
@echo off
call "compile.batのパス"
cd "追加処理のbatのあるフォルダのパス"
call "追加処理のbat"
cd "削除batがあるフォルダのパス"
call "削除bat"
SCSSのファイル管理
ファイルの管理方法
以下はSprite作成時に利用するフォルダです。
ファイラーを使えばこれら複数のフォルダを一括で開く事ができるので、ファイル管理が非常に楽になります。
Tablacus Explorerの使い方
- 元画像の保管フォルダ：元画像を保管している場所
- 作業フォルダ→img→target：Sprite作成用にセットする元画像用のフォルダ
- 作業フォルダ→img：生成されたSprite用の画像
- 作業フォルダ→css：生成されたSprite用のCSS
- ホームページのローカルフォルダ：CSSファイルの保存先
- ホームページのローカルフォルダ→画像フォルダ：画像ファイルの保存先
ファイラーの使い分け
通常の画像を最適化したいという場合は、複数のファイラーを設定しておけばSprite用と画像最適化用で使い分ける事もできます。
Tablacus Explorer
- デスクトップなど：画像の置き場所
- 作業フォルダ→img：最適化する際の画像の置き場所
SCSSのトラブル対策
コンパイルエラーで処理できない場合
エラーが出てコンパイルできない時は、一度結合前の画像ファイルやファイル名をチェックしてみてください。
大抵は画像ファイルに問題があると生成時にエラーが出るので、このあたりをチェックすると改善する場合があります。
また、scssファイルには生成時の基本的な情報が書かれているので、記述内容が間違っているとエラーになります。
画像ファイルやscssファイルを修正、ファイル名を修正