Sassをgulpでビルドする - blog.beaglesoft.net

こんにちは。beaglesoftの真鍋です。

Sassの具体的な利用方法については前回まででだいたい試せたと思います。まだ他にも機能はあるようですが、とりあえずDRYに書くために必要な機能は試せたと思います。

今回は、Sassを実際に本番環境で利用するために必要となるSassからCSSへの変換処理をgulpを利用して行うための設定についてまとめます。

TODO:前回のエントリー

参考にした書籍

今回はフロントエンドエンジニアのための現在とこれからの必須知識を参考にしました。この書籍でネット上に散らばっているフロントエンドに関する知識がまとまっているのでぜひ目を通してみてください。

フロントエンドエンジニアのための現在とこれからの必須知識

作者: 斉藤祐也,水野隼登,谷拓樹,菅原のびすけ,林優一,古沢宏太
出版社/メーカー: マイナビ出版
発売日: 2016/01/28
メディア: 単行本（ソフトカバー）
この商品を含むブログ (1件) を見る

gulpを利用したSassのビルドについて

これまでSassのビルドを手動で実行してきました。ただ、実際にはgulpのタスクとしてSassからCSSを生成することが多いため、Sassのタスクを作成してみたいと思います。

gulpについては、こちらを参照してください。

yoichiro-manabe/gulp_example2

gulp-sassのインストール

gulpでSassを利用するときにはgulp-sassを利用します。

gulp-sass

╭─ymanabe@Yoichiro-no-MacBook-Pro  ~/projects/gulp_example2/public/style ‹2.2.4› ‹master*›
╰─$ npm install gulp-sass --save-dev
npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN prefer global node-gyp@3.3.1 should be installed with -g

> node-sass@3.4.2 install /Users/ymanabe/projects/gulp_example2/node_modules/node-sass
> node scripts/install.js

Binary downloaded and installed at /Users/ymanabe/projects/gulp_example2/node_modules/node-sass/vendor/darwin-x64-47/binding.node

> spawn-sync@1.0.15 postinstall /Users/ymanabe/projects/gulp_example2/node_modules/spawn-sync
> node postinstall


> node-sass@3.4.2 postinstall /Users/ymanabe/projects/gulp_example2/node_modules/node-sass
> node scripts/build.js

` /Users/ymanabe/projects/gulp_example2/node_modules/node-sass/vendor/darwin-x64-47/binding.node ` exists.
 testing binary.
Binary is fine; exiting.
gulp_example2@1.0.0 /Users/ymanabe/projects/gulp_example2
└─┬ gulp-sass@2.2.0
  ├─┬ node-sass@3.4.2
  │ ├── async-foreach@0.1.3
  │ ├─┬ cross-spawn@2.2.0
  │ │ ├─┬ cross-spawn-async@2.2.1
  │ │ │ └─┬ lru-cache@4.0.1
  │ │ │   ├── pseudomap@1.0.2
  │ │ │   └── yallist@2.0.0
  │ │ └─┬ spawn-sync@1.0.15
  │ │   ├─┬ concat-stream@1.5.1
  │ │   │ ├─┬ readable-stream@2.0.6
  │ │   │ │ └── isarray@1.0.0
  │ │   │ └── typedarray@0.0.6
  │ │   └── os-shim@0.1.3
  │ ├── nan@2.2.1
  │ ├─┬ node-gyp@3.3.1
  │ │ ├── fstream@1.0.8
  │ │ ├─┬ glob@4.5.3
  │ │ │ └── minimatch@2.0.10
  │ │ ├── minimatch@1.0.0
  │ │ ├─┬ nopt@3.0.6
  │ │ │ └── abbrev@1.0.7
  │ │ ├─┬ npmlog@2.0.3
  │ │ │ ├── ansi@0.3.1
  │ │ │ ├─┬ are-we-there-yet@1.1.2
  │ │ │ │ └── delegates@1.0.0
  │ │ │ └─┬ gauge@1.2.7
  │ │ │   ├── has-unicode@2.0.0
  │ │ │   ├─┬ lodash.pad@4.2.0
  │ │ │   │ └── lodash.tostring@4.1.2
  │ │ │   ├── lodash.padend@4.3.0
  │ │ │   └── lodash.padstart@4.3.0
  │ │ ├─┬ osenv@0.1.3
  │ │ │ └── os-tmpdir@1.0.1
  │ │ ├─┬ path-array@1.0.1
  │ │ │ └─┬ array-index@1.0.0
  │ │ │   ├─┬ debug@2.2.0
  │ │ │   │ └── ms@0.7.1
  │ │ │   └─┬ es6-symbol@3.0.2
  │ │ │     ├── d@0.1.1
  │ │ │     └─┬ es5-ext@0.10.11
  │ │ │       └── es6-iterator@2.0.0
  │ │ ├─┬ rimraf@2.5.2
  │ │ │ └── glob@7.0.3
  │ │ ├─┬ tar@2.2.1
  │ │ │ └── block-stream@0.0.8
  │ │ └─┬ which@1.2.4
  │ │   ├─┬ is-absolute@0.1.7
  │ │   │ └── is-relative@0.1.3
  │ │   └── isexe@1.1.2
  │ ├─┬ npmconf@2.1.2
  │ │ ├─┬ config-chain@1.1.10
  │ │ │ └── proto-list@1.2.4
  │ │ ├── ini@1.3.4
  │ │ └── uid-number@0.0.5
  │ ├─┬ request@2.70.0
  │ │ ├── aws-sign2@0.6.0
  │ │ ├─┬ aws4@1.3.2
  │ │ │ └── lru-cache@4.0.1
  │ │ ├─┬ bl@1.1.2
  │ │ │ └─┬ readable-stream@2.0.6
  │ │ │   └── isarray@1.0.0
  │ │ ├── caseless@0.11.0
  │ │ ├─┬ combined-stream@1.0.5
  │ │ │ └── delayed-stream@1.0.0
  │ │ ├── extend@3.0.0
  │ │ ├── forever-agent@0.6.1
  │ │ ├─┬ form-data@1.0.0-rc4
  │ │ │ └── async@1.5.2
  │ │ ├─┬ har-validator@2.0.6
  │ │ │ ├─┬ commander@2.9.0
  │ │ │ │ └── graceful-readlink@1.0.1
  │ │ │ └─┬ is-my-json-valid@2.13.1
  │ │ │   ├── generate-function@2.0.0
  │ │ │   ├─┬ generate-object-property@1.2.0
  │ │ │   │ └── is-property@1.0.2
  │ │ │   └── jsonpointer@2.0.0
  │ │ ├─┬ hawk@3.1.3
  │ │ │ ├── boom@2.10.1
  │ │ │ ├── cryptiles@2.0.5
  │ │ │ ├── hoek@2.16.3
  │ │ │ └── sntp@1.0.9
  │ │ ├─┬ http-signature@1.1.1
  │ │ │ ├── assert-plus@0.2.0
  │ │ │ ├─┬ jsprim@1.2.2
  │ │ │ │ ├── extsprintf@1.0.2
  │ │ │ │ ├── json-schema@0.2.2
  │ │ │ │ └── verror@1.3.6
  │ │ │ └─┬ sshpk@1.7.4
  │ │ │   ├── asn1@0.2.3
  │ │ │   ├─┬ dashdash@1.13.0
  │ │ │   │ └── assert-plus@1.0.0
  │ │ │   ├── ecc-jsbn@0.1.1
  │ │ │   ├── jodid25519@1.0.2
  │ │ │   ├── jsbn@0.1.0
  │ │ │   └── tweetnacl@0.14.3
  │ │ ├── is-typedarray@1.0.0
  │ │ ├── isstream@0.1.2
  │ │ ├── json-stringify-safe@5.0.1
  │ │ ├─┬ mime-types@2.1.10
  │ │ │ └── mime-db@1.22.0
  │ │ ├── node-uuid@1.4.7
  │ │ ├── oauth-sign@0.8.1
  │ │ ├── qs@6.1.0
  │ │ ├── stringstream@0.0.5
  │ │ ├── tough-cookie@2.2.2
  │ │ └── tunnel-agent@0.4.2
  │ └─┬ sass-graph@2.1.1
  │   ├── glob@6.0.4
  │   └── lodash@4.8.2
  └── object-assign@4.0.1

npm WARN gulp_example2@1.0.0 No repository field.

また、あわせてgulp-sourcemapsもインストールします。

╭─ymanabe@Yoichiro-no-MacBook-Pro  ~/projects/gulp_example2 ‹2.2.4› ‹master*›
╰─$ npm i gulp-sourcemaps --save-dev                                                                             1 ↵
gulp_example2@1.0.0 /Users/ymanabe/projects/gulp_example2
└─┬ gulp-sourcemaps@1.6.0
  ├── convert-source-map@1.2.0
  └── vinyl@1.1.1

npm WARN gulp_example2@1.0.0 No repository field.

次に、gulpにタスクを作成します。作成するタスクの内容はgulp-sassを参考にしました。

'use strict';

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

gulp.task('sass', function () {
   return gulp.src('public/style/sass/*.scss')
       .pipe(sourcemaps.init())
       .pipe(sass().on('error', sass.logError))
       .pipe(sourcemaps.write('maps'))
       .pipe(gulp.dest('public/style/css'))
});

作成したgulpタスクを実行します。

╭─ymanabe@Yoichiro-no-MacBook-Pro  ~/projects/gulp_example2 ‹2.2.4› ‹master*›
╰─$ gulp sass
[18:11:15] Using gulpfile ~/projects/gulp_example2/gulpfile.js
[18:11:15] Starting 'sass'...
[18:11:16] Finished 'sass' after 31 ms
╭─ymanabe@Yoichiro-no-MacBook-Pro  ~/projects/gulp_example2 ‹2.2.4› ‹master*›
╰─$ tree public/style
public/style
├── css
│   ├── example.css
│   └── maps
│       └── example.css.map
└── sass
    └── example.scss

実行するとpublic/style/sass/example.scssからCSSとSourcemapが作成されpublic/style/cssに出力されます。

あとは、このディレクトリ構成で出力されるCSSをHTMLから参照するように修正すればgulpのSassタスクで出力されたCSSファイルを参照できるようになります。

まとめ

Sassについて触ったことのない状態からいろいろと試してみました。特に詰まることもなく勧められましたが、SassはCSSに比べるとやはり構造の見通しがとても良いことが特徴かなと思います。

一方でCSSと異なりgulpなどでビルドする一手間がかかります。サーバーサイドのプログラムでもやはりビルドは必要になるので手間かというとそれほどではないですが。

最終的にはCSSの規模感とのトレードオフだと思いますが、基本的にはCSSよりSassを利用したいと思いました。

開発が忙しい状況ではなかなか代替性のある効率的な手段を利用することに躊躇していしまいますが、ちょっとの理解で多くの時間を有効に使えるものなのでぜひ利用してみてはいかがでしょうか。

ソースコード

今回のソースコードは以下のリポジトリにあります。参考にしてください。

https://github.com/yoichiro-manabe/gulp_example2

※リポジトリがgulp_example2となっているのですが、READMEにあるとおりgulpについて試していたリポジトリをそのまま利用したためです。綺麗にリポジトリを管理できていないのですが、そこは「ノリと勢いだけ」で頑張ったということでご容赦を。