gulp4に対応したgulpfile.jsのサンプル

人のgulpfile.jsを見て参考にしたい！

と思ったことありませんか？

本記事では僕が業務で実際に使用しているgulpfile.jsをサンプルとして公開します。

gulp3からgulp4にアップデートしたタイミングでgulpfile.jsを更新しています。

どうぞ参考にしてください。

	var gulp = require('gulp');
	var $ = require('gulp-load-plugins')();
	var sassGlob = require('gulp-sass-glob');
	var cleanCSS = require('gulp-clean-css');
	var postcss = require('gulp-postcss'); //autoprefixerとセット
	var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与
	var cssdeclsort = require('css-declaration-sorter'); // プロパティをソートし直す
	var mozjpeg = require('imagemin-mozjpeg');
	var pngquant = require('imagemin-pngquant');
	var browserSync = require("browser-sync");

	// ディレクトリ
	var dir = {
	src: 'src/',
	dest: 'dest/'
	}

	// scssのコンパイル・圧縮
	gulp.task('sass', (done) => {
	gulp
	.src([dir.src + "scss/*/.scss", '!' + dir.src + "scss/*/_.scss"])
	.pipe($.plumber({
	errorHandler: $.notify.onError("Error: <%= error.message %>")
	})) // エラー時にプロセスが落ちないようにする
	.pipe(sassGlob()) //importの読み込みを簡潔にする
	.pipe($.sass({
	outputStyle: 'expanded' //expanded, nested, campact, compressedから選択
	}))
	.pipe(postcss([autoprefixer({
	cascade: false
	})]))
	.pipe(postcss([cssdeclsort({
	order: 'smacss'
	})])) //プロパティをソートし直す
	// alphobetically アルファベット順に
	// smacss SMACSSが定義するレイアウトに最も重要な順に
	// concentric-css Concentric CSSが提唱するボックスモデルの外側から内側の順に
	.pipe(cleanCSS())
	.pipe(gulp.dest(dir.dest + 'css')) //コンパイル後の出力先
	done()
	});

	// ejsのコンパイル・圧縮
	gulp.task('ejs', (done) => {
	gulp
	.src([dir.src + "/ejs/*/.ejs", '!' + dir.src + "/ejs/*/_.ejs", '!' + dir.src + "/ejs/_old/*/.ejs"])
	.pipe($.plumber({
	errorHandler: $.notify.onError("Error: <%= error.message %>")
	})) // エラー時にプロセスが落ちないようにする
	.pipe($.ejs({}, {}, {
	"ext": ".html"
	}))
	.pipe($.rename({
	extname: ".html"
	})) //拡張子をhtmlに
	.pipe($.htmlmin({
	// 余白を除去する
	collapseWhitespace: true,
	// HTMLコメントを除去する
	removeComments: true
	}))
	.pipe(gulp.dest(dir.dest))
	done()
	});

	// JS圧縮
	gulp.task('min-js', (done) => {
	gulp
	.src([dir.src + "js/*.js"]) // src/js/ 配下の全ファイルを対象に圧縮する
	.pipe($.plumber({
	errorHandler: $.notify.onError("Error: <%= error.message %>")
	})) // エラー時にプロセスが落ちないようにする
	.pipe($.uglify({
	compress: true, // 圧縮する
	mangle: true, // 変数の難読化を行う
	output: {
	comments: 'some' //Licenseコメントの頭にある「*!」を残す
	}
	}))
	.pipe($.rename({
	extname: '.min.js'
	}))
	.pipe(gulp.dest(dir.dest + 'js')) // js 配下に出力する
	done()
	});

	//圧縮率の定義
	var imageminOption = [
	pngquant({
	quality: [0.7, 0.85],
	}),
	mozjpeg({
	quality: 85
	}),
	$.imagemin.gifsicle({
	interlaced: false,
	optimizationLevel: 1,
	colors: 256
	}),
	$.imagemin.jpegtran(),
	$.imagemin.optipng(),
	$.imagemin.svgo()
	];
	// 画像圧縮
	gulp.task('images', function() {
	return gulp
	.src([dir.src + 'img/*/.{png,jpg,gif,svg}'])
	.pipe($.changed(dir.dest + 'img'))
	.pipe($.imagemin(imageminOption))
	.pipe(gulp.dest(dir.dest + 'img'))
	});

	// 保存時のLiveReload環境
	gulp.task('browser-sync', function(done) {
	browserSync.init({
	//ローカル開発
	server: {
	baseDir: dir.dest,
	index: "index.html"
	}
	});
	done();
	});
	gulp.task('bs-reload', function(done) {
	browserSync.reload();
	done();
	});
	var browserSync = require('browser-sync'); //ブラウザ反映

	// 監視
	gulp.task('watch', function(done) {
	gulp.watch([dir.src + 'scss/*/.scss'], gulp.task('sass'));
	gulp.watch([dir.src + 'scss/*/.scss'], gulp.task('bs-reload'));
	gulp.watch([dir.src + 'js/*/.js'], gulp.task('min-js'));
	gulp.watch([dir.src + 'js/*/.js'], gulp.task('bs-reload'));
	gulp.watch([dir.src + 'ejs/*/.ejs'], gulp.task('ejs'));
	gulp.watch([dir.src + 'ejs/*/.ejs'], gulp.task('bs-reload'));
	gulp.watch([dir.src + 'img/*/.{png,jpg,gif,svg}'], gulp.task('images'));
	done()
	});

	// gulpコマンドで最初に動作
	gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));