sass-gulp.js

//モジュール
const gulp = require('gulp')
const sass = require('gulp-sass')
const browserSync = require('browser-sync')
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
const sourcemaps = require('gulp-sourcemaps')
const autoprefixer = require('gulp-autoprefixer')

//開発ディレクトリ
const devDir = 'dev/'
const dev = {
  'scss': devDir + 'assets/scss/**.scss'
}

//リリース用ディレクトリ
const destDir = 'dest/'
const dest = {
  'css': destDir + 'assets/css'
}

//scss
gulp.task('sass', () => {
  gulp.src(dev.scss)
  .pipe(sourcemaps.init()) //map生成
  .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
  .pipe(sass({
      outputStyle: 'expanded',
      indentWidth: 4
    })
  )
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],
    cascade: false
  }))
  .pipe(sourcemaps.write('../map')) //一個上の階層にmap追加
  .pipe(gulp.dest(dest.css))
})

//ブラウザシンク
gulp.task('browser-sync', () => {
  browserSync({
    server: {
       baseDir: destDir,
       index  : 'index.html'
    }
  })
})

//デフォルト
gulp.task('default', ['sass','browser-sync'], () => {
  gulp.watch( dev.scss, ['sass'])
  gulp.watch(dev.scss).on('change', browserSync.reload)
})