tombolo-jp
6/9/2017 - 5:40 AM

gulpfile.js

'use strict';

var gulp    = require('gulp'),
    sass    = require('gulp-sass'),
    glob    = require('gulp-sass-glob'), // sassのimportでワイルトカードを利用可能に
    maps    = require('gulp-sourcemaps'),
    prefix  = require('gulp-autoprefixer'),
    plumber = require('gulp-plumber'),
    notify  = require('gulp-notify'),
    bs      = require('browser-sync').create();

// gulp-sassの設定
gulp.task('sass', function() {
  gulp.src('./css/*.scss')
    .pipe(plumber({errorHandler: notify.onError('<%= error.message %>')}))
    .pipe(maps.init())
    .pipe(glob({ignorePaths: ['*node_modules*']}))
    .pipe(sass({outputStyle: 'expanded'}))
    // ベンダープレフィックス自動付加
    .pipe(prefix({
      browsers: ['last 2 version', 'iOS >= 8', 'Android >= 4.1'],
      cascade: false
    }))
    // Sassの編集時はリロードせずにブラウザに反映
    .pipe(maps.write('./'))
    .pipe(gulp.dest('./css/'))
    .pipe(bs.stream());
});

// BrowserSyncの設定
// ブラウザ画面への通知を無効化
gulp.task('sync', function() {
  bs.init({
    proxy: "localhost/your_site_name",
    notify: false
  });
});

gulp.task('reload', function() {
  bs.reload();
});

gulp.task('watch', function() {
  gulp.watch(['./css/**/*.scss'], ['sass']);
  gulp.watch(['./js/**/*.js','./*.php'], ['reload']);
});

gulp.task('default', ['sass', 'sync', 'reload', 'watch']);