GulpでSassを変換してみる

Gulpを試してみる
の続き

Gulpでscssを変換してみる。

scssの変換

gulpとgulp-sassをインストールする。

$ npm install gulp
$ npm install gulp-sass

gulpfileを作成する。

$ vi gulpfile.js

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

gulp.task("sass", function () {
  gulp.src("./scss/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css"));
});

ディレクトリを作って、

$ mkdir css
$ mkdir scss

sample.scssを用意する

$ vi scss/sample.scss

$color: #f00;
h1 {
  color: $color;
}

実行すると

$ gulp sass

変換されたcssが作成される。

$ cat css/sample.css

h1 {
  color: #f00; }

CSSの圧縮

ついでにCSSを圧縮し、ファイル名を変更してみる。

圧縮するためにcssmin、ファイル名を変換するためにrename、をインストールする。

$ npm install gulp-cssmin
$ npm install gulp-rename

gulpfileを下記のように修正し、

$ vi gulpfile.js

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

gulp.task("sass", function () {
  gulp.src("./scss/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(cssmin())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest("./css"));
});

実行すると、

$ gulp sass

圧縮されたファイルが作成される。

$ cat css/sample.min.css

h1{color:red}