[gulp] sass編

2016-08-06

gulp を使った sass→css, min.css変換

今回gulpのスクリプトで.scssを.css及び.min.cssに変換してみる。gulp自体の設定については下記の記事参照。

gulpの初期設定

フォルダの構成

以下はあるプロジェクトフォルダである。前回の物にapp、｀src｀フォルダを追加した。

project_folder
├── 📁app           <--追加
│   └── 📁css
├── 📁gulp
│   ├── config.coffee
│   └── 📁tasks
│       ├── sass.coffee
│            :
├── gulpfile.coffee
├── 📁node_modules
├── package.json
└── 📁src           <--追加
    └── 📁scss

src/sass フォルダ

ここに、変換元となる.scssファイルを置いておく。なお、_で始まるファイルは、他の.scssから@importで読み込まれるファイルなので、直接は変換しないものとする。

app/css フォルダ

ここに変換した.css及び.min.cssを置く。

変換スクリプト

インストールするnpmモジュール

スクリプトの実行に必要なnpmモジュールをインストールしておく。

npm i fs gulp-sass gulp-autoprefixer gulp-cssmin gulp-rename gulp-plumber -D`

sass.coffee

gulp/tasks/sass.coffee

 1fs = require('fs')
 2gulp = require('gulp')
 3sass = require('gulp-sass')
 4autoprefixer = require('gulp-autoprefixer')
 5cssmin = require('gulp-cssmin')
 6rename = require('gulp-rename')
 7plumber = require('gulp-plumber')
 8config = require('../config')
 9
10gulp.task 'sass', ->
11  sassFiles = fs.readdirSync(config.src + '/scss')
12  baseFiles = sassFiles.filter((file) ->
13    return fs.statSync(config.src + '/scss/' + file).isFile() && /.*\.scss$/.test(file) && file.charAt(0) != "_"
14  )
15  .map((file) ->
16    return config.src + '/scss/' + file
17  )
18
19  gulp.src(baseFiles)
20  .pipe(plumber({
21    errorHandler: (err) ->
22      console.log(err.messageFormatted);
23      @emit('end')
24  }))
25  .pipe(sass())
26  .pipe(autoprefixer())
27  .pipe(gulp.dest(config.dest + '/css'))
28  .pipe(cssmin())
29  .pipe(rename({
30    extname: '.min.css'
31  }))
32  .pipe(gulp.dest(config.dest + '/css'))

最初にsrc/scssフォルダにある、.scssファイルで_から始まらないファイルの一覧を作成している。
.pipe(plumber({ ...の部分は、sassの処理でエラーがあっても、処理を継続できるようにしてる。
sass()とautoprefixer()(-moz-とか-webkit-とかを自動追加する処理)だけ行って、.cssを保存。
圧縮してから、.min.cssも保存。
上記の例では.mapファイルは作成していません。

sass実行

1$ gulp sass
2
3[hh:mm:ss] Requiring external module coffee-script/register
4(node:46893) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
5[hh:mm:ss] Using gulpfile project_folder/gulpfile.coffee
6[hh:mm:ss] Starting 'sass'...
7[hh:mm:ss] Finished 'sass' after ### ms

手元のnodeはv6.3.0ですが、fsに関するメッセージがでています。何か対処が必要かもしれませんが、sassの変換自体はこれで行えます。