javascript はてなブログのCSSビルドワークフロー

Posted 2021-05-03

const gulp = require('gulp');
const sass = require('gulp-sass');
const git = require('gulp-git');
const push = require('gulp-git-push');

// ファイルのコピー先
const deployPath = '../';

// 監視
gulp.task('watch', function(){
    return gulp.watch('./src/*.scss', gulp.series('exportcss'));
});

// scss => css
gulp.task('exportcss', function () {
  console.log("======== start exportcss ========");
  return gulp.src('./src/*.scss')
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('./dest/'));
});

// src, destをgitへpushしてバックアップ
gulp.task('backup', function () {
  console.log("======== start backup ========");
  return gulp.src(['./dest/*.css','./src/*.scss'])
    .pipe(git.add())
    .pipe(git.commit(new Date().toString()))
    .pipe(push());
});

// ファイルをgitにバックアップしてコピー
gulp.task('deploy', gulp.parallel('backup', function(){
  console.log("======== start deploy ========");
  return gulp.src('./dest/*.css')
    .pipe(gulp.dest(deployPath));
}));