'use strict';

var gulp = require('gulp'),
    changed = require('gulp-changed'),
    sass = require('gulp-sass'),
    csso = require('gulp-csso'),
    autoprefixer = require('autoprefixer-core'),
    browserify = require('browserify'),
    watchify = require('watchify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    eslint = require('gulp-eslint'),
    babelify = require('babelify'),
    uglify = require('gulp-uglify'),
    del = require('del'),
    notify = require('gulp-notify'),
    browserSync = require('browser-sync'),
    sourcemaps = require('gulp-sourcemaps'),
    postcss = require('gulp-postcss'),
    htmlReplace = require('gulp-html-replace'),
    image = require('gulp-image'),
    reload = browserSync.reload,
    p = {
      jsx: './scripts/app.jsx',
      scss: 'styles/**/*.scss',
      bundle: 'app.js',
      distJs: 'dist/js',
      distCss: 'dist/css',
      distHtml: 'dist',
      distImg: 'dist/img'
    };

gulp.task('clean', function(cb) {
  del(['dist'], cb);
});

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: './'
    }
  });
});

gulp.task('watchify', function() {
  var bundler = watchify(browserify(p.jsx, watchify.args));

  function rebundle() {
    return bundler
      .bundle()
      .on('error', notify.onError())
      .pipe(source(p.bundle))
      .pipe(gulp.dest(p.distJs))
      .pipe(reload({stream: true}));
  }

  bundler.transform(babelify)
  .on('update', rebundle);
  return rebundle();
});

gulp.task('browserify', function() {
  browserify(p.jsx)
    .transform(babelify)
    .bundle()
    .pipe(source(p.bundle))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(p.distJs));
});

gulp.task('styles', function() {
  return gulp.src(p.scss)
    .pipe(changed(p.distCss))
    .pipe(sass({errLogToConsole: true}))
    .on('error', notify.onError())
    .pipe(postcss([autoprefixer('last 1 version')]))
    .pipe(csso())
    .pipe(gulp.dest(p.distCss))
    .pipe(reload({stream: true}));
});

gulp.task('html-replace', function () {
  var replacements = {
    css: 'css/main.css',
    js: 'js/app.js'
  };

  return gulp.src('index.html')
    .pipe(htmlReplace(replacements))
    .pipe(gulp.dest(p.distHtml));
});

gulp.task('image', function () {
  return gulp.src('img/**')
    .pipe(image())
    .pipe(gulp.dest(p.distImg));
});

gulp.task('lint', function() {
  return gulp.src('scripts/**/*.jsx')
    .pipe(eslint())
    .pipe(eslint.format());
});

gulp.task('watchTask', function() {
  gulp.watch(p.scss, ['styles']);
  gulp.watch('scripts/**/*.jsx', ['lint']);
});

gulp.task('watch', ['clean'], function() {
  gulp.start(['browserSync', 'watchTask', 'watchify', 'styles', 'lint', 'image']);
});

gulp.task('build', ['clean'], function() {
  process.env.NODE_ENV = 'production';
  gulp.start(['browserify', 'styles', 'html-replace', 'image']);
});

gulp.task('default', function() {
  console.log('Run "gulp watch or gulp build"');
});

@@ -79,74 +79,8 @@
 '),%0A
-    sass = require('gulp-sass'),%0A    csso = require('gulp-csso'),%0A
     
@@ -579,24 +579,188 @@
 -postcss'),%0A
+    nested = require('postcss-nested'),%0A    vars = require('postcss-simple-vars'),%0A    extend = require('postcss-simple-extend'),%0A    cssnano = require('cssnano'),%0A
     htmlRepl
@@ -888,22 +888,18 @@
 sx: './s
+r
 c
-ripts
 /app.jsx
@@ -911,106 +911,22 @@
     
-scss: 'styles/**/*.scss',%0A      bundle: 'app.js',%0A      distJs: 'dist/js',%0A      distCss: 'dist/cs
+bundle: 'app.j
 s',%0A
@@ -1392,24 +1392,25 @@
 lp.dest(
-p.
+'
 dist
-Js
+/js'
 ))%0A     
@@ -1796,16 +1796,17 @@
 est(
-p.
+'
 dist
-Js
+/js'
 ));%0A
@@ -1861,22 +1861,30 @@
 ulp.src(
-p.s
+'src/**/*.
 css
+'
 )%0A    .p
@@ -1891,172 +1891,123 @@
 ipe(
-changed(p.distCss))%0A    .pipe(sass(%7BerrLogToConsole: true%7D))%0A    .on('error', notify.onError())%0A    .pipe(postcss(%5Bautoprefixer('last 1 version')%5D))%0A    .pipe(csso(
+sourcemaps.init())%0A    .pipe(postcss(%5Bvars, extend, nested, autoprefixer, cssnano%5D))%0A    .pipe(sourcemaps.write('.'
 ))%0A 
@@ -2029,17 +2029,15 @@
 est(
-p.
+'
 dist
-Css
+/'
 ))%0A 
@@ -2086,26 +2086,25 @@
 p.task('html
--r
+R
 eplace', fun
@@ -2147,18 +2147,21 @@
   css: '
-c
 s
+tyle
 s/main.c
@@ -2468,22 +2468,18 @@
 p.src('s
+r
 c
-ripts
 /**/*.js
@@ -2624,14 +2624,10 @@
 h('s
+r
 c
-ripts
 /**/
@@ -2902,26 +2902,25 @@
 yles', 'html
--r
+R
 eplace', 'im

update task and paths