Skip to content

Commit 5bd2f61

Browse files
author
Jonathan Raoult
committed
Migrate to gulp 4
1 parent 8cfbad2 commit 5bd2f61

File tree

4 files changed

+118
-87
lines changed

4 files changed

+118
-87
lines changed

‎app/index.html

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html ng-controller="RootCtrl as rootCtrl">
33
<head>
4-
<base href="/">
4+
<base href="<%= baseUrl %>">
55
<!--hopefully triggers GPU Rasterization on Chrome-->
66
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
77

@@ -125,7 +125,7 @@ <h1 class="mt-header__app-title">
125125
</div>
126126
<div class="center">
127127
<div class="mt-header__playback-button" ng-click="rootCtrl.togglePlayback()"
128-
ng-show="rootCtrl.shouldShowPlaybackControls()">
128+
ng-show="rootCtrl.shouldShowPlaybackControls()">
129129
<div class="facet facet__animation-toggle" ng-class="{toggle: !rootCtrl.isPlaying()}">
130130
<svg class="mt-svg-icon" role="img" title="Play">
131131
<use xlink:href="images/sprite.svg#mt-play-circle"></use>
@@ -179,7 +179,7 @@ <h1 class="mt-header__app-title">
179179
ng-class="{active: entry === rootCtrl.getRunningQueueEntry(), broken: entry.skippedAtRuntime}"
180180
mt-anchor="{{entry.id}}">
181181
<div class="mt-queue__entry__thumbnail" ng-click="queueCtrl.playQueueEntry($index)"
182-
ng-disabled="!rootCtrl.shouldShowPlaybackControls()">
182+
ng-disabled="!rootCtrl.shouldShowPlaybackControls()">
183183
<div ng-style="{'background-image': 'url({{entry.video.thumbnailUrl}})'}"
184184
class="image"></div>
185185
<p class="mt-queue__entry__broken-message">Couldn't load this video</p>
@@ -197,7 +197,7 @@ <h1 class="mt-header__app-title">
197197

198198
<div class="mt-queue__entry__commands">
199199
<div class="mt-queue__entry__remove-button" ng-click="queueCtrl.removeQueueEntry(entry)"
200-
mt-click-active-class="ng-click-active">
200+
mt-click-active-class="ng-click-active">
201201
<svg class="mt-svg-icon" role="img" title="Remove">
202202
<use xlink:href="images/sprite.svg#ios-close"></use>
203203
</svg>
@@ -228,7 +228,7 @@ <h3>Results from {{pLabel}}:</h3>
228228
<div class="mt-result" ng-repeat="searchResult in searchResultsPage"
229229
ng-controller="SearchResultCtrl as searchResultCtrl">
230230
<div class="mt-result__container"
231-
ng-click="searchResultCtrl.appendResultToQueue(searchResult)">
231+
ng-click="searchResultCtrl.appendResultToQueue(searchResult)">
232232

233233
<div class="mt-result__thumbnail">
234234
<mt-smart-img source="{{searchResult.thumbnailUrl}}"
@@ -289,7 +289,7 @@ <h3>Results from {{pLabel}}:</h3>
289289
<!-- show the button only when the first page of results is fetched -->
290290
<div class="mt-search__show-more" ng-show="searchResultsCtrl.nextPageId[pId]">
291291
<div class="mt-search__show-more__button"
292-
ng-click="searchResultsCtrl.showMore(pId, searchResultsCtrl.nextPageId[pId])">
292+
ng-click="searchResultsCtrl.showMore(pId, searchResultsCtrl.nextPageId[pId])">
293293
<div class="mt-search__show-more__button__label">
294294
<div class="text">Show more</div>
295295
<div class="loader" ng-show="searchResultsCtrl.pendingMore[pId]">
@@ -305,6 +305,11 @@ <h3>Results from {{pLabel}}:</h3>
305305
</div>
306306

307307
<script src="scripts/main.js"></script>
308+
<script>
309+
'use strict';
310+
311+
mixtube({youtubeAPIKey: '<%= youtubeApiKey %>'});
312+
</script>
308313
<script src="https://www.youtube.com/iframe_api" defer></script>
309314

310315
</body>

‎app/scripts/main.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
'use strict';
22

3-
var mixtube = require('./mixtube');
4-
5-
mixtube({youtubeAPIKey: process.env.MIXTUBE_YOUTUBE_API_KEY});
3+
global.mixtube = require('./mixtube');

‎gulpfile.js

+101-71
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
'use strict';
22

3-
var path = require('path'),
3+
const path = require('path'),
44
gulp = require('gulp'),
55
gutil = require('gulp-util'),
66
plumber = require('gulp-plumber'),
77
merge = require('merge-stream'),
88
del = require('del'),
9-
runSequence = require('run-sequence'),
109
buffer = require('vinyl-buffer'),
1110
source = require('vinyl-source-stream'),
1211
watchify = require('watchify'),
@@ -25,16 +24,28 @@ var path = require('path'),
2524
csswring = require('csswring'),
2625
htmlreplace = require('gulp-html-replace'),
2726
svgSprite = require('gulp-svg-sprite'),
28-
replace = require('gulp-replace'),
2927
svg2png = require('gulp-svg2png'),
3028
favicons = require('favicons').stream,
29+
template = require('gulp-template'),
3130
ghPages = require('gulp-gh-pages'),
3231
minimist = require('minimist'),
3332
appVersion = require('./package').version,
3433
appConfig = require('./package').config.application;
3534

35+
const cmdOptions = minimist(process.argv.slice(2), {
36+
string: 'baseUrl',
37+
boolean: 'notls',
38+
default: {
39+
baseUrl: '/'
40+
}
41+
});
42+
43+
const options = Object.assign({}, cmdOptions, {
44+
youtubeApiKey: process.env.MIXTUBE_YOUTUBE_API_KEY
45+
});
46+
3647
function browserifiedSrc(src, baseDir) {
37-
var b = browserify(src, {cache: {}, packageCache: {}, fullPaths: false, debug: true});
48+
const b = browserify(src, {cache: {}, packageCache: {}, fullPaths: false, debug: true});
3849
// convert bundle paths to IDS to save bytes in browserify bundles
3950
b.plugin(collapse);
4051
b.on('log', gutil.log);
@@ -43,7 +54,7 @@ function browserifiedSrc(src, baseDir) {
4354
}
4455

4556
function watchifiedSrc(src, baseDir, pipelineFn) {
46-
var b = watchify(browserify(src, {cache: {}, packageCache: {}, fullPaths: true, debug: true}));
57+
const b = watchify(browserify(src, {cache: {}, packageCache: {}, fullPaths: true, debug: true}));
4758

4859
function doBundle() {
4960
return pipelineFn(
@@ -94,7 +105,7 @@ function doSvg() {
94105
}
95106

96107
function doInlineCss(opts) {
97-
var postCssFilters = [
108+
const postCssFilters = [
98109
autoprefixer({browsers: ['last 1 version']})
99110
];
100111
if (opts && opts.minify) {
@@ -108,7 +119,11 @@ function doInlineCss(opts) {
108119
}
109120

110121
function doHtml() {
111-
return gulp.src('app/index.html', {base: 'app'});
122+
return gulp.src('app/index.html', {base: 'app'})
123+
.pipe(template({
124+
baseUrl: options.baseUrl,
125+
youtubeApiKey: options.youtubeApiKey
126+
}));
112127
}
113128

114129
function doFavicons(htmlCodeCb) {
@@ -144,23 +159,18 @@ function doFavicons(htmlCodeCb) {
144159
}, htmlCodeCb));
145160
}
146161

147-
var options = minimist(process.argv.slice(2), {
148-
boolean: 'no-tls',
149-
default: {tls: true}
150-
});
151-
152-
gulp.task('jshint', function() {
162+
function jsHint() {
153163
return gulp.src('app/scripts/**/*.js')
154164
.pipe(jshint())
155165
.pipe(jshint.reporter('jshint-stylish'));
156-
});
166+
}
157167

158-
gulp.task('svg:dev', function() {
168+
function svgDev() {
159169
return doSvg()
160170
.pipe(gulp.dest('build/images'));
161-
});
171+
}
162172

163-
gulp.task('css:dev', function() {
173+
function cssDev() {
164174
return gulp.src('app/styles/css/main.scss')
165175
.pipe(plumber())
166176
.pipe(sourcemaps.init())
@@ -171,9 +181,9 @@ gulp.task('css:dev', function() {
171181
.pipe(sourcemaps.write())
172182
.pipe(gulp.dest('build/styles'))
173183
.pipe(reload({stream: true}));
174-
});
184+
}
175185

176-
gulp.task('js:dev', function() {
186+
function jsDev() {
177187
function pipelineFn(pipeline) {
178188
return pipeline
179189
.pipe(buffer())
@@ -187,42 +197,54 @@ gulp.task('js:dev', function() {
187197
return merge(
188198
watchifiedSrc('./app/scripts/main.js', './app/scripts/', pipelineFn),
189199
watchifiedSrc('./app/scripts/components/capabilities/videoCallPlayTest.js', './app/scripts/', pipelineFn));
190-
});
200+
}
191201

192-
gulp.task('html:dev', function() {
202+
function htmlDev() {
193203
return doHtml()
194204
.pipe(gulp.dest('build'));
195-
});
205+
}
196206

197-
gulp.task('clean:dev', function() {
198-
del('build');
199-
});
207+
function cleanDev() {
208+
return del('build');
209+
}
210+
211+
function watchDev(done) {
212+
gulp.watch('app/scripts/**/*.js', jsHint);
213+
gulp.watch('app/index.html', htmlDev);
214+
gulp.watch('app/images/*.svg', svgDev);
215+
gulp.watch('app/styles/**/*.scss', cssDev);
216+
217+
done();
218+
}
219+
220+
const serve = gulp.series(
221+
// prepare
222+
gulp.parallel(cleanDev, jsHint),
223+
224+
// pre build assets
225+
gulp.parallel(cssDev, jsDev, svgDev, htmlDev),
226+
227+
watchDev,
200228

201-
gulp.task('serve', ['clean:dev', 'jshint'], function(done) {
202-
runSequence(['css:dev', 'js:dev', 'svg:dev', 'html:dev'], function() {
203-
gulp.watch('app/scripts/**/*.js', ['jshint']);
204-
gulp.watch('app/index.html', ['html:dev']);
205-
gulp.watch('app/images/*.svg', ['svg:dev']);
206-
gulp.watch('app/styles/**/*.scss', ['css:dev']);
229+
function serverDev(done) {
207230

208231
browserSync({
209232
open: false,
210233
notify: false,
211234
server: ['build', 'app'],
212-
https: options.tls,
235+
https: !options.notls,
213236
ghostMode: false
214237
});
215238

216239
done();
217240
});
218-
});
219241

220-
gulp.task('svg:dist', function() {
242+
function svgDist() {
221243
return doSvg()
222244
.pipe(gulp.dest('dist/images'));
223-
});
245+
}
224246

225-
gulp.task('css:dist', function() {
247+
function cssDist() {
226248
return gulp.src('app/styles/css/main.scss')
227249
.pipe(plumber())
228250
.pipe(sourcemaps.init())
@@ -233,9 +255,9 @@ gulp.task('css:dist', function() {
233255
]))
234256
.pipe(sourcemaps.write('./'))
235257
.pipe(gulp.dest('dist/styles'));
236-
});
258+
}
237259

238-
gulp.task('js:dist', function() {
260+
function jsDist() {
239261
return merge(
240262
browserifiedSrc('./app/scripts/main.js', './app/scripts/'),
241263
browserifiedSrc('./app/scripts/components/capabilities/videoCallPlayTest.js', './app/scripts/'))
@@ -245,22 +267,21 @@ gulp.task('js:dist', function() {
245267
.pipe(uglify())
246268
.pipe(sourcemaps.write('./'))
247269
.pipe(gulp.dest('dist/scripts'));
248-
});
270+
}
249271

250-
gulp.task('html:dist', function() {
251-
var doHtmlStream = gutil.noop(),
252-
doFaviconsStream = gutil.noop();
272+
function htmlDist() {
273+
const doHtmlStream = gutil.noop(), doFaviconsStream = gutil.noop();
253274

254-
var doFaviconsPromise = new Promise(function(resolve) {
255-
doFavicons(function(htmlCode) {
275+
const doFaviconsPromise = new Promise(function(resolve) {
276+
doFavicons(htmlCode => {
256277
resolve(htmlCode);
257278
})
258279
.pipe(gulp.dest('dist'))
259280
.pipe(doFaviconsStream);
260281
});
261282

262283
doFaviconsPromise
263-
.then(function(htmlCode) {
284+
.then(htmlCode => {
264285

265286
doHtml()
266287
.pipe(htmlreplace({
@@ -275,36 +296,45 @@ gulp.task('html:dist', function() {
275296
});
276297

277298
return merge(doHtmlStream, doFaviconsStream);
278-
});
299+
}
279300

280-
gulp.task('clean:dist', function() {
281-
del('dist');
282-
});
301+
function cleanDist() {
302+
return del('dist');
303+
}
283304

284-
gulp.task('dist', ['clean:dist', 'jshint'], function(done) {
285-
runSequence(['js:dist', 'css:dist', 'html:dist', 'svg:dist'], done);
286-
});
305+
const dist = gulp.series(
306+
gulp.parallel(cleanDist, jsHint),
287307

288-
gulp.task('serve:dist', ['dist'], function() {
289-
browserSync({
290-
open: false,
291-
notify: false,
292-
server: {
293-
baseDir: 'dist',
294-
middleware: compression()
295-
},
296-
https: options.tls,
297-
ghostMode: false
298-
});
299-
});
308+
gulp.parallel(jsDist, cssDist, htmlDist, svgDist)
309+
);
300310

301-
gulp.task('dist:gh', ['dist'], function() {
302-
return gulp.src('dist/index.html')
303-
.pipe(replace('<base href="/">', '<base href="/mixtube/">'))
304-
.pipe(gulp.dest('dist'));
305-
});
311+
const serveDist = gulp.series(
312+
dist,
306313

307-
gulp.task('deploy:gh', ['dist:gh'], function() {
314+
function server() {
315+
browserSync({
316+
open: false,
317+
notify: false,
318+
server: {
319+
baseDir: 'dist',
320+
middleware: compression()
321+
},
322+
https: !options.notls,
323+
ghostMode: false
324+
});
325+
});
326+
327+
function pushGhPagesDist() {
308328
return gulp.src('dist/**/*')
309329
.pipe(ghPages());
310-
});
330+
}
331+
332+
const deployGh = gulp.series(
333+
dist,
334+
pushGhPagesDist
335+
);
336+
337+
gulp.task('serve', serve);
338+
gulp.task('dist', dist);
339+
gulp.task('serve:dist', serveDist);
340+
gulp.task('deploy:gh', deployGh);

0 commit comments

Comments
 (0)