FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
frontend/dev/watch.js at test-code-owners · devhttps/frontend · GitHub
devhttps
/
frontend
Public
forked from
guardian/frontend
Notifications
You must be signed in to change notification settings
Fork
0
Star
0
Code
Pull requests
0
Actions
Projects
Wiki
Security and quality
0
Insights
Additional navigation options
Code
Pull requests
Actions
Projects
Wiki
Security and quality
Insights
Expand file tree
Breadcrumbs
frontend
/
dev
/
watch.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
executable file
·
118 lines (95 loc) · 3.63 KB
Breadcrumbs
frontend
/
dev
/
watch.js
Copy path
File metadata and controls
executable file
·
118 lines (95 loc) · 3.63 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
#!/usr/bin/env node
const
path
=
require
(
'path'
)
;
const
chalk
=
require
(
'chalk'
)
;
const
browserSync
=
require
(
'browser-sync'
)
.
create
(
)
;
const
bsConfig
=
require
(
'./bs-config'
)
;
// ********************************** JAVASCRIPT **********************************
// webpack watch task always performs an intial bundle, and we don't want browsersync
// listening at the point. so we use this flag to know whether any change webpack reports
// is the initial bundle, or subsequent file changes
let
INITIAL_BUNDLE
=
true
;
// just a bit of visual feedback while webpack creates its initial bundles.
// fakes a listr step
const
ora
=
require
(
'ora'
)
;
const
wpNotification
=
ora
(
{
text
:
'Create initial webpack bundles'
,
color
:
'yellow'
,
}
)
;
wpNotification
.
start
(
)
;
const
webpack
=
require
(
'webpack'
)
;
const
webpackBundler
=
webpack
(
require
(
'../webpack.config.dev.js'
)
)
;
webpackBundler
.
watch
(
{
ignored
:
/
n
o
d
e
_
m
o
d
u
l
e
s
/
,
}
,
(
err
,
stats
)
=>
{
if
(
err
)
{
// log any unexpected error
console
.
log
(
chalk
.
red
(
err
)
)
;
}
if
(
INITIAL_BUNDLE
)
{
INITIAL_BUNDLE
=
false
;
wpNotification
.
succeed
(
)
;
// now have the initial bundles, we can start browsersync
return
browserSync
.
init
(
bsConfig
)
;
}
const
info
=
stats
.
toJson
(
)
;
// send editing errors to console and browser
if
(
stats
.
hasErrors
(
)
)
{
console
.
log
(
chalk
.
red
(
info
.
errors
)
)
;
return
browserSync
.
sockets
.
emit
(
'fullscreen:message'
,
{
title
:
'Webpack Error:'
,
body
:
info
.
errors
,
timeout
:
100000
,
}
)
;
}
if
(
stats
.
hasWarnings
(
)
)
{
console
.
warn
(
chalk
.
yellow
(
info
.
warnings
)
)
;
}
// announce the changes
return
browserSync
.
reload
(
)
;
}
)
;
// ********************************** Sass **********************************
const
chokidar
=
require
(
'chokidar'
)
;
const
sassDir
=
path
.
resolve
(
__dirname
,
'../'
,
'static'
,
'src'
,
'stylesheets'
)
;
const
sassGraph
=
require
(
'sass-graph'
)
.
parseDir
(
sassDir
,
{
loadPaths
:
[
sassDir
]
,
}
)
;
const
compileSass
=
require
(
'../tools/compile-css'
)
;
// when we detect a change in a sass file, we look up the tree of imports
// and only compile what we need to. anything matching this regex, we can just ignore in dev.
const
ignoredSassRegEx
=
/
^
(
_
|
i
e
9
|
o
l
d
-
i
e
)
/
;
chokidar
.
watch
(
`
${
sassDir
}
/**/*.scss`
)
.
on
(
'change'
,
changedFile
=>
{
// see what top-level files need to be recompiled
const
filesToCompile
=
[
]
;
const
changedFileBasename
=
path
.
basename
(
changedFile
)
;
sassGraph
.
visitAncestors
(
changedFile
,
ancestorPath
=>
{
const
ancestorFileName
=
path
.
basename
(
ancestorPath
)
;
if
(
!
ignoredSassRegEx
.
test
(
ancestorFileName
)
)
{
filesToCompile
.
push
(
ancestorFileName
)
;
}
}
)
;
if
(
!
/
^
_
/
.
test
(
changedFileBasename
)
)
{
filesToCompile
.
push
(
changedFileBasename
)
;
}
// now recompile all files that matter
Promise
.
all
(
filesToCompile
.
map
(
compileSass
)
)
.
then
(
(
)
=>
{
// clear any previous error messages
browserSync
.
sockets
.
emit
(
'fullscreen:message:clear'
)
;
// announce the changes
browserSync
.
reload
(
filesToCompile
.
map
(
file
=>
file
.
replace
(
'scss'
,
'css'
)
)
)
;
}
)
.
catch
(
e
=>
{
// send editing errors to console and browser
console
.
log
(
chalk
.
red
(
`\n
${
e
.
formatted
}
`
)
)
;
browserSync
.
sockets
.
emit
(
'fullscreen:message'
,
{
title
:
'CSS Error:'
,
body
:
e
.
formatted
,
timeout
:
100000
,
}
)
;
}
)
;
}
)
;
Back
|
FazBrowse Home
|
New Git URL