compassを捨てて、gulp + sass + pug + auto-prefixerに移行しようとしてなかなかうまくいかなかった話

気がつくとcompassが古の技術になっていたので、gulp+sass+auto-prefixer+pugの環境を作った際のメモです。
結論としてはうまくいきました。

---

2018/09/14追記
gulp3.9.1でエラーが頻発するようになったので、gulp4に移行しました↓
https://qiita.com/sam_sam/items/16c7b55d4819f7dd9372

---

環境: Mac + Sublimetext
細かいことはいいからgulpfile.jsだけ教えてくれって人向けです。

gulp + sass

まずは
絶対つまずかないGulp入門。インストールからSassのコンパイルまで
を参考に環境構築。
gulp + sassは成功しました。

が、自環境にはscssが大量にあるのでフォルダ内を全てコンパイルしてくれるように変更をしたい。

gulp + sass + pug

開発しやすい環境の作り方~Web系~

こちらを参考に「gulpfile.js」を修正。
この時点でgulp + sass + pugの設定が完了。

auto-prefixerを設定したい

制作しているサイトがかなり古いものまでサポートしなければいけないため、
auto-prefixerを使おうにもどうにもうまくいかない。

正確には「style.scss」のベンダープリフィックスはつけられるのに、
他のファイルになると全く何も起きないと行った状態。
display: flexはdisplay: flexのまま。

そこで色々試した結果下記のサイトを参考に設定をしました。
gulp-autoprefixerを使ってCSSのベンダープレフィックス付与を自動化する

結果出来上がった「gulpfile.js」がこちら

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var browserSync = require("browser-sync");
var notify = require("gulp-notify");
var pug = require("gulp-pug");
var autoprefixer = require('gulp-autoprefixer');

gulp.task('default', ['sass', 'browser-sync', 'pug', 'watch' , 'autoprefixer']);

//sassとpugの監視をして変換処理させる
gulp.task('watch', () => {
    gulp.watch(['./scss/**'], () => {
        gulp.start(['sass']);
    });
    gulp.watch(['./pug/**'], () => {
        gulp.start(['pug']);
    });
    gulp.watch(['./css/*.css'], () => {
        gulp.start(['autoprefixer']);
    });
});

//ブラウザ表示
gulp.task('browser-sync', () => {
    browserSync({
        server: {
            baseDir: "./"   //サーバとなるrootディレクトリ
        }
    });
    //ファイルの監視
    //以下のファイルが変わったらリロードする
    gulp.watch("./js/**/*.js",     ['reload']);
    gulp.watch("./*.html",         ['reload']);
});

//sassをcssに変換
gulp.task("sass", () => {
    gulp.src("./scss/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(gulp.dest("./css"))
        //reloadせずにinjectする
        .pipe(browserSync.stream())
});


gulp.task('autoprefixer', function () {
    return gulp.src(['./css/*.css'])
        .pipe(autoprefixer({
            browsers: ["last 3 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"],
            cascade: false
        }))
        .pipe(gulp.dest('./css'));
});

//pugをhtmlに変換
gulp.task("pug", () => {
    var option = {
        pretty: true
    }
    gulp.src("./pug/**/*.pug")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(pug(option))
        .pipe(gulp.dest("./"))
});

//ブラウザリロード処理
gulp.task('reload', () => {
    browserSync.reload();
});

これでターミナルに　gulp watch　することでリアルタイムで反映してくれます。