forked from gdg-x/hoverboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
179 lines (151 loc) · 5.34 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
'use strict';
const del = require('del');
const gulp = require('gulp');
const gulpif = require('gulp-if');
const uglify = require('gulp-uglify');
const cssSlam = require('css-slam').gulp;
const mergeStream = require('merge-stream');
const polymerBuild = require('polymer-build');
const browserSync = require('browser-sync').create();
const history = require('connect-history-api-fallback');
const logging = require('plylog');
// logging.setVerbose();
const config = {
polymerJsonPath: './polymer.json',
build: {
rootDirectory: 'build',
bundled: true
},
swPrecacheConfigPath: './sw-precache-config.js',
templateData: [
'data/hoverboard.config',
'data/resources'
],
tempDirectory: '.temp'
};
const swPrecacheConfig = require(config.swPrecacheConfigPath);
const polymerJson = require(config.polymerJsonPath);
const buildPolymerJson = {
entrypoint: prependPath(config.tempDirectory, polymerJson.entrypoint),
shell: prependPath(config.tempDirectory, polymerJson.shell),
fragments: polymerJson.fragments.reduce((res, el) => [...res, prependPath(config.tempDirectory, el)], []),
sources: polymerJson.sources.reduce((res, el) => [...res, prependPath(config.tempDirectory, el)], []),
extraDependencies: polymerJson.extraDependencies
};
const normalize = require('./gulp-tasks/normalize.js');
const template = require('./gulp-tasks/template.js');
const images = require('./gulp-tasks/images.js');
const html = require('./gulp-tasks/html.js');
function build() {
return new Promise(resolve => {
let polymerProject = null;
let sourcesStreamSplitter = new polymerBuild.HtmlSplitter();
let dependenciesStreamSplitter = new polymerBuild.HtmlSplitter();
console.log(`Deleting ${config.build.rootDirectory} and ${config.tempDirectory} directories...`);
del([config.build.rootDirectory, config.tempDirectory])
.then(() => {
console.log(`Compiling template...`);
const compileStream = template.compile(config, polymerJson)
.on('end', () => {
polymerProject = new polymerBuild.PolymerProject(buildPolymerJson);
});
return waitFor(compileStream);
})
.then(() => {
console.log(`Polymer building...`);
const sourcesStream = polymerProject.sources()
.pipe(gulpif(/\.(png|gif|jpg|svg)$/, images.minify()))
.pipe(sourcesStreamSplitter.split())
// splitHtml doesn't split CSS https://github.com/Polymer/polymer-build/issues/32
.pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.(html|css)$/, cssSlam()))
.pipe(gulpif(/\.html$/, html.minify()))
.pipe(sourcesStreamSplitter.rejoin());
const dependenciesStream = polymerProject.dependencies()
.pipe(dependenciesStreamSplitter.split())
.pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.(html|css)$/, cssSlam()))
.pipe(gulpif(/\.html$/, html.minify()))
.pipe(dependenciesStreamSplitter.rejoin());
let buildStream = mergeStream(sourcesStream, dependenciesStream)
.once('data', () => {
console.log('Analyzing and optimizing...');
});
buildStream = buildStream.pipe(polymerProject.bundler());
buildStream = buildStream.pipe(gulp.dest(config.build.rootDirectory));
return waitFor(buildStream);
})
.then(() => {
console.log('Generating the Service Worker...');
return polymerBuild.addServiceWorker({
project: polymerProject,
buildRoot: prependPath(config.build.rootDirectory, config.tempDirectory).replace('\\', '/'),
bundled: config.build.bundled,
swPrecacheConfig
});
})
.then(() => {
console.log('Normalizing...');
const normalizeStream = normalize(config)
.on('end', () => {
del([prependPath(config.build.rootDirectory, config.tempDirectory)])
});
return waitFor(normalizeStream);
})
.then(() => {
return gulp.src(prependPath(config.build.rootDirectory, 'service-worker.js'))
.pipe(uglify())
.pipe(gulp.dest(config.build.rootDirectory));
})
.then(() => {
console.log('Build complete!');
resolve();
});
});
}
function waitFor(stream) {
return new Promise((resolve, reject) => {
stream.on('end', resolve);
stream.on('error', reject);
});
}
function copyAndReload(file) {
const dest = prependPath(config.tempDirectory, file.substring(0, file.lastIndexOf('/')))
gulp.src(file).pipe(gulp.dest(dest));
browserSync.reload();
}
function reload(done) {
browserSync.reload();
done();
}
function compileTemplate() {
return del([config.tempDirectory])
.then(() => {
return waitFor(template.compile(config, polymerJson));
});
}
function prependPath(pre, to) {
return `${pre}/${to}`;
}
gulp.task('default', build);
gulp.task('serve', gulp.series(compileTemplate, () => {
browserSync.init({
logPrefix: 'Hoverboard',
notify: false,
server: {
baseDir: [config.tempDirectory, './'],
middleware: [history()]
}
});
gulp.watch([
'data/**/*.{markdown,md}',
'images/**/*.{png,gif,jpg,svg}',
]).on('change', copyAndReload);
gulp.watch([
'data/**/*.json',
'scripts/**/*.js',
'src/**/*.html',
'./index.html',
'manifest.json'
], gulp.series(compileTemplate, reload));
}));