投稿日:

初めてgulp task使ってscssをコンパイルしてみた

カテゴリー:ブログ, 環境構築

In Life 八木大介 全国でホームページの案件を募集中でございます。

この記事にはGulpをインストールして
SCSSファイルをコンパイルするやり方が書いてあります。

お仕事のご依頼は下記のメールアドレスからお願いします。

メールで連絡する

初めてgulp task使ってscssをコンパイルしてみた
皆さんSCSSファイルをコンパイルする時何を使ってますか?

LaravelとかCakePHPって、特別環境を気にせずSCSS書いてデプロイコマンド叩けば、自動的にやってくれてたから、そのあたり気にした事なかったんですけど、普段からSCSSを書いてると、改めてCSSで書くのって中々やる事が多くなった感じがしますね。

単純に括られた中でかけない事くらいしか課題は感じてないんですけど、その1つの問題があるだけで全然作業の進みが変わってくるので、小さな問題とせずこの問題は解決しておこうと思い、ブログ記事にしました。

僕の環境のNode.jsのバージョンとnpmのバージョンは下記になります。
node –version [v10.16.0]
npm -v [6.9.0]

gulpとは

公式サイトで詳細に記載されているので、ここでは深く説明はしませんが
作業を自動化できるタスクランナーと言う事を理解しておくだけで、十分かと思います。
gulp.js(公式サイト)

前提条件

Node.jsの導入が完了していること
npmコマンドが使用できること

この記事でやる事

  • gulpをinstallする
  • SCSSファイルを指定フォルダにCSS形式でビルドする

gulpをinstallする

gulpを使用するためには、gulpをローカル開発環境にインストールする必要があります。

npm install -D gulp

上記1行で書くだけでインストールが完了致します。
gulpのインストールが完了したら、gulpの処理内容を記載していくファイルを作成します。

touch gulpfile.js ※普通に新規ファイル作成で左に記載あるファイル名で作成しても可

作成したファイルの中にgulpを呼び出す処理を記述します。
処理と言っても下記の1行だけです。

var gulp = require("gulp");

これでgulpが使用できるようになりました。

SCSSファイルを指定フォルダにCSS形式でビルドする

今回の目的はSCSSファイルをDocumentRootにコンパイルすることなのでSassのコンパイルプラグインをインストールします。
コマンドは下記の1行をターミナル実行します。

npm install gulp-sass --save-dev

インストールする事ができたら、gulpfile.jsに下記の1行を記載します。
※記載する場所は先ほどgulpをrequireした下に追記します。

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

ここまでの準備が完了すれば、記述する前段階は完了となります。
ここから、gulpで実行するタスクを追加していくのですが、Pathの指定など、他者の記事を読んでいて、実装できない問題など凡ミスが多く見受けられたので、処理を記述する前に、自分の環境と私の環境の違っている箇所を認識して置いてから、作業を初めてください。

今回は下記のフォルダ構成を想定しています。
個々の開発環境で実行場所や、書き出しフォルダのPathは設定する必要があります。

gulpfile.jsの中に下記のタスクを記述をします。

gulpfile.js
 - gulp[ディレクトリ]
   -  scss[ディレクトリ]
     -  common.scss

タスクを作成する

gulp.task(“タスク名”,function(){ … }

タスク名は日本語でも書けるのかな?可読性は上がるか?わからないけど、いつか試してみたいと思います。
今回は[ scss ]と言うタスク名で記述しています。
タスクの宣言が上記、記載している記述になります。

タスクで呼び出すファイルを指定する。

gulp.src(“gulp/scss/*.scss”)
今回の記述は[ gulp/scss ]フォルダに入っているscssで終わるファイルを全て呼ぶように設定しています。

pipe()

gulp.src内で呼び出したファイルに対して実行する処理を記述していきます。

sass()

コンパイルの実装部分の処理を担っています。

gulp.dest

書き出し先を指定します。

gulp.task("scss",function(){
    gulp.src("gulp/scss/*.scss")
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest("./common/css"))
})

これで下記のコマンドを実行する事で、commonディレクトリのcssディレクトリにcssファイルが出力されるようになります。
結構使ってみると便利なので、まだSCSSを触った事がないかたでしたら、一度勉強がてら実装してみると、何か発見があるかも知れないです。

%d bloggers like this: