Cacher is the code snippet organizer for pro developers

// Original: https://github.com/gaspanik/gulpbase/

var gulp = require('gulp'),

// 列挙するのが面倒なので、load-pluginsでプラグインをロード。何使ってるかは「package.json」で

  $ = require('gulp-load-plugins')({
    pattern: ['gulp-*', 'gulp.*'],
    replaceString: /\bgulp[\-.]/
  }),

// タスクの処理を指定した順番でおこなうために「run-sequence」を利用

  runSequence = require('run-sequence'),

// ライブリロードのために「browser-sync」を利用

  browserSync = require('browser-sync');

// ソースディレクトリとか、ファイル名を指定。「"hoge/**/*.js"」みたいな書き方もできる

var paths = {
  "tplSrc": "_templates/*.jade",
  "lessSrc": "_less/*.less",
  "scssSrc": "_scss/*.scss",
  "jsSrc": "_js/*.js",
  "imgSrc": "_images/**",
  "rootDir": "dist/",
  "imgDir": "dist/images/"
}

// Browser-Syncの起動設定。通知がいらなければ、notifyをfalseに

gulp.task('bs', function() {
  browserSync.init(null, {
    server: {
      baseDir: paths.rootDir
    },
    notify: true,
    xip: false
  });
});

// JadeをHTMLに変換

gulp.task('html', function() {
  return gulp.src(paths.tplSrc)

// .jadeをHTMLに変換してね
    .pipe($.jade())

//　書き出し先は、rootDirのとこね
    .pipe(gulp.dest(paths.rootDir))

// Minifyされるのがいやなら、下の2行のコメントをとって
// .pipe($.prettify())
// .pipe(gulp.dest('dist'))

// 処理が終わったらBrowser-Syncをリロード
    .pipe(browserSync.reload({
      stream: true
    }));
});

gulp.task('less', function() {
  return gulp.src(paths.lessSrc)

// sourcemapsを付けとこかな
    .pipe($.sourcemaps.init())

// lessを変換しましょうね
    .pipe($.less())

// ベンダープリフィクスを付けとこね
    .pipe($.autoprefixer('last 2 version'))
    .pipe($.sourcemaps.write())

// 書き出し先は、css/の中ね
    .pipe(gulp.dest(paths.rootDir + 'css'))

// ファイルをリネームするよ（.min.cssに）
    .pipe($.rename({
      suffix: '.min'
    }))

// Minifyかけとこね
    .pipe($.csso())

// もう一回書き出しね
    .pipe(gulp.dest(paths.rootDir + 'css'))

// はい、リロードしてね
    .pipe(browserSync.reload({
      stream: true,
      once: true
    }));
});

gulp.task('scss', function() {
  return gulp.src(paths.scssSrc)
    .pipe($.rubySass({
      style: 'expanded',
    }))
    .pipe($.autoprefixer('last 2 version'))
    .pipe(gulp.dest(paths.rootDir + 'css'))
    .pipe($.rename({
      suffix: '.min'
    }))
    .pipe($.csso())
    .pipe(gulp.dest(paths.rootDir + 'css'))
    .pipe(browserSync.reload({
      stream: true,
      once: true
    }));
});

gulp.task('scripts', function() {
  return gulp.src(paths.jsSrc)
    .pipe($.sourcemaps.init())

// jsをMinifyしてね
    .pipe($.uglify())

// jsSrcにあるjsをall.jsで一個にまとめてね
    .pipe($.concat('all.js'))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest(paths.rootDir + 'js'));
});

gulp.task('image', function() {
  return gulp.src(paths.imgSrc)

// 書き出し先のimgDirの中をみて、新しいものだけ処理してね
    .pipe($.newer(paths.imgDir))

// 画像を最適化しちゃうよ
    .pipe($.imagemin({
      optimizationLevel: 3
    })) // See gulp-imagemin page.

// はい、終わったらそこに入れといて
    .pipe(gulp.dest(paths.imgDir));
});


// Sequential tasks demo. Try to run 'npm run-script gulpbuild' or 'gulp build'.

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

// この順番でこれまでのタスクを実行してね。このbuildタスクはデフォルトの処理にはいれてないよ
  runSequence(
    'image',
    'html',
    ['less', 'scripts'] // less and scripts task in parallel.
  );
});

// If you would like to use Sass/SCSS, toggle 'less' to 'scss'.

gulp.task('watch', function() {
  gulp.watch([paths.tplSrc], ['html']);
  gulp.watch([paths.lessSrc], ['less']);
  // gulp.watch([paths.scssSrc], ['scss']);
  gulp.watch([paths.imgSrc], ['image']);
});

// If you would like to use Sass/SCSS, toggle 'less' to 'scss'.

gulp.task('default', ['image', 'bs', 'scripts', 'less', 'html', 'watch']);