var gulp = require('gulp');

var sass = require('gulp-sass');

var jade = require('gulp-jade');

var autoprefixer = require('gulp-autoprefixer');

var spritesmith = require('gulp.spritesmith');

var merge = require('merge-stream');

var replace = require('gulp-replace');

var browserSync = require('browser-sync').create();

​

gulp.task('sass', function(){

    return gulp.src('scss/style.scss')

            .pipe(sass({

                outputStyle: 'expanded'

            }))

            .pipe(autoprefixer())

            .pipe(replace('sprite.png', 'images/sprite.png'))

            .pipe(gulp.dest('app'))

            .pipe(browserSync.reload({

                stream: true

            }))

});

​

gulp.task('jade', function(){

    return gulp.src('*.jade')

            .pipe(jade({

                pretty: true

            }))

            .pipe(gulp.dest('app'))

            .pipe(browserSync.reload({

                stream: true

            }))

});

​

gulp.task('sprite', function () {

    var spriteData = gulp.src('app/images/sprite/*.png').pipe(spritesmith({

        imgName: 'sprite.png',

        cssName: 'sprite.scss'

    }));

​

    var imgStream = spriteData.img

            .pipe(gulp.dest('app/images/'));

​

    var cssStream = spriteData.css

            .pipe(gulp.dest('scss/components'));

​

    return merge(imgStream, cssStream);

});

​

gulp.task('watch', ['browserSync', 'sass', 'jade', 'sprite'], function(){

    gulp.watch('**/*.scss', ['sass']);

    gulp.watch('*.jade', ['jade']);

    gulp.watch('app/images/sprite/*.png', ['sprite']);

    gulp.watch('app/*.html', browserSync.reload);

    gulp.watch('app/js/**/*.js', browserSync.reload);

});

gulp.task('browserSync', function() {

    browserSync.init({

        server: {

            baseDir: 'app',

            index: "index.html"

        },

    })

});