gulp-sassとgulp-sourcemapsを使ってみる

gulp-sassとgulp-sourcemapsを合わせて使ってみます。

サンプルコード

gulp-sassとgulp-sourcemapsをインストールします。

npm install gulp-sass --save-dev
npm install gulp-sourcemaps --save-dev

gulpfile.jsに以下のように記述を追加します。

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

gulp.task('sass', function () {
  gulp.src('./scss/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./css'))
});

scssディレクトリにstyle.scssファイルを作成して、コマンドプロンプトで以下を実行します。

gulp sass

cssディレクトリにstyle.cssとstyle.css.mapが生成されました。
　

【参考サイト】

• gulp-sass で sourcemap を使う – Qiita
• Gulp 始めてみましたのメモ – 3 – JavaScriptをconcat, minify, source mapとYUIDoc « イナヅマTVログ