HTML、JS、Sass 編集でブラウザー自動更新、そして、CSS、JS を min 化、そんな gulpfile.js は無いかとお困りの貴殿へ

どうやりゃ良いんですか？って聞かれたので。確かにまとまってるところが無いっぽい。

よくやるパターンだと思うけどなぁーーーと思ったので貼り付ける。

npm i gulp@3.9.1 gulp-plumber gulp-sass gulp-uglify gulp-clean-css gulp-rename browser-sync --save-dev

var conf = {
  port: 8080,
  uiPort: 8081
};

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync').create();

gulp.task('uglify', () => {
  gulp.src([ 'js/**/*.js', '!js/**/*.min.js' ])
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('js/'));
});

gulp.task('cleanCSS',() => {
  gulp.src([ 'css/**/*.css', '!css/**/*.min.css' ])
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('css/'));
});

gulp.task('minify', [ 'uglify', 'cleanCSS' ]);

gulp.task('browserSync', () => {
  browserSync.init({
    port: conf.port,
    ui: { port: conf.uiPort },
    server: './'
  });
});

gulp.task('watch-html', [ 'browserSync' ], () => {
  gulp.watch([ '**/*.html' ], () => {
    gulp.src('**/*.html')
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch-js', [ 'browserSync' ], () => {
  gulp.watch([ 'js/**/*.js' ], () => {
    gulp.src('js/**/*.js')
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch-sass', [ 'browserSync' ], () => {
  gulp.watch([ 'sass/**/*.sass' ], () => {
    gulp.src('sass/**/*.sass')
      .pipe(plumber())
      .pipe(sass({ outputStyle: 'expanded' }))
      .pipe(gulp.dest('./css/'))
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch-scss', [ 'browserSync' ], () => {
  gulp.watch([ 'sass/**/*.scss' ], () => {
    gulp.src('sass/**/*.scss')
      .pipe(plumber())
      .pipe(sass({ outputStyle: 'expanded' }))
      .pipe(gulp.dest('./css/'))
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch', [ 'watch-html', 'watch-js', 'watch-sass', 'watch-scss' ]);

gulp.task('default', [ 'watch' ]);

gulp

で、ポート 8080 で browserSync のサーバが Listen。

index.html
js/*.js
sass/*.sass
sass/*.scss

こんなディレクトリ構造の HTML、JS、Sass のファイルを弄るとブラウザをリロード。
Sass のファイルは css/ に .css として作成される。
それぞれディレクトリは深さ問わず。

全部監視させるとリロードが遅くなる場合、監視対象を絞れば良し。JS だけ監視するなら

gulp watch-js

HTML と Sass だけなら

gulp watch-html watch-sass

gulp minify

とやりゃ、js/、css/ 内に min が作成される。

後はノリとグルーヴ感を大切にすれば OK。