1
|
|
|
'use strict'; |
2
|
|
|
|
3
|
|
|
import plugins from 'gulp-load-plugins'; |
4
|
|
|
import yargs from 'yargs'; |
5
|
|
|
import browser from 'browser-sync'; |
6
|
|
|
import gulp from 'gulp'; |
7
|
|
|
import path from 'path'; |
8
|
|
|
//import panini from 'panini'; |
9
|
|
|
import rimraf from 'rimraf'; |
10
|
|
|
import sherpa from 'style-sherpa'; |
11
|
|
|
import yaml from 'js-yaml'; |
12
|
|
|
import fs from 'fs'; |
13
|
|
|
import webpackStream from 'webpack-stream'; |
14
|
|
|
import webpack2 from 'webpack'; |
15
|
|
|
import named from 'vinyl-named'; |
16
|
|
|
|
17
|
|
|
import concat from 'gulp-concat'; |
18
|
|
|
import rename from 'gulp-rename'; |
19
|
|
|
import replace from 'replace-in-file'; |
20
|
|
|
import requireDir from 'require-dir'; |
21
|
|
|
|
22
|
|
|
// Load all Gulp plugins into one variable |
23
|
|
|
const $ = plugins(); |
24
|
|
|
|
25
|
|
|
// Check for --production flag |
26
|
|
|
const PRODUCTION = !!(yargs.argv.production); |
27
|
|
|
|
28
|
|
|
// Load settings from settings.yml |
29
|
|
|
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS, LIBNAMESPACE } = loadConfig(); |
30
|
|
|
|
31
|
|
|
function loadConfig() { |
32
|
|
|
let ymlFile = fs.readFileSync('gui/config.yml', 'utf8'); |
33
|
|
|
return yaml.load(ymlFile); |
34
|
|
|
} |
35
|
|
|
|
36
|
|
|
// Delete the "dist" folder |
37
|
|
|
// This happens every time a build starts |
38
|
|
|
function clean(done) { |
39
|
|
|
rimraf(PATHS.dist, done); |
40
|
|
|
} |
41
|
|
|
|
42
|
|
|
// Copy files out of the assets folder |
43
|
|
|
// This task skips over the "img", "js", and "scss" folders, which are parsed separately |
44
|
|
|
function copy() { |
45
|
|
|
return gulp.src(PATHS.assets) |
46
|
|
|
.pipe(gulp.dest(PATHS.dist + '/assets')); |
47
|
|
|
} |
48
|
|
|
|
49
|
|
|
function copyDevData() { |
50
|
|
|
return gulp.src('gui/src/data/*.*') |
51
|
|
|
.pipe(gulp.dest(PATHS.dist + '/pl')); |
52
|
|
|
} |
53
|
|
|
|
54
|
|
|
// Copy page templates into finished HTML files |
55
|
|
|
function pages() { |
56
|
|
|
if ($PL && $PL.Panini) { |
57
|
|
|
$PL.Panini.refresh(); |
58
|
|
|
return gulp.src([ |
59
|
|
|
'gui/src/pages/**/*.{html,hbs,handlebars}', |
60
|
|
|
'!gui/src/pages/pl/**/*.{html,hbs,handlebars}' |
61
|
|
|
|
62
|
|
|
]) |
63
|
|
|
.pipe($PL.Panini.render()) |
64
|
|
|
.pipe(gulp.dest(PATHS.dist)) |
65
|
|
|
; |
66
|
|
|
} else { |
67
|
|
|
return gulp.src([ |
68
|
|
|
'gui/src/pages/**/*.{html,hbs,handlebars}', |
69
|
|
|
'!gui/src/pages/pl/{dashboard,patterndocs}.html', |
70
|
|
|
'!gui/src/pages/pl/{patterns,atoms,molecules,organisms,categories}/**/*.{html,hbs,handlebars}' |
71
|
|
|
|
72
|
|
|
]) |
73
|
|
|
.pipe(panini({ |
74
|
|
|
root : 'gui/src/pages/', |
75
|
|
|
layouts : 'gui/src/layouts/', |
76
|
|
|
partials: 'gui/src/partials/', |
77
|
|
|
data : 'gui/src/data/', |
78
|
|
|
helpers : 'gui/src/helpers/' |
79
|
|
|
})) |
80
|
|
|
.pipe(gulp.dest(PATHS.dist)); |
81
|
|
|
} |
82
|
|
|
} |
83
|
|
|
|
84
|
|
|
// Load updated HTML templates and partials into Panini |
85
|
|
|
function resetPages(done) { |
86
|
|
|
panini.refresh(); |
|
|
|
|
87
|
|
|
done(); |
88
|
|
|
} |
89
|
|
|
|
90
|
|
|
// Generate a style guide from the Markdown content and HTML template in styleguide/ |
91
|
|
|
function styleGuide(done) { |
92
|
|
|
sherpa('gui/src/styleguide/index.md', { |
93
|
|
|
output: PATHS.dist + '/styleguide.html', |
94
|
|
|
template: 'gui/src/styleguide/template.html' |
95
|
|
|
}, done); |
96
|
|
|
} |
97
|
|
|
|
98
|
|
|
// Compile Sass into CSS |
99
|
|
|
// In production, the CSS is compressed |
100
|
|
|
function sass() { |
101
|
|
|
return gulp.src('gui/src/assets/scss/patternlibrary.scss') |
102
|
|
|
.pipe($.sourcemaps.init()) |
103
|
|
|
.pipe($.sass({ |
104
|
|
|
includePaths: PATHS.sass |
105
|
|
|
}) |
106
|
|
|
.on('error', $.sass.logError)) |
107
|
|
|
.pipe($.autoprefixer({ |
108
|
|
|
browsers: COMPATIBILITY |
109
|
|
|
})) |
110
|
|
|
// Comment in the pipe below to run UnCSS in production |
111
|
|
|
//.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS))) |
112
|
|
|
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' }))) |
113
|
|
|
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) |
114
|
|
|
.pipe(gulp.dest(PATHS.dist + '/assets/css')) |
115
|
|
|
.pipe(browser.reload({ stream: true })); |
116
|
|
|
} |
117
|
|
|
|
118
|
|
|
let webpackConfig = { |
119
|
|
|
module: { |
120
|
|
|
rules: [ |
121
|
|
|
{ |
122
|
|
|
test: /.js$/, |
123
|
|
|
//exclude: /(node_modules|bower_components)/, |
124
|
|
|
use: { |
125
|
|
|
loader: 'babel-loader', |
126
|
|
|
options: { |
127
|
|
|
presets: ['env'] |
128
|
|
|
} |
129
|
|
|
} |
130
|
|
|
} |
131
|
|
|
] |
132
|
|
|
} |
133
|
|
|
} |
134
|
|
|
|
135
|
|
|
|
136
|
|
|
// Combine JavaScript into one file |
137
|
|
|
// In production, the file is minified |
138
|
|
|
function javascript() { |
139
|
|
|
return gulp.src(PATHS.entries) |
140
|
|
|
.pipe(named()) |
141
|
|
|
.pipe($.sourcemaps.init()) |
142
|
|
|
.pipe(webpackStream(webpackConfig, webpack2)) |
143
|
|
|
.pipe($.if(PRODUCTION, $.uglify() |
144
|
|
|
.on('error', e => { console.log(e); }) |
|
|
|
|
145
|
|
|
)) |
146
|
|
|
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) |
147
|
|
|
.pipe(gulp.dest(PATHS.dist + '/assets/js')); |
148
|
|
|
} |
149
|
|
|
|
150
|
|
|
//Combine JavaScript dependencies into one file |
151
|
|
|
function javascriptVendors() { |
152
|
|
|
return gulp.src(PATHS.vendors) |
153
|
|
|
.pipe(concat('vendor.js')) |
154
|
|
|
.pipe(gulp.dest(PATHS.dist + '/assets/js')); |
155
|
|
|
} |
156
|
|
|
|
157
|
|
|
|
158
|
|
|
|
159
|
|
|
// Copy images to the "dist" folder |
160
|
|
|
// In production, the images are compressed |
161
|
|
|
function images() { |
162
|
|
|
return gulp.src('gui/src/assets/img/**/*') |
163
|
|
|
.pipe($.if(PRODUCTION, $.imagemin({ |
164
|
|
|
progressive: true |
165
|
|
|
}))) |
166
|
|
|
.pipe(gulp.dest(PATHS.dist + '/assets/img')); |
167
|
|
|
} |
168
|
|
|
|
169
|
|
|
// Start a server with BrowserSync to preview the site in |
170
|
|
|
function server(done) { |
171
|
|
|
browser.init({ |
172
|
|
|
server: PATHS.dist, port: PORT, startPath: "/pl" |
173
|
|
|
}); |
174
|
|
|
done(); |
175
|
|
|
} |
176
|
|
|
|
177
|
|
|
// Reload the browser with BrowserSync |
178
|
|
|
function reload(done) { |
179
|
|
|
browser.reload(); |
180
|
|
|
done(); |
181
|
|
|
} |
182
|
|
|
|
183
|
|
|
//Load updated HTML templates and partials into Panini |
184
|
|
|
gulp.task('libnamespace:clean', function (done) { |
185
|
|
|
rimraf(LIBNAMESPACE.dest, done); |
186
|
|
|
}); |
187
|
|
|
|
188
|
|
|
//Parse page templates into finished HTML files |
189
|
|
|
gulp.task('libnamespace:copy', function () { |
190
|
|
|
return gulp.src(LIBNAMESPACE.src) |
191
|
|
|
.pipe(gulp.dest(LIBNAMESPACE.dest)); |
192
|
|
|
}); |
193
|
|
|
|
194
|
|
|
|
195
|
|
|
//Load updated HTML templates and partials into Panini |
196
|
|
|
gulp.task('libnamespace:namespace', function (done) { |
197
|
|
|
var _from = LIBNAMESPACE.needles.map( function (needle, index) { |
|
|
|
|
198
|
|
|
return (new RegExp(needle, 'g')); |
199
|
|
|
}); |
200
|
|
|
replace.sync({ |
201
|
|
|
files : LIBNAMESPACE.dest+'/**/*', |
202
|
|
|
from : _from, // LIBNAMESPACE.needles, // |
203
|
|
|
to : LIBNAMESPACE.replacements, |
204
|
|
|
allowEmptyPaths : true, |
205
|
|
|
encoding : 'utf8' |
206
|
|
|
}); |
207
|
|
|
done(); |
208
|
|
|
}); |
209
|
|
|
|
210
|
|
|
//Generate a style guide from the Markdown content and HTML template in styleguide/ |
211
|
|
|
gulp.task('libnamespace:files', function () { |
212
|
|
|
|
213
|
|
|
return gulp.src(LIBNAMESPACE.src) |
214
|
|
|
.pipe(rename( function (path) { |
215
|
|
|
for (var index = 0; index < LIBNAMESPACE.needles.length; index++) { |
216
|
|
|
path.basename = String(path.basename).replace( |
217
|
|
|
LIBNAMESPACE.needles[index], |
218
|
|
|
LIBNAMESPACE.replacements[index] |
219
|
|
|
); |
220
|
|
|
} |
221
|
|
|
})) |
222
|
|
|
.pipe(gulp.dest(LIBNAMESPACE.dest)); |
223
|
|
|
|
224
|
|
|
}); |
225
|
|
|
|
226
|
|
|
gulp.task('libnamespace', |
227
|
|
|
gulp.series( |
228
|
|
|
'libnamespace:clean', |
229
|
|
|
//'libnamespace:copy', |
230
|
|
|
'libnamespace:files', |
231
|
|
|
'libnamespace:namespace' |
232
|
|
|
) |
233
|
|
|
); |
234
|
|
|
|
235
|
|
|
|
236
|
|
|
/** @var Patternlibrary */ |
237
|
|
|
var $PL = null; |
238
|
|
|
|
239
|
|
|
/** @var string */ |
240
|
|
|
var patternlibraryBaseURL = '/pl'; |
241
|
|
|
|
242
|
|
|
/** @var string */ |
243
|
|
|
var patternlibraryDestination = path.join(PATHS.dist, patternlibraryBaseURL); |
244
|
|
|
|
245
|
|
|
// copy patternlibrary assets |
246
|
|
|
gulp.task('copy:patternlibrary-assets', function () { |
247
|
|
|
return gulp.src(PATHS.patternlibrary_guiassets + '/**/*') |
248
|
|
|
.pipe(gulp.dest(PATHS.dist + PATHS.patternlibrary_assetspath)); |
249
|
|
|
}); |
250
|
|
|
|
251
|
|
|
// copy patternlibrary pages to dist folder |
252
|
|
|
gulp.task('copy:patternlibrary-pages', function () { |
253
|
|
|
return gulp.src([ |
254
|
|
|
PATHS.patternlibrary_gui + '/src/pages/patternlibrary.html' |
255
|
|
|
]) |
256
|
|
|
.pipe(gulp.dest('src/pages/pl')); |
257
|
|
|
}); |
258
|
|
|
|
259
|
|
|
//copy patternlibrary files |
260
|
|
|
gulp.task('copy:patternlibrary', |
261
|
|
|
gulp.series( |
262
|
|
|
//'clean:patternlibrary-assets', |
263
|
|
|
gulp.parallel( |
264
|
|
|
'copy:patternlibrary-assets' /*, |
265
|
|
|
'copy:patternlibrary-pages' */ |
266
|
|
|
) |
267
|
|
|
) |
268
|
|
|
); |
269
|
|
|
|
270
|
|
|
// clear patternlibrary dist folder |
271
|
|
|
gulp.task('clean:patternlibrary-dist', function (done) { |
272
|
|
|
rimraf(path.join(PATHS.dist, patternlibraryBaseURL), done); |
273
|
|
|
}); |
274
|
|
|
|
275
|
|
|
// clear patternlibrary assets folder |
276
|
|
|
gulp.task('clean:patternlibrary-assets', function (done) { |
277
|
|
|
rimraf(PATHS.dist + PATHS.patternlibrary_assetspath, done); |
278
|
|
|
}); |
279
|
|
|
|
280
|
|
|
// refresh patternlibrary dist files and data |
281
|
|
|
gulp.task('patternlibrary:refresh', function (done) { |
282
|
|
|
$PL.refresh(); |
283
|
|
|
done(); |
284
|
|
|
}); |
285
|
|
|
|
286
|
|
|
// preparations, clear dist-dir, |
287
|
|
|
gulp.task('patternlibrary:prepare', |
288
|
|
|
gulp.series( |
289
|
|
|
'clean:patternlibrary-dist' /*, |
290
|
|
|
'copy:patternlibrary' */ |
291
|
|
|
) |
292
|
|
|
); |
293
|
|
|
|
294
|
|
|
//initialize Patternlibrary task |
295
|
|
|
gulp.task('patternlibrary:init', function (done) { |
296
|
|
|
|
297
|
|
|
// initialize Patternlibrary |
298
|
|
|
//if (null == $PL) { |
299
|
|
|
/** @class Patternlibrary */ |
300
|
|
|
var Patternlibrary = require('.'); |
301
|
|
|
$PL = new Patternlibrary.Patternlibrary({ |
302
|
|
|
verbose : true, |
303
|
|
|
dest : PATHS.dist, |
304
|
|
|
basepath : patternlibraryBaseURL, |
305
|
|
|
root : 'gui/src/pages/', |
306
|
|
|
layouts : 'gui/src/layouts/', |
307
|
|
|
partials : 'gui/src/partials/', |
308
|
|
|
data : 'gui/src/data/', |
309
|
|
|
helpers : 'gui/src/helpers/' |
310
|
|
|
}); |
311
|
|
|
//} |
312
|
|
|
|
313
|
|
|
// finish task |
314
|
|
|
done(); |
315
|
|
|
|
316
|
|
|
}); |
317
|
|
|
|
318
|
|
|
// run Patternlibrary generation |
319
|
|
|
gulp.task('patternlibrary:run', function (done) { |
320
|
|
|
|
321
|
|
|
// generate Patternlibrary pages |
322
|
|
|
if ($PL != null) { |
323
|
|
|
// ...go, go $PL ! |
324
|
|
|
//return |
325
|
|
|
$PL |
326
|
|
|
.run() |
327
|
|
|
//.log("PL:", $PL) |
328
|
|
|
; |
329
|
|
|
} |
330
|
|
|
|
331
|
|
|
// finish task |
332
|
|
|
done(); |
333
|
|
|
|
334
|
|
|
}); |
335
|
|
|
|
336
|
|
|
//run Patternlibrary generation |
337
|
|
|
gulp.task('patternlibrary:re-run', gulp.series( |
338
|
|
|
'patternlibrary:init', |
339
|
|
|
'patternlibrary:run' |
340
|
|
|
)); |
341
|
|
|
|
342
|
|
|
// main 'patternlibrary' task |
343
|
|
|
gulp.task('patternlibrary', |
344
|
|
|
gulp.series( |
345
|
|
|
'patternlibrary:prepare', |
346
|
|
|
'patternlibrary:init', |
347
|
|
|
'patternlibrary:run' |
348
|
|
|
) |
349
|
|
|
); |
350
|
|
|
|
351
|
|
|
// Build the "dist" folder by running all of the below tasks |
352
|
|
|
gulp.task('build', |
353
|
|
|
gulp.series(clean, 'libnamespace', gulp.parallel(gulp.series(/*pages,*/ 'patternlibrary'), sass, javascript, javascriptVendors, images, copy/*, copyDevData*/))); |
354
|
|
|
|
355
|
|
|
// Build the site, run the server, and watch for file changes |
356
|
|
|
gulp.task('default', |
357
|
|
|
gulp.series('build', server, watch)); // )); // |
358
|
|
|
|
359
|
|
|
|
360
|
|
|
// Watch for changes to static assets, pages, Sass, and JavaScript |
361
|
|
|
function watch() { |
362
|
|
|
gulp.watch(PATHS.assets, copy); |
363
|
|
|
gulp.watch('gui/data/*.json').on('all', gulp.series(copyDevData, browser.reload)); |
364
|
|
|
gulp.watch('gui/src/pages/**/*.{html,md}').on('all', gulp.series(gulp.series(/*pages,*/ 'patternlibrary:re-run'), browser.reload)); |
365
|
|
|
gulp.watch('gui/src/{layouts,partials}/**/*.{html,md}').on('all', gulp.series(resetPages, gulp.series(/*pages,*/ 'patternlibrary:re-run'), browser.reload)); |
366
|
|
|
gulp.watch('gui/src/assets/scss/**/*.scss').on('all', sass); |
367
|
|
|
gulp.watch('gui/src/assets/*/**/*.js').on('all', gulp.series(javascript, browser.reload)); |
368
|
|
|
gulp.watch('gui/src/assets/img/**/*').on('all', gulp.series(images, browser.reload)); |
369
|
|
|
gulp.watch('gui/src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload)); |
370
|
|
|
} |
371
|
|
|
|
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.