検索キーワードを入力:

phpstormのFilewatcherでautoprefixerを使う方法

phpstormのFilewatcherでautoprefixerを使う方法

ググったけど出てこないので自分で作ったのでメモ

JetBrainsのIDE phpstormやwebstormは非常に便利でかゆいところにも手が届くのですが、初めてかゆいところに手が届かなかったのがautoprefixerの導入です。
標準装備のFile Watchersでcompassも使えるのだけど、嫌いなので使わずにsassのコンパイルをするときに今まで普通にscssのFile Watchersで済ませていました。

しかし、File Watchersを自分でカスタマイズしたものを作成出来ることに気付いたので、
標準のFile Watchersでのコンパイルを外して、gulp.taskをFile Watchersで自動コンパイルさせることにしました。

目的としては、

  • sassコンパイルしたい
  • soucemap マップファイルは出力させたい
  • auto prefixer使いたい
  • 作業するファイルだけ見守っていて欲しい
  • ついでにcssをminifyしたい

gulpと必要なパッケージをインストール

package.json

バージョン?そんなもの適当です。
とりあえずnodeのバージョンが0.xなのでsourcemapsは1.xを使用

gulpでtaskを用意する

gulpfile.coffee

sassフォルダ下にscssファイルがあって作業、
出力するcssとmapファイルは、sassフォルダと同じ階層のcssという名前のフォルダに書き出す。

phpstormでの設定

phpstormでのFile Watchersの設定

  1. ctrl + alt + sで設定画面を開く
  2. Toolsの中からFile Watchersでaddからcustomを選択
  3. Nameは「SCSS autoprefix compile」とか適当に
  4. file typeはscssとかsassとか、使いたい方
  5. scopeで作業してるファイルをinclude
  6. programには『C:\Users\ [ユーザー名]\AppData\Roaming\npm\gulp.cmd』(windowsユーザーなので)
  7. argmentに『compile-sass –PATH_SRC $FilePath$ –FILENAME $FileName$』
  8. Other Options内のWorking directoryには上記taskを記載したgulpfile.jsを置いてあるフォルダを

argmentの部分、コピペしたらエラー出ますので以下追記2017/2/23

これで目的を果たせました。

About Little

WordPressをいじくり倒して早10年。一人ぼっちでひたすらソースとにらめっこ厨。 有り難いことに、Welcart/WP e-commerce/WooCommerce/EC-Cube等で多数ECサイトを制作させていただいたけど、ふと気付いた、ちゃんと売れるのか。 効果的に売れるようにするためにはどうしたらいいのか。ということでお勉強を兼ねてECサイトも運営中。
2017年1月19日

Related Posts

No posts were found for display

0 comments found

Comments for: phpstormのFilewatcherでautoprefixerを使う方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です