sample gulpfile.js

gulpfile.js

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

var gulp = require('gulp'),

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

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

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

var runSequence = require('run-sequence');

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

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

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

var paths = {
  "tplSrc": "_templates/**",
  "htmlSrc": "_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({
    server: {
      baseDir: paths.rootDir,
      // directory: true,
      // index: "index.html"
    },
    notify: true,
    xip: false
  });
});

// JadeをHTMLに変換

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

// .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({
      browsers: ['last 2 versions']
    }))

// 書き出し先は、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($.sourcemaps.init())
      .pipe($.sass())
      .pipe($.autoprefixer({
        browsers: ['last 2 versions']
      }))
    .pipe($.sourcemaps.write())
    .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($.changed(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.
  );
});

// 監視を別のタスクとして書くならこう
// Individual watch task.

// 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, switch 'less' to 'scss'.

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