gulpでsassのコンパイルするための環境構築

2020年08月22日

フロントエンド

今回は、gulpでsassをコンパイルするために環境構築したので、まとめていこうと思います。Macで環境構築したのでMacでの手順でまとめていきます。とはいえほとんどWindowsも変わらないので同じようにやっても問題ないと思います。

gulpとは?

まず、gulpについてまとめていこうと思います。

gulpは、タスクランナーと呼ばれる面倒な処理をまとめて自動化する物のひとつです。この面倒な処理というのは、具体的にsassのコンパイルであったり、画像の圧縮などのことですね。

gulpの導入

gulpの導入についてまとめていきます。

gulpを使うためにはNode.jsが必要なので公式サイトでNode.jsのインストーラーをダウンロードします。その後はインストーラーを起動して、手順にしたがってインストールします。

インストールしたらちゃんとできているのか確認のためにターミナルを開いて、node -vと実行します。うまくインストールされているとNode.jsのバージョンが表示されるはずです。

package.jsonファイルの作成

まず、プロジェクトのファイルを保存するフォルダを好きな場所に作ります。ターミナルでそのフォルダの場所に移動します。デスクトップに作ったなら以下のコマンドを入力すれば移動できます。

cd Desktop/作ったフォルダ名

移動したら以下のコマンドを入力します。

npm init -y

しばらくまって完了したら、パッケージ(各種フレームワークやライブラリ)を管理するためのpackage.jsonというファイルが作られているはずです。

gulpのインストール

gulpを自分のプロジェクトファイルで使えるようにインストールしていきます。以下のコマンドを入力します。

npm install -D gulp

これでgulpのインストールは完了です。

gulpでsassのコンパイル

それでは、gulpでsassのコンパイルをするための手順をまとめていきます。

必要なモジュールをgulpをインストールした時に使ったnpm install -Dコマンドでインストールしていきます。必要なモジュールはgulp本体とsassをコンパイルするためのプラグインgulp-sassです。以下のコマンドを入力します。

npm install -D gulp gulp-sass

インストールしたらプロジェクトフォルダにgulpfile.jsを新規に作ります。そのファイル内にまず以下を記述します。

const gulp = require("gulp");
const sass = require("gulp-sass");

さらにその下に以下を記述します。

gulp.task("sass", function() {
return (
    gulp
    .src("sass/**/*scss")
);

以上を記述したらターミナルでnpx gulp sassと入力することでsassのコンパイルができます。sassというフォルダ内のscssファイルをコンパイルするといった感じです。

ファイルの監視

このままだとscssファイルを書き換える度にターミナルでコマンドを入力しないといけないのでかなり面倒です。なのでファイルを書き換えると自動的にコンパイルできるようにファイルを監視できるようにしていきます。watch()メソッドを使います。

gulpfile.jsに先ほど記述したもののさらに下に以下を記述します。

gulp.task('default', function(){
    gulp.watch('sass/**/*scss', gulp.task('sass'));
});

だけで記述したら、ターミナルでnpx gulpと入力すればずっと終了させるまで監視し続けて、変更の度にコンパイルしてくれます。ちなみにタスク名をdefaultにするとnpx gulpだけでタスクの実行をしてくれます。他のタスク名にした場合はnpx gulp タスク名で実行してくれます。

まとめ

今回は、gulpの環境構築を初めてやってみました。ターミナルの操作にも徐々に慣れてきたかなと思います。このgulpfile.jsの書き方が少し古い書き方なのでgulpに慣れてきたら、新しい書き方でまたやり直していきたいと考えています。

Pocket

related

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

Sassの基礎

前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用で

フロントエンド

2020.05.31

jQueryでよくあるフェードインを作る

今回は、jQueryとCSSアニメーションを組み合わせて、Webサイトでよく使われているようなスクロールしていくと要素がフェードインするのを作っていこうと思います。 スクロールしたら表示されるようにす

フロントエンド

2020.06.28

Sassの環境を整える

今回は、何となく避けてきたSassを勉強しようとふと思ったのでブログにまとめていきます。学校の授業で少し触ったのですがほとんど覚えていませんので時間もありますので覚えていこうと思います。 Sassとは

フロントエンド

2020.05.03

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き