リハビリエンジニア

エンジニアリングのリハビリ中

いまさらGulp(4)

そんなこんなで二日間Gulpfile.jsを調整していたのですが、
どうにか自分が納得いくGulpfile.jsができました。

'use strict';

var gulp        = require('gulp');
var connect     = require('gulp-connect');
var plumber     = require('gulp-plumber');
var notify      = require('gulp-notify');
var concat      = require('gulp-concat');
var sass        = require('gulp-sass')
var pleeease    = require('gulp-pleeease');
var uglify      = require('gulp-uglify');
var runSequence = require('run-sequence');
var del         = require("del");


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

gulp.task('watch', function() {
  gulp.watch('./_build/scss/**', ['css']);
  gulp.watch('./_build/js/**', ['js']);
  gulp.watch('./*.html', ['reload']);
});

gulp.task('connect', function() {
  connect.server({
    root: './',
    livereload: true
  });
})

gulp.task('reload', function () {
  gulp.src('./*.html')
    .pipe(connect.reload());
});

gulp.task('css', function(callback) {
  return runSequence(
    'clean.css',
    'compile.css',
    'concat.css',
    'optimize.css',
    'reload',
    callback
  );
})

gulp.task('js', function(callback) {
  return runSequence(
    'clean.js',
    'concat.js',
    'minify.js',
    'reload',
    callback
  );
})

gulp.task('concat.js', function() {
  return gulp.src('./_build/js/**')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('./_build/tmp/js'));
});

gulp.task('minify.js', function() {
  return gulp.src('./_build/tmp/js/*.js')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(uglify({preserveComments: 'some'}))
    .pipe(gulp.dest('./js'));
});

gulp.task('compile.css', function() {
  return gulp.src('./_build/scss/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(sass({style: 'expanded'}))
    .pipe(gulp.dest('./_build/tmp/css'))
})

gulp.task('concat.css', function() {
  return gulp.src('./_build/tmp/css/*.css')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(concat('layout.css'))
    .pipe(gulp.dest('./css'))
})

gulp.task('optimize.css', function() {
  return gulp.src('./css/*.css')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(pleeease({
      autoprefixer: true,
      minifier: false,
      mqpacker: true
    }))
    .pipe(gulp.dest('./css'))
})

gulp.task('clean', function(callback) {
  return runSequence(
    'clean.js',
    'clean.css',
    callback
  );
})

gulp.task('clean.css', function() {
  del(['./_build/tmp/css/*.css'])
})

gulp.task('clean.js', function() {
  del(['./_build/tmp/js/*.js'])
})

解説はとくになし。

github.com