Cacher is the code snippet organizer for pro developers

var gulp = require('gulp');

var fs = require('fs');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var ect = require('gulp-ect');
var connect = require('gulp-connect');
var compass = require('gulp-compass');
var hologram = require('gulp-hologram');
var browserSync = require('browser-sync');

// ファイル追加や削除の時にwatchタスクを動かせるようにパスを改めて指定
var path = require('path');
var src = './';
var relativePath = path.relative('.', src); // 追記

// css outputスタイル
var outputStyle = 'compressed';

// ect
gulp.task('ect', function(){

gulp.src(['src/ect/**/*.ect', '!src/ect/**/_*.ect'], {base: 'src/ect'})
    .pipe(plumber())
    .pipe(ect({
        data: function(file, cb) {
            var dirpath = path.dirname(file);
            var category = path.relative('src/ect/', dirpath);
            var page = path.relative(dirpath, file);
            console.log(file);
            cb ({
                filename: file,
                image_path: '/assets/img',
                category: category,
                page: page
            });
        }
    }))
    .pipe(gulp.dest('./build/'));
});

// compass
gulp.task('compass', function() {
    gulp.src('./sass/**/*.scss')
    .pipe(plumber())
    .pipe(compass({
        bundle_exec: true,
        config_file: 'config.rb',
        comments: false,
        style: outputStyle,
        sass: './sass/',
        css: './css/'
    }));
});

// hologram スタイルガイド
gulp.task('hologram', ['compass'], function() {
    var configGlob = './config.yml';
    var hologramOptions = {
        bundler: true
    }

    gulp.src( configGlob )
        .pipe(hologram( hologramOptions ));
});

// watch
gulp.task('watch', function() {
    watch([
        relativePath + './sass/**',
        relativePath + './styleguide_templates/**'
        ], function() {
        gulp.start('hologram');
    });
});

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: './',
            index: 'index.html',
        },
        notify: true,
        ghostMode: {
            scroll: false
        }
    });
});

// Reload all browsers
gulp.task('bs-reload', function (){
    browserSync.reload();
});

// default task
gulp.task('default', ['watch'], function() {
    gulp.watch('./**', ['bs-reload']);
    gulp.watch('./build/assets/css/**/*.css', ['bs-reload']);
    gulp.watch('./build/assets/img/**/*.*', ['bs-reload']);
    gulp.watch('./build/assets/js/*.js', ['bs-reload']);
});