FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

add webpack to gulp watcher · devhttps/frontend@7e655f3 · GitHub

/ frontend Public
forked from guardian/frontend

Commit 7e655f3

Browse files
sndrs
committed
add webpack to gulp watcher
1 parent b9aec68 commit 7e655f3

4 files changed

Lines changed: 78 additions & 27 deletions

File tree

‎dev/bs-config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const path = require('path');
2+
13
// To run browser-sync with this config:
24
//
35
// - npm install -g browser-sync
@@ -53,7 +55,7 @@ module.exports = {
5355
scrollThrottle: 0,
5456
reloadDelay: 0,
5557
reloadDebounce: 100,
56-
plugins: [],
58+
plugins: [path.resolve(__dirname, '..', 'node_modules', 'bs-fullscreen-message')],
5759
injectChanges: true,
5860
startPath: null,
5961
minify: false,

‎dev/gulpfile.js‎

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
const path = require('path');
44

55
const gulp = require('gulp');
6+
const gutil = require('gulp-util');
67
const sourcemaps = require('gulp-sourcemaps');
78

89
const sass = require('gulp-sass');
@@ -14,36 +15,74 @@ const filter = require('gulp-filter');
1415

1516
const browserSync = require('browser-sync').create();
1617

18+
const webpack = require('webpack');
19+
const webpackBundler = webpack(require('../webpack.config.js')());
20+
1721
const STATIC = path.resolve(__dirname, '..', 'static');
1822
const SASS_SRC = path.resolve(STATIC, 'src', 'stylesheets');
1923
const SASS_TARGET = path.resolve(STATIC, 'target', 'stylesheets');
2024

2125
const { sassSettings, browserslist, remifications } = require('../dev/css-settings');
2226
const bsConfig = require('./bs-config');
2327

24-
gulp.task('watch', (done) => {
25-
browserSync.init(bsConfig);
28+
let INITIAL_BUNDLE = true;
2629

30+
gulp.task('watch', (done) => {
2731
sassGrapher.init(SASS_SRC, { loadPaths: SASS_SRC });
2832

29-
gulp.watch([
30-
`${SASS_SRC}/**/*.scss`,
31-
], (event) => {
32-
gulp.src(event.path, { base: SASS_SRC })
33-
.pipe(sassGrapher.ancestors())
34-
.pipe(filter(['**', '!**/ie9*', '!**/old-ie.*', '!**/webfonts-*']))
35-
.pipe(sourcemaps.init({ loadMaps: true }))
36-
.pipe(sass(Object.assign({
37-
includePath: SASS_SRC,
38-
}, sassSettings)))
39-
.pipe(postcss([
40-
autoprefixer(browserslist),
41-
pxtorem(remifications),
42-
]))
43-
.pipe(sourcemaps.write('.'))
44-
.pipe(gulp.dest(SASS_TARGET))
45-
.pipe(browserSync.stream({ match: '**/*.css' }));
46-
});
33+
gutil.log('Creating initial JS bundles...', gutil.colors.cyan('one sec'));
34+
35+
webpackBundler.watch({
36+
ignored: /node_modules/,
37+
}, (err, stats) => {
38+
if (err) { throw new gutil.PluginError('webpack', err); }
39+
40+
if (INITIAL_BUNDLE) {
41+
INITIAL_BUNDLE = false;
4742

48-
done();
43+
browserSync.init(bsConfig);
44+
45+
gulp.watch([
46+
`${SASS_SRC}/**/*.scss`,
47+
], (event) => {
48+
gulp.src(event.path, { base: SASS_SRC })
49+
.pipe(sassGrapher.ancestors())
50+
.pipe(filter(['**', '!**/ie9*', '!**/old-ie.*', '!**/webfonts-*']))
51+
.pipe(sourcemaps.init({ loadMaps: true }))
52+
.pipe(sass(Object.assign({
53+
includePath: SASS_SRC,
54+
}, sassSettings)).on('error', function sassError(sassErr) {
55+
gutil.log(sassErr.message);
56+
browserSync.sockets.emit('fullscreen:message', {
57+
title: 'Sass Error:',
58+
body: sassErr.message,
59+
timeout: 100000,
60+
});
61+
this.emit('end');
62+
}))
63+
.pipe(postcss([
64+
autoprefixer(browserslist),
65+
pxtorem(remifications),
66+
]))
67+
.pipe(sourcemaps.write('.'))
68+
.pipe(gulp.dest(SASS_TARGET))
69+
.pipe(browserSync.stream({ match: '**/*.css' }))
70+
71+
// all working except you can't clear the fullscreen error message in sass
72+
73+
.on('end', () => browserSync.sockets.emit('fullscreen:message:clear'));
74+
});
75+
return done();
76+
}
77+
if (stats.hasErrors() || stats.hasWarnings()) {
78+
gutil.log(stats.toString('errors-only'));
79+
80+
return browserSync.sockets.emit('fullscreen:message', {
81+
title: 'Webpack Error:',
82+
body: stats.toString('errors-only'),
83+
timeout: 100000,
84+
});
85+
}
86+
return browserSync.reload();
87+
});
4988
});

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"babel-preset-env": "^1.1.4",
3232
"babel-preset-latest": "^6.16.0",
3333
"browser-sync": "^2.8.2",
34+
"bs-fullscreen-message": "^1.1.0",
3435
"btoa": "1.1.2",
3536
"chalk": "^1.1.3",
3637
"check-dependencies": "^0.11.0",
@@ -57,6 +58,7 @@
5758
"gulp-sass": "^3.1.0",
5859
"gulp-sass-grapher": "^0.1.4",
5960
"gulp-sourcemaps": "^1.5.2",
61+
"gulp-util": "^3.0.8",
6062
"gzip-size": "^3.0.0",
6163
"hasha": "^2.2.0",
6264
"jasmine-core": "^2.3.2",

‎yarn.lock‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1174,6 +1174,10 @@ browserslist@^1.4.0, browserslist@~1.4.0:
11741174
dependencies:
11751175
caniuse-db "^1.0.30000539"
11761176

1177+
bs-fullscreen-message@^1.1.0:
1178+
version "1.1.0"
1179+
resolved "https://registry.yarnpkg.com/bs-fullscreen-message/-/bs-fullscreen-message-1.1.0.tgz#9a479a6b9fdd46e1a67b4f37568b3d43d9f2777b"
1180+
11771181
bs-recipes@1.2.3:
11781182
version "1.2.3"
11791183
resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.2.3.tgz#0e4d17bb1cff92ef6c36608b8487d9a07571ac54"
@@ -1875,13 +1879,17 @@ date-now@^0.1.4:
18751879
version "0.1.4"
18761880
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
18771881

1878-
dateformat@^1.0.11, dateformat@^1.0.6:
1882+
dateformat@^1.0.6:
18791883
version "1.0.12"
18801884
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
18811885
dependencies:
18821886
get-stdin "^4.0.1"
18831887
meow "^3.3.0"
18841888

1889+
dateformat@^2.0.0:
1890+
version "2.0.0"
1891+
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17"
1892+
18851893
debug-fabulous@0.0.X:
18861894
version "0.0.4"
18871895
resolved "https://registry.yarnpkg.com/debug-fabulous/-/debug-fabulous-0.0.4.tgz#fa071c5d87484685424807421ca4b16b0b1a0763"
@@ -3200,15 +3208,15 @@ gulp-sourcemaps@^1.5.2:
32003208
through2 "2.X"
32013209
vinyl "1.X"
32023210

3203-
gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.4, gulp-util@^3.0.6, gulp-util@^3.0.7:
3204-
version "3.0.7"
3205-
resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.7.tgz#78925c4b8f8b49005ac01a011c557e6218941cbb"
3211+
gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.4, gulp-util@^3.0.6, gulp-util@^3.0.7, gulp-util@^3.0.8:
3212+
version "3.0.8"
3213+
resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
32063214
dependencies:
32073215
array-differ "^1.0.0"
32083216
array-uniq "^1.0.2"
32093217
beeper "^1.0.0"
32103218
chalk "^1.0.0"
3211-
dateformat "^1.0.11"
3219+
dateformat "^2.0.0"
32123220
fancy-log "^1.1.0"
32133221
gulplog "^1.0.0"
32143222
has-gulplog "^0.1.0"

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL