いまさら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']) })
解説はとくになし。