import gulp from 'gulp'
import sourcemaps from 'gulp-sourcemaps'
import htmlmin from 'gulp-html-minifier-terser'
import lessc from 'gulp-less'
import postcss from 'gulp-postcss'
import cssnano from 'cssnano'
import colorguard from 'colorguard'

const dist = 'packages/dist'

export function html() {
	return gulp
		.src('index.html')
		.pipe(
			htmlmin({
				collapseBooleanAttributes: true,
				collapseWhitespace: true,
				quoteCharacter: '"',
				removeComments: true,
				removeAttributeQuotes: true,
				removeRedundantAttributes: true,
			})
		)
		.pipe(gulp.dest(dist))
}

export function style() {
	if (process.env.NODE_ENV !== 'production') {
		return gulp
			.src('less/style.less')
			.pipe(sourcemaps.init())
			.pipe(lessc())
			.pipe(postcss([colorguard(), cssnano({ preset: 'default' })]))
			.pipe(sourcemaps.write())
			.pipe(gulp.dest(dist))
	} else {
		return gulp
			.src('less/style.less')
			.pipe(lessc())
			.pipe(postcss([colorguard(), cssnano({ preset: 'default' })]))
			.pipe(gulp.dest(dist))
	}
}

export const all = gulp.parallel(html, style)

export const watch = gulp.series(all, () => {
	gulp.watch('index.html', html)
	gulp.watch(['less/*.less', 'less/*/*.less'], style)
})