Help us understand the problem. What is going on with this article?

gulpを使ってsassの@importを解決しつつ差分ビルドをする

More than 3 years have passed since last update.

小さいアプリケーションなら、styleは変更がある度に毎回フルビルドしてしまっても1sもかからないかもしれない。
しかし大きくなって、5s以上かかると非常に苦痛だ。

というわけで差分ビルドしたい。

Sassの差分ビルドで問題になること

差分ビルド自体は簡単で、gulp-cachedとかを使えば、前回と差分があるものだけをビルドできる。

なんだけど、その場合に問題になるのがsassの依存関係(@import)の解決だ。

単純に差分のあったファイルをビルドするだけだと、@import元を辿れない。
そうすると@import元のファイルが変更についてこない。

いや、でもnode-sassのwatchオプションって@import元辿ってるよな、あれってどうなってるんだ??
と思って実装を見てみたら、sass-graphというnpmを使って辿っていた。

お、これ使えば差分ビルド時に依存関係の解決もできるんじゃね??

ということでgulp taskに組み込んでみた。

gulpfile.coffee

gulp        = require 'gulp'
forEach     = require 'gulp-foreach'
sass        = require 'gulp-sass'
cache       = require 'gulp-cached'
grapher     = require 'sass-graph'
gulpIf      = require 'gulp-if'

gulp.watching = false

gulp.task 'build:sass', ->
  baseDir = "front/stylesheets/"
  graph = grapher.parseDir(baseDir)
  gulp.src "#{baseDir}/**/*.scss"
    .pipe cache('sass')
    .pipe gulpIf(@watching, forEach (currentStream, file) ->
      files = [file.path]
      addParent = (childPath)->
        # ここで@import元をたどる
        graph.visitAncestors childPath, (parent) ->
          files.push(parent) unless _.includes(files, parent)
          addParent(parent)
      addParent(file.path)
      gulp.src files, {base: baseDir}
    )
    .pipe sass().on('error', sass.logError)
    .pipe gulp.dest("public/stylesheets")


gulp.task 'watch', ->
  @watching = true
  gulp.watch "front/stylesheets/**/*.scss", ['build:sass']

これのおかげで、10sかかかるビルドが0.1sで済むようになった。嬉しいね。

joe-re
freeeのエンジニアです
http://joe-re.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした