dotcom/gulpfile.js at main · AndyCatch/dotcom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
// gulpfile.js
var gulp = require('gulp')
var sass = require('gulp-dart-sass')
var cleanCSS = require('gulp-clean-css')
var sourcemaps = require('gulp-sourcemaps')
var uglify = require('gulp-uglify')
var imagemin = require('gulp-imagemin')
var webpack = require('webpack-stream')

var browserSync = require('browser-sync').create()

// Set a function to compile your .scss files
gulp.task('compileCSS', function () {
	return (
		gulp
			.src('src/css/app.scss')
			.pipe(sourcemaps.init())
			.pipe(sass().on('error', sass.logError))
			// UnComment in final build
			// .pipe(
			//   cleanCSS({
			//     compatibility: 'ie8',
			//     rebase: false,
			//   })
			// )
			.pipe(sourcemaps.write())
			.pipe(gulp.dest('dist/css')) // this results in a "app.css" in the dist folder
			.pipe(browserSync.stream())
	)
})

gulp.task('compileTypeCSS', function () {
	return (
		gulp
			.src('src/css/typography.scss')
			.pipe(sourcemaps.init())
			.pipe(sass().on('error', sass.logError))
			// UnComment in final build
			.pipe(
				cleanCSS({
					compatibility: 'ie8',
					rebase: false,
				})
			)
			.pipe(sourcemaps.write())
			.pipe(gulp.dest('dist/css')) // this results in a "typography.css" in the dist folder
			.pipe(browserSync.stream())
	)
})

gulp.task('singlePageJS', function () {
	return gulp
		.src('src/js/singlePage.js')
		.pipe(sourcemaps.init())
		.pipe(
			webpack({
				mode: 'none',
				output: {
					filename: 'singlePage.js',
				},
			})
		)
		.pipe(uglify())
		.pipe(sourcemaps.write())
		.pipe(gulp.dest('dist/js'))
})

gulp.task('sequencerJS', function () {
	return gulp
		.src('src/js/sequencerMod.js')
		.pipe(sourcemaps.init())
		.pipe(
			webpack({
				mode: 'none',
				output: {
					filename: 'sequencerMod.js',
				},
			})
		)
		.pipe(uglify())
		.pipe(sourcemaps.write())
		.pipe(gulp.dest('dist/js'))
})

// No sourcemaps / webpack to keep it vanilla JS
// gulp.task('sequencerJS', function () {
// 	return gulp.src('src/js/sequencerMod.js').pipe(gulp.dest('dist/js'))
// })

gulp.task('currentPage', function () {
	return gulp.src('src/js/currentPage.js').pipe(gulp.dest('dist/js'))
})

gulp.task('html', function () {
	return gulp.src('src/*.html').pipe(gulp.dest('dist'))
})

gulp.task('fonts', function () {
	return gulp.src('src/fonts/*').pipe(gulp.dest('dist/fonts'))
})

gulp.task('images', function () {
	return gulp.src('src/images/*').pipe(imagemin()).pipe(gulp.dest('dist/images'))
})

// Sets up a function called watch(), containing the gulp.watch method
gulp.task('watch', function () {
	browserSync.init({ server: { baseDir: 'dist' } })
	// HTML Watchers
	gulp.watch('src/*.html', gulp.series('html')).on('change', browserSync.reload)

	// JS Watchers
	gulp.watch(['src/js/*.js'], gulp.series('singlePageJS')).on('change', browserSync.reload)

	gulp.watch('src/js/currentPage.js', gulp.series('currentPage')).on('change', browserSync.reload)

	gulp.watch('src/js/sequencerMod.js', gulp.series('sequencerJS')).on('change', browserSync.reload)

	// CSS / .SCSS Watchers
	gulp.watch('src/css/app.scss', gulp.series('compileCSS')).on('change', browserSync.reload)
	gulp.watch('src/css/designTokens.css', gulp.series('compileCSS')).on('change', browserSync.reload)
	gulp.watch('src/css/modules/*.scss', gulp.series('compileCSS')).on('change', browserSync.reload)
	gulp.watch('src/css/modules/partials/*.scss', gulp.series('compileCSS')).on('change', browserSync.reload)

	gulp.watch('src/css/typography.scss', gulp.series('compileTypeCSS'))

	// Misc Watchers
	gulp.watch('src/fonts/*', gulp.series('fonts'))
	gulp.watch('src/img/*', gulp.series('images'))
})

gulp.task(
	'default',
	gulp.parallel('html', 'compileCSS', 'compileTypeCSS', 'singlePageJS', 'currentPage', 'sequencerJS', 'fonts', 'images', 'watch')
)