/
gulpfile.js
149 lines (127 loc) · 3.78 KB
/
gulpfile.js
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import http from 'http'
import gulp from 'gulp'
import gulpWatch from 'gulp-watch'
import dartSass from 'sass'
import gulpSass from 'gulp-sass'
import autoprefixer from 'gulp-autoprefixer'
import rename from 'gulp-rename'
import livereload from 'gulp-livereload'
import opn from 'opn'
import plumber from 'gulp-plumber'
import notify from 'gulp-notify'
import jshint from 'gulp-jshint'
import concat from 'gulp-concat'
import fs from 'fs'
import serveStatic from 'serve-static'
import finalhandler from 'finalhandler'
import minify from 'gulp-minify'
const packageJson = JSON.parse(fs.readFileSync('./package.json'))
const sass = gulpSass(dartSass)
// paths to files that are used in the project
var paths = {
styles: './src/scss/**/*',
pages:'./src/html/**/*',
dist: './dist/',
scripts: {
vendor: './src/js/vendor/**/*',
app: './src/js/app/**/*',
},
}
const pages = () => {
return gulp.src(paths.pages)
.pipe(gulp.dest(paths.dist))
.pipe(livereload())
}
// do the scss compilation
const styles = () => {
return gulp.src('./src/scss/style.scss')
.pipe(plumber({
errorHandler: err => {
notify.onError({
title: err.relativePath,
subtitle: 'Line ' + err.line,
message: '<%= error.messageOriginal %>'
})(err)
this.emit('end')
}
}))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(autoprefixer({ cascade: false }))
.pipe(rename('codekeyframes.css'))
.pipe(gulp.dest(paths.dist))
.pipe(livereload())
}
// show notification on js error
const lintScripts = () => {
return gulp.src(paths.scripts.app)
.pipe(plumber())
.pipe(jshint({
// https://jshint.com/docs/options/ reference all options
'esversion': 11,
'debug': true, // allows debugger statements
'asi': true, // allows missing semicolons
'sub': true, // allows bracket notation of array items
'evil': true, // allows eval statements
}))
.pipe(jshint.reporter('jshint-stylish'))
.pipe(notify(function (file) { // Use gulp-notify as jshint reporter
if (file.jshint.success) {
return false // Don't show something if success
}
var errors = file.jshint.results.map(function (data) {
if (data.error) {
return "(" + data.error.line + ':' + data.error.character + ') ' + data.error.reason
}
}).join("\n")
return file.relative + " (" + file.jshint.results.length + " errors)\n" + errors
}))
}
// compiles all js into one file: main.js
const compileScripts = () => {
return gulp.src([ paths.scripts.vendor, paths.scripts.app ])
.pipe(concat('codeKeyframes.js'))
.pipe(minify({
ext:{
src:'.js',
min:'.min.js'
}
}))
.pipe(gulp.dest(paths.dist))
.pipe(livereload())
}
const scripts = gulp.series(lintScripts, compileScripts)
scripts.description = 'compile scripts'
const compile = gulp.parallel(pages, styles, scripts)
compile.description = 'compile all sources'
const startServer = (done) => {
// // Serve up dist folder
var serve = serveStatic(paths.dist)
// Create server
var server = http.createServer(function onRequest(req, res) {
serve(req, res, finalhandler(req, res))
})
// Listen for requests on port 3000
// http://localhost:3000
server.listen(3000)
done()
}
const openBrowser = (done) => {
opn(`http://localhost:${ packageJson.port }`)
livereload.listen()
done()
}
const serve = gulp.series(compile, startServer, openBrowser)
// gulp watches the filesystem for changes, then compiles the according files
const watch = (done) => {
gulpWatch(paths.pages, function () {
pages()
})
gulpWatch(paths.styles, function () {
styles()
})
gulpWatch(paths.scripts.app, function () {
scripts()
})
done()
}
gulp.task('default', gulp.parallel(serve, watch))