Hitasura JS

ただひたすらJavaScriptのコードを載せるためのブログ。たまにHTML、CSS、PHPも。

GulpでSassを自動コンパイル「gulp-sass」(Gulpの使い方・第1回)

Gulpファイルのメモ的なエントリーです。

「2017年にGulp!?」とかは禁句です。

Node.jsとGulpのインストールが終わっている前提です。

Gulpの設定色々

まずは作業を行うディレクトリに移動

cd フォルダまでのパス

移動したらpackage.jsonを作成。作成するには以下のコマンドを打って下さい。

npm init

とりあえず今回は全部未入力でEnter連打

そうすると以下のようなファイルが出来上がります。

{
  "name": "gulp_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Gulpをフォルダにインストール

npm install gulp

Sassをコンパイル

ルビーがインストールされているかチェック

ruby -v

されてなかったら頑張ってインストール(結構面倒だった気がする)。

Sassがインストールされているかチェック

sass -v

されてなかったらインストール。Windowsは以下のコマンドでインストールできます。

gem install sass

Macだったら以下のコマンド

sudo gem install sass

プロジェクトのディレクトリにsrcフォルダと、その中にsassフォルダを作成。

sassフォルダにstyle.scssファイルを作成。

sassフォルダに移動。プロンプト使った方がファイル作成楽だから。

cd src
cd sass

以下はファイルを作成するコマンド(Windows)。

type nul > style.scss

Macだったら

touch style.scss

試しにScssを書いてみましょう。

.wrapper {
  .main {
    h1 {
      font-size: 20px;
    }
  }
}

これを保存しておきます。

あと、プロジェクトのディレクトリに戻るのを忘れずに

cd ..
cd ..

gulp-sassをインストール

では、SassをCSSに変換してくれるパッケージをインストールします。

npm install gulp-sass --save-dev

これでgulp-sassフォルダが、node_modulesフォルダの中に入っていると思います。これでオッケーです。

以下の項目が追加されていると思います。

  "devDependencies": {
    "gulp-sass": "^3.1.0"
  }

ちなみに、他のプロジェクトでまた使う時は、ここで作ったファイルを再利用すると便利。

devDependenciesにパッケージ名とバージョンが書いてあれば、

npm install

で一括インストールできます。

はい、次はgulpfile.jsファイルを新規作成して、これをいじっていきます。

'use strict';

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

最初の一行目はstrictモードを宣言。簡単に言うと文法のミスを厳しくするモード。

requireして変数に代入します。

'use strict';

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

// sassというタスクを定義していきます。
gulp.task('sass', function(){
  gulp.src('./src/sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./deploy/css/'));
});

これは、src→sass内のscssファイルをCSSにコンパイルして、deply→cssフォルダに書きだすということになります。

deployとcssフォルダは作っていませんが、こうすると自動で生成されます。

ここで、コマンドプロンプトでタスクを走らせてみましょう。

gulp sass

これで先ほど定義したsassというタスクが実行されます。

自動的にdeployフォルダとその中にcssフォルダが出来ていると思います。

それでは、コンパイルされたstyle.cssを覗いてみましょう。

.wrapper .main h1 {
  font-size: 20px;
}

CSSに変換されています!

Sassのコンパイルを自動化

しかし、コードを書くごとにコンパイルしていては、超面倒ですね。ファイルの変更を監視させて、自動でコンパイルさせることもできます。

'use strict';

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

// sassというタスクを定義していきます。
gulp.task('sass', function(){
  gulp.src('./src/sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./deploy/css/'));
});

// watchを使うとファイルの変更を監視できます。
gulp.task('watch', function(){
  gulp.watch('./src/sass/**/*.scss', ['sass']);
});

これはsrcフォルダのsassフォルダ内のファイルが保存とか新規作成された時に、先ほど定義したsassというタスクを走らせるという感じです。

それでは、コマンドプロンプトで、

gulp watch

と打ってみましょう。これでsassフォルダの監視が始まりました。

試しにstyle.scssを書き換えてみましょう。

.wrapper {
  .main {
    h1 {
      font-size: 20px;
      line-height: 1.5em;
    }
  }
}

これを上書き保存して、deploy→cssフォルダのstyle.cssを見てみると、

.wrapper .main h1 {
  font-size: 20px;
  line-height: 1.5em;
}

自動的にコンパイルされている!!

watchを終了させるには、コマンドプロンプトで ctrl + C です。

「バッチジョブを終了しますか?」と聞かれるので、y と Enterキーで終了します。

仕上げにコマンドプロンプトで「gulp」と打っただけですべてのタスクが走るように設定しましょう。

'use strict';

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

// sassというタスクを定義していきます。
gulp.task('sass', function(){
  gulp.src('./src/sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./deploy/css/'));
});

// watchを使うとファイルの変更を監視できます。
gulp.task('watch', function(){
  gulp.watch('./src/sass/**/*.scss', ['sass']);
});

// defaultは「gulp」コマンドのみで動くタスクを設定します。
gulp.task('default',['sass'],function(){
  gulp.start('watch');
});

これで、「gulp」コマンドを打つと、まずsassのタスクが走り、その後コールバックでwatchが始まります。

プロンプトで「gulp」と打ってみましょう。

gulp

これでsassとファイルの監視が始まりました。便利ですね。

他のパッケージとかはまた別で紹介します。

この記事の続き

hitasurajs.hatenablog.jp