デザイナーがタスクランナーツール「gulp」でSASSを自動コンパイルするまでデザインと、趣味と、ときどきアダルト。WEBタスクランナーツール「gulp」でSassを自動コンパイルできるようにしました。今後も使用すると思うので、備忘録として。gulpで夢がもっとひろがりんぐgulpとはgulp(ガルプ)とは、Node.jsをベースとしたビルドツールのことです。画像の圧縮・SassやLESSのコンパイル・簡易ローカルサーバの立ち上げ・FTPアップロードなどなど、Web制作の面倒な作業を自動化してくれます。gulpは「ごくごく飲む」という意味ですが、その名の通り流れるようにビルドができます。画像圧縮やローカル環境合志区など、色々できるそうなのですが、今回はgulpでSASSをコンパイルすることにします。ターミナルを使うけどそんなに難しくないgulp.jsを導入する、使用する場合、ターミナルを使用します。今回触ってみた際はディレクトリの移動とインストールに使用するだけだったので、そこまで危険を感じなかったです。node.jsをインストールするnode.jsの公式サイトへ行き、node.jsをインストールします。以下のコマンドをターミナルで入力し、verが無事に表示されたら、インストール完了です。ターミナルを使ってgulpをインストール次にgulpをインストールします。以下のコマンドをターミナルで入力。-gうまくいかない場合は下記のように入力(管理者権限でインストール)パスワードを求められた場合はPCのログインパスワードを入れます。次にgulpを使用したいフォルダに“package.json”を作成します。ターミナルでgulpを使いたいプロジェクトファルダへ移動。/Users/MyName/myprojectちなみにMacではフォルダをターミナルのウィンドウにドラックアンドドロップするとファイルのパスが生成されるので、パス直打ちが面倒な人はそれでもOKです(cdを忘れずに!)次に以下のコマンド入力。initプロジェクトの設定情報が記述されたpackage.jsonファイルがというものが生成されます。プラグインをインストール次にプラグインをインストールします。今回はgulp-sassをインストールなので、下記コマンドでgulp-sassをインストールをします。プロジェクト内にgulpをインストール次に自分が使用したいフォルダー内にgulpをインストールします。gulpfile.jsの作成・設定gulpをインストールしただけでは意味がないので、gulpでどういった処理をするのかを定義するgulpfile.jsを作成します。今秋はgulp-sassの設定、以下のように記述します。watchについてgulpはターミナルでgulpと入力すると起動するようになっているのですが、SASSのように記述してすぐに確認したい場合、SASS変更→ターミナルでgulp→確認と、チェックが面倒です。watch(sass-watch)というのを設定しています。これで、SASSのコンパイルが自動で行えるようになりました!gulpで夢がもっとひろがりんぐ今回はgulp-sassでSASSをコンパイルのご紹介でしたが、gulpではこれ以外にも様々なタスクをこなすことができるそうなので、業務効率化のため、gulpも色々触ってみますです。MontBlanc.人気記事アダルトサイトや出会い系ジャンルに使える画像素材は存在するのか?ざっくり調べてみた。載せる作品が少ないと悩んでいる人に読んでほしい、魅せるポートフォリオの考え方。jQuetyを使わずにYoutubeの動画を背景に設置する。BOTをPHPとさくらインターネットで作るスポンサーリンクSEARCHABOUT.MontBlanc.WEBディレクター兼アートディレクター、且つ元エロデザイナーの備忘録&MEMO的なブログです。デザイン記事やWEB記事、レビューもどきや精神論など色々書きます。人気記事アダルトサイトや出会い系ジャンルに使える画像素材は存在するのか?ざっくり調べてみた。views載せる作品が少ないと悩んでいる人に読んでほしい、魅せるポートフォリオの考え方。viewsjQuetyを使わずにYoutubeの動画を背景に設置する。montblan9.net.。