HTML - Autoprefixer - map を作成する

 
1. 概要
2. インストール
3. gulpfile.js の編集

1. 概要

 これまでの手順で作成したものでは map ファイルが作成されません。  実は、map ファイルの読み方もよう知らんのですが、一応出力方法だけ知っておこうかな・・・と。  map ファイルに関しては「Sass のデバッグに Source Maps を使うべきたくさんの理由」に書かれています。(まだ熟読していません)  map ファイルの出力に関しては「gulp-sass で sourcemap を使う」「Sass 用のソースマップを作成してコーディング作業を更にもっと爆速化だ!」を参考にさせていただきました。  後者は特に親切に書いてくれているので役に立ちました。

2. インストール

 map を作成するモジュールをインストールします。

> cd
> npm install --save-dev gulp-sourcemaps

3. gulpfile.js の編集

 gulpfile.js を編集します。  前ページのものを例に出すならば

var gulp		 = require("gulp"),
	sass		 = require('gulp-sass'),
	autoprefixer = require("gulp-autoprefixer");

gulp.task("cmp", function () {
	gulp.src("scss/*.scss")
 	.pipe(sass({ outputStyle: 'compressed'}))
 	.pipe(autoprefixer({
            browsers: ["last 2 versions"],
            cascade: false
        }))
	.pipe(gulp.dest("css"));
});

gulp.task("exp", function () {
	gulp.src("scss/*.scss")
 	.pipe(sass({ outputStyle: 'expanded'}))
 	.pipe(autoprefixer({
            browsers: ["last 2 versions"],
            cascade: false
        }))
	.pipe(gulp.dest("css"));
});
 を以下のように書き換えます。

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

gulp.task("cmp", function () {
	gulp.src("scss/*.scss")
	.pipe(sourcemaps.init())
 	.pipe(sass({ outputStyle: 'compressed'}))
 	.pipe(autoprefixer({
            browsers: ["last 2 versions"],
            cascade: false
        }))
	.pipe(sourcemaps.write('./'))
	.pipe(gulp.dest("css"));
});

gulp.task("exp", function () {
	gulp.src("scss/*.scss")
	.pipe(sourcemaps.init())
 	.pipe(sass({ outputStyle: 'expanded'}))
 	.pipe(autoprefixer({
            browsers: ["last 2 versions"],
            cascade: false
        }))
	.pipe(sourcemaps.write('./'))
	.pipe(gulp.dest("css"));
});
 変更しているのが。  3~4行目、使用するモジュールに gulp-sourcemaps を加えています。  追加している行が  8、20行。最初に map の初期化をする必要があります。  14、26行。map ファイル出力です。  ここで注意が必要なのが、map ファイルの出力先をパスで定義しているのですが、gulpfile.js を置いている場所でなく。  ソースファイルの置き場所からの相対パスで定義しなければなりません。  絶対パスで定義するつもりで /usr/云々... て書いたら、ソースファイルの下に usr/云々... というディレクトリが作成されて焦っちゃいました(笑)。