1,044 views

この記事は最終更新から 2343日 が経過しています。

1. やりたいこと

以下の過去記事の続き。
(50) Node.js + gulpでcssファイルを自動圧縮
(51) Node.js + gulpで画像ファイルを自動圧縮
(52) Node.js + gulpでJavaScriptファイルを自動圧縮
(53) Node.js + gulpで * ファイルを自動圧縮をまとめてやる

この中に Gulp で Sass も混ぜてみる。

2. やってみる！

(50) Node.js + gulpでcssファイルを自動圧縮 とほとんど同じだ。
実行するプログラムが Sassになっただけだ。

ローカルな作業環境に移動し Node.jsのパッケージ管理を初期化する。

$ npm init

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

$ npm install -g gulp
$ npm install -D gulp
$ npm install -D gulp-sass

gulpfile.js を書く。

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

var sass_options = {
    outputStyle: 'compressed',
    sourceMap: false,
    sourceComments: false
};

gulp.task('exec-sass', function() {
    gulp.src( "dirIn/**/style.scss" )
        .pipe( compileSass(sass_options) )
        .pipe( gulp.dest('dirOut') );
});

実行！

gulp exec-sass

dirIn配下に style.scss ファイルを置くと、dirOutに style.cssが出力される。