Sassの導入とgulp4でコンパイルして自動監視する方法Sassの導入とgulp4でコンパイルして自動監視する方法2019/10/15ブログTweetPocket最近までwebのコーディングはcssだけで書いていましたが、やはり効率が悪いなと思いSassを導入致しました。通常のcssだと同じクラス名を何度も書いたりと記述もくどく、やたらと長くなりがちです。Sassを導入する事でネスト構造で書くことができるため、何度も同じ記述を書かなくて済みます。Sassを使う場合には、cssにコンパイルして使う必要があります。コンパイル方法はいくつか存在しているのですが、今回はgulpでの変換を記事にしています。以前、プロジェクトの関係上でSassを使っていたので、gulp自体は一度は導入済みですが、バージョンがgulp4になった事で書き方が変わりエラーを吐いてしまいました。Sassを使ってなおかつgulpでという方であればこの記事の内容通りに進めていくと、導入完了ができます。1.Node.jsをインストールする2.package.jsonファイルの作成3.gulpインストール4.必要なモジュールのインストール5.gulpfile.jsの作成6.コンパイルの実行Node.jsをインストールするまずは、gulpを使うためには、Node.jsをインストールする必要があります。Node.jsは公式サイトよりダウンロードできますので、公式サイトから「最新版」をインストールします。公式HPはコチラからpackage.jsonファイルの作成ターミナルやコマンドラインを開き、gulpを導入する予定のフォルダまで移動し、以下を実行すると、ファイルが作成されます。実行する際に、name,descriptionなどを尋ねられますが、特に指定がない場合は、そのまま実行して大丈夫です。-ygulpインストールgulpを実行するために、package.jsonを作成した時と同様に、gulpを導入する予定のフォルダにgulpをインストールします。gulp必要なモジュールのインストールgulpとともに、Sassをコンパイルをするためのgulp-sassを同時にインストールします。gulp-sassgulpfile.jsの作成それからgulpでSassをcssに置き換える際に必ず必要になるのがgulpfile.jsです。忘れずにgulpfile.jsを作成しましょう。ファイルは新規でgulpfile.jsを作成し下記を記述し保存します。ファイルの保存場所は、gulpを導入するフォルダ内に作成してください。watchSassFiles;ファイル内の説明では、上記が何をやっているのかの説明です。require("gulp")でgulpのプラグインを読み込んでいます。require("gulp");require("gulp-sass")でgulp-sassのプラグインを読み込んでいます。require("gulp-sass");src("sass/style.scss")でsassファイル内にあるstyle.scssを取得します。src("sass/style.scss").pipe()は処理を繋げる処理を実行しています。.pipe().sass()メソッドのコンパイル時のオプションを表し展開しています。cssを吐き出す時これで通常のcssを書くときのように改行処理が実行されます。})dest("css")でcssに書き出し処理を行なっています。compileSass)でファイルを監視して、変更があったらsassファイルを更新しています。gulpを実行した時に、watchSassFilesを実行するようにしています。watchSassFiles;コンパイルの実行gulpfile.jsを作成して下記で自動監視が始まります。自動監視が始まり指定のファイルにcssが吐き出されれば導入完了です。4入門(2019年版)インストールとSassを使うまでの手順]を元にして書いています。詳しく知りたいという方は、ぜひ読んでみてください。今回は自分の備忘録としてまとめたのものでもあるので、リンク元を一度確認しておく方が理解が深まります。PROFILE松井貴史1984年熊本生まれ。RUBYDESIGN.代表プロダクトに関わるUI設計が得意です。デザインだけではなく、現在エンジニアリング部分などにも領域を広げています。物と物をsnsで繋ぐマッチングサービスmonocrewを運営。RERATION2018/9/30九州に来たら立ち寄って欲しい場所集2018/11/10デザインは、情報の整理と課題解決能力2018/6/19入江開発室のパトロン&メンバーになりました。陶花(トウカ)編2019/1/14ブランドを食う旅2019/9/1仕事ができる人は、返信が早いのは本当か?そのメリットと具体的なアクションを考える...2019/6/4デザイナーは、デザインをどうやって決めているのか2018/7/5デザイナーは、UIデザインに関わりながらプログラムを学べる。CONTACTチームでのサービスデザインが得意です。ご相談は、お問い合わせフォームをご活用ください。