HTML - Autoprefixer - map を作成する

1.　概要

2.　インストール

3.　gulpfile.js の編集

1.　概要

　これまでの手順で作成したものでは map ファイルが作成されません。
　実は、「map」ファイルの読み方もよう知らんのですが、一応出力方法だけ知っておこうかな・・・と。

　「map」ファイルに関しては、参考サイトがあったのですが、熟読する前にリンク切れになってしまいました。

　「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/云々... というディレクトリが作成されて焦っちゃいました（笑）。