| Message ID | 20190113233328.21700-1-andrey.z@gmail.com |
|---|---|
| State | Changes Requested |
| Headers | show |
| Series | web-app: update node.js components to latest versions | expand |
<div dir='auto'><div>Hi,</div><div dir="auto"><div dir="auto"><br><div class="elided-text">Am 14.01.2019 00:33 schrieb Andrey Zhizhikin <andrey.z@gmail.com>:<br type="attribution"><blockquote style="margin:0 0 0 0.8ex;border-left:1px #ccc solid;padding-left:1ex"><p dir="ltr">Some components were severely oudated, and some
<br>
components are suggested to be upgraded due to
<br>
security issues. This patch brings all components
<br>
to their actual version.
<br>
<br>
Major upgrade includes switching to gulp 4.0,
<br>
which requires the new task generation scheme,
<br>
this is also included in this patch.
<br>
<br>
Signed-off-by: Andrey Zhizhikin <andrey.z@gmail.com>
<br>
---
<br>
web-app/gulpfile.js | 31 ++++++++++++++++---------------
<br>
web-app/index.html | 4 ++--
<br>
web-app/package.json | 34 ++++++++++++++++++----------------
<br>
3 files changed, 36 insertions(+), 33 deletions(-)
<br>
<br>
diff --git a/web-app/gulpfile.js b/web-app/gulpfile.js
<br>
index 2ba5b9a..e5702f6 100755
<br>
--- a/web-app/gulpfile.js
<br>
+++ b/web-app/gulpfile.js
<br>
@@ -27,7 +27,11 @@ var knownOptions = {
<br>
<br>
var options = minimist(process.argv.slice(2), knownOptions)
<br>
<br>
-gulp.task('sass', ['clean'], () => {
<br>
+function clean() {
<br>
+ return del('dist/**', { force: true })
<br>
+}<br></p></blockquote></div></div></div><div dir="auto">Why do you (only) replace the clean task with a function?</div><div dir="auto"><div dir="auto"><div class="elided-text"><blockquote style="margin:0 0 0 0.8ex;border-left:1px #ccc solid;padding-left:1ex"><p dir="ltr">
+
<br>
+gulp.task('sass', function() {
<br>
return gulp.src('scss/*.scss')
<br>
.pipe(sass().on('error', sass.logError))
<br>
.pipe(cleanCSS({ compatibility: '*' }))
<br>
@@ -37,7 +41,7 @@ gulp.task('sass', ['clean'], () => {
<br>
.pipe(gulp.dest('dist/css'))
<br>
})
<br>
<br>
-gulp.task('minify-css', ['clean'], () => {
<br>
+gulp.task('minify-css', function() {
<br>
return gulp.src('css/*.css')
<br>
.pipe(cleanCSS({ compatibility: '*' }))
<br>
.pipe(rename({
<br>
@@ -46,7 +50,7 @@ gulp.task('minify-css', ['clean'], () => {
<br>
.pipe(gulp.dest('dist/css'))
<br>
})
<br>
<br>
-gulp.task('minify-js', ['clean'], () => {
<br>
+gulp.task('minify-js', function() {
<br>
return gulp.src('js/*.js')
<br>
.pipe(minify({
<br>
ext: {
<br>
@@ -58,7 +62,7 @@ gulp.task('minify-js', ['clean'], () => {
<br>
.pipe(gulp.dest('dist/js'))
<br>
})
<br>
<br>
-gulp.task('minify-html', ['clean'], () => {
<br>
+gulp.task('minify-html', function() {
<br>
return gulp.src('*.html')
<br>
.pipe(replace('node_modules/bootstrap/dist/css', 'css'))
<br>
.pipe(useref({ noconcat: true }))
<br>
@@ -71,7 +75,7 @@ gulp.task('minify-html', ['clean'], () => {
<br>
.pipe(gulp.dest('dist'))
<br>
})
<br>
<br>
-gulp.task('copy-css', ['clean'], () => {
<br>
+gulp.task('copy-css', function() {
<br>
return gulp.src('*.html')
<br>
.pipe(useref({ noconcat: true }))
<br>
.pipe(filter('**/*.css'))
<br>
@@ -83,7 +87,7 @@ gulp.task('copy-css', ['clean'], () => {
<br>
.pipe(gulp.dest('dist'))
<br>
})
<br>
<br>
-gulp.task('copy-js', ['clean'], () => {
<br>
+gulp.task('copy-js', function() {
<br>
return gulp.src('*.html')
<br>
.pipe(useref({ noconcat: true }))
<br>
.pipe(filter('**/*.js'))
<br>
@@ -100,20 +104,20 @@ gulp.task('copy-js', ['clean'], () => {
<br>
.pipe(gulp.dest('dist'))
<br>
})
<br>
<br>
-gulp.task('copy-fonts', ['clean'], () => {
<br>
+gulp.task('copy-fonts', function() {
<br>
return gulp.src([
<br>
- 'node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.{ttf,woff,woff2}'
<br>
+ 'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.{ttf,woff,woff2}'
<br>
])
<br>
.pipe(gulp.dest('dist/webfonts'))
<br>
})
<br>
<br>
-gulp.task('resize-images', ['clean'], () => {
<br>
+gulp.task('resize-images', function() {
<br>
return gulp.src('images/*')
<br>
.pipe(imagemin({ verbose: true }))
<br>
.pipe(gulp.dest('dist/images'))
<br>
})
<br>
<br>
-gulp.task('package', () => {
<br>
+gulp.task('package', function() {
<br>
var name = options.output.replace('.tar', '').replace('.gz', '')
<br>
return gulp.src('dist/**')
<br>
.pipe(tar(name + '.tar'))
<br>
@@ -121,10 +125,7 @@ gulp.task('package', () => {
<br>
.pipe(gulp.dest('.'))
<br>
})
<br>
<br>
-gulp.task('clean', () => {
<br>
- return del('dist/**', { force: true })
<br>
-})
<br>
<br>
-gulp.task('build', ['copy-css', 'copy-js', 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', 'resize-images'])
<br>
+gulp.task('build', gulp.series(clean, 'copy-css', 'copy-js', 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', 'resize-images'))<br></p></blockquote></div></div></div><div dir="auto">Why do you use a series and no parallel?</div><div dir="auto"><br></div><div dir="auto"><div dir="auto"><div class="elided-text"><blockquote style="margin:0 0 0 0.8ex;border-left:1px #ccc solid;padding-left:1ex"><p dir="ltr">
<br>
-gulp.task('default', ['build'])
<br>
+gulp.task('default', gulp.series('build'))
<br>
diff --git a/web-app/index.html b/web-app/index.html
<br>
index 82d22bf..641cb8c 100755
<br>
--- a/web-app/index.html
<br>
+++ b/web-app/index.html
<br>
@@ -10,8 +10,8 @@
<br>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<br>
<!-- build:css -->
<br>
<link rel="stylesheet" href="node_modules/dropzone/dist/dropzone.css">
<br>
- <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css">
<br>
- <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css">
<br>
+ <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.css">
<br>
+ <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/solid.css">
<br>
<link rel="stylesheet" href="css/swupdate.css">
<br>
<!-- endbuild -->
<br>
<br>
diff --git a/web-app/package.json b/web-app/package.json
<br>
index 5daf6a7..2909b45 100755
<br>
--- a/web-app/package.json
<br>
+++ b/web-app/package.json
<br>
@@ -1,6 +1,6 @@
<br>
{
<br>
"name": "swupdate",
<br>
- "version": "0.1.0",
<br>
+ "version": "0.2.0",
<br>
"description": "Software Update for Embedded Systems Web Front End",
<br>
"main": "index.html",
<br>
"scripts": {
<br>
@@ -16,28 +16,30 @@
<br>
"devDependencies": {
<br>
"csslint": "^1.0.5",
<br>
"del": "^3.0.0",
<br>
- "gulp": "^3.9.1",
<br>
- "gulp-clean-css": "^3.9.0",
<br>
+ "gulp": "^4.0.0",
<br>
+ "gulp-clean-css": "^4.0.0",
<br>
"gulp-filter": "^5.1.0",
<br>
- "gulp-gzip": "^1.4.1",
<br>
+ "gulp-gzip": "^1.4.2",
<br>
"gulp-html-replace": "^1.6.2",
<br>
- "gulp-htmlmin": "^4.0.0",
<br>
- "gulp-imagemin": "^4.1.0",
<br>
- "gulp-minify": "^2.1.0",
<br>
- "gulp-rename": "^1.2.2",
<br>
- "gulp-replace": "^0.6.1",
<br>
- "gulp-sass": "^3.1.0",
<br>
+ "gulp-htmlmin": "^5.0.1",
<br>
+ "gulp-imagemin": "^5.0.3",
<br>
+ "gulp-minify": "^3.1.0",
<br>
+ "gulp-rename": "^1.4.0",
<br>
+ "gulp-replace": "^1.0.0",
<br>
+ "gulp-sass": "^4.0.2",
<br>
"gulp-tar": "^2.1.0",
<br>
- "gulp-useref": "^3.1.4",
<br>
- "htmlhint": "^0.9.13",
<br>
+ "gulp-useref": "^3.1.6",
<br>
+ "htmlhint": "^0.10.1",
<br>
"minimist": "^1.2.0",
<br>
"sass-lint": "^1.12.1",
<br>
- "standard": "^10.0.3"
<br>
+ "standard": "^12.0.1",
<br>
+ "eslint": "^5.11.1"
<br></p></blockquote></div></div></div><div dir="auto">Why is this needed?</div><div dir="auto"><div dir="auto"><div class="elided-text"><blockquote style="margin:0 0 0 0.8ex;border-left:1px #ccc solid;padding-left:1ex"><p dir="ltr">
},
<br>
"dependencies": {
<br>
- "@fortawesome/fontawesome-free-webfonts": "^1.0.3",
<br>
- "bootstrap": "^4.0.0",
<br>
- "dropzone": "5.2.0",
<br>
+ "@fortawesome/fontawesome-free": "^5.6.3",<br></p></blockquote></div></div></div><div dir="auto">Is this version compatible?</div><div dir="auto"><div dir="auto"><div class="elided-text"><blockquote style="margin:0 0 0 0.8ex;border-left:1px #ccc solid;padding-left:1ex"><p dir="ltr">
+ "bootstrap": "^4.2.1",
<br>
+ "popper.js": "^1.14.6",
<br></p></blockquote></div></div></div><div dir="auto">Why is this needed?</div><div dir="auto"><div dir="auto"><div class="elided-text"><blockquote style="margin:0 0 0 0.8ex;border-left:1px #ccc solid;padding-left:1ex"><p dir="ltr">
+ "dropzone": "5.5.1",
<br>
"jquery": "^3.3.1"
<br>
},
<br>
"standard": {
<br></p></blockquote></div></div></div><div dir="auto">Regards</div><div dir="auto"> Stefan</div><div dir="auto"><br></div><div dir="auto"><div dir="auto"><div class="elided-text"><blockquote style="margin:0 0 0 0.8ex;border-left:1px #ccc solid;padding-left:1ex"><p dir="ltr"></p></blockquote></div></div></div></div>
<p></p>
-- <br />
You received this message because you are subscribed to the Google Groups "swupdate" group.<br />
To unsubscribe from this group and stop receiving emails from it, send an email to <a href="mailto:swupdate+unsubscribe@googlegroups.com">swupdate+unsubscribe@googlegroups.com</a>.<br />
To post to this group, send email to <a href="mailto:swupdate@googlegroups.com">swupdate@googlegroups.com</a>.<br />
For more options, visit <a href="https://groups.google.com/d/optout">https://groups.google.com/d/optout</a>.<br />
Hello Stefan, Thanks a lot for the review! I've realized that the gulpfile needs a different approach and therefore I would be sending another patch here, but I'd comment on your questions below anyway. On Tue, Jan 15, 2019 at 4:12 PM Stefan Herbrechtsmeier <stefan@herbrechtsmeier.net> wrote: > > Hi, > > Am 14.01.2019 00:33 schrieb Andrey Zhizhikin <andrey.z@gmail.com>: > > -gulp.task('sass', ['clean'], () => { > +function clean() { > + return del('dist/**', { force: true }) > +} > > Why do you (only) replace the clean task with a function? This was not thought through from my side. Actually, in the updated version I would rather keep the clean as a task, but would let it execute as first task in a 'build' series. All consecutive tasks would be executed in parallel. This is required by gulp 4.0 version, as task dependencies were completely deprecated and effectively removed. Gulp 4 requires now to use gulp.parallel() and gulp.series() to have a control over task execution, and this is exactly what I would be sending in the updated version. > > -gulp.task('build', ['copy-css', 'copy-js', 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', 'resize-images']) > +gulp.task('build', gulp.series(clean, 'copy-css', 'copy-js', 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', 'resize-images')) > > Why do you use a series and no parallel? Good point, would be corrected to a version like: gulp.task('build', gulp.series('clean', gulp.parallel('copy-css', 'copy-js', 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', 'resize-images'))) > > + "eslint": "^5.11.1" > > Why is this needed? eslint is required by following packages: npm WARN eslint-config-standard-jsx@6.0.2 requires a peer of eslint@>=5.0.0 but none was installed. npm WARN eslint-config-standard@12.0.0 requires a peer of eslint@>=5.0.0 but none was installed. npm WARN eslint-plugin-standard@4.0.0 requires a peer of eslint@>=5.0.0 but none was installed. npm WARN eslint-plugin-node@7.0.1 requires a peer of eslint@>=4.19.1 but none was installed. npm WARN eslint-plugin-react@7.11.1 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none was installed. npm WARN eslint-plugin-es@1.4.0 requires a peer of eslint@>=4.19.1 but none was installed. which are required by standard@12.0.1 If eslint is not included - standard@12.0.1 gets an 'UNMET PEER DEPENDENCY' > > }, > "dependencies": { > - "@fortawesome/fontawesome-free-webfonts": "^1.0.3", > - "bootstrap": "^4.0.0", > - "dropzone": "5.2.0", > + "@fortawesome/fontawesome-free": "^5.6.3", > > Is this version compatible? If you meant fortawesome - then yes, it is. Moreover, fortawesome/fontawesome-free-webfonts is not maintained anymore, and has migrated to fortawesome/fontawesome-free If you meant bootstrap - the answer is also yes. I have swupdate web interface updated and run on my HW - it is fully operable. > > + "bootstrap": "^4.2.1", > + "popper.js": "^1.14.6", > > Why is this needed? popper is required by bootstrap. > > + "dropzone": "5.5.1", > "jquery": "^3.3.1" > }, > "standard": { > > Regards > Stefan > -- Regards, Andrey.
Hi, After updating to the latest status of the git (master), I don't have any icons in the example website anymore. The icons next to 'Software Update', 'Update not Started' and 'Messages' seems to be missing. Also the icon when doing a reboot is missing. Even when rebuilding the website with NPM, they are still missing. Could it be this patch is the reason? br On Monday, January 14, 2019 at 12:33:43 AM UTC+1, Andrey Zhizhikin wrote: > Some components were severely oudated, and some > components are suggested to be upgraded due to > security issues. This patch brings all components > to their actual version. > > Major upgrade includes switching to gulp 4.0, > which requires the new task generation scheme, > this is also included in this patch. > > Signed-off-by: Andrey Zhizhikin <andr...@gmail.com <javascript:>> > --- > web-app/gulpfile.js | 31 ++++++++++++++++--------------- > web-app/index.html | 4 ++-- > web-app/package.json | 34 ++++++++++++++++++---------------- > 3 files changed, 36 insertions(+), 33 deletions(-) > > diff --git a/web-app/gulpfile.js b/web-app/gulpfile.js > index 2ba5b9a..e5702f6 100755 > --- a/web-app/gulpfile.js > +++ b/web-app/gulpfile.js > @@ -27,7 +27,11 @@ var knownOptions = { > > var options = minimist(process.argv.slice(2), knownOptions) > > -gulp.task('sass', ['clean'], () => { > +function clean() { > + return del('dist/**', { force: true }) > +} > + > +gulp.task('sass', function() { > return gulp.src('scss/*.scss') > .pipe(sass().on('error', sass.logError)) > .pipe(cleanCSS({ compatibility: '*' })) > @@ -37,7 +41,7 @@ gulp.task('sass', ['clean'], () => { > .pipe(gulp.dest('dist/css')) > }) > > -gulp.task('minify-css', ['clean'], () => { > +gulp.task('minify-css', function() { > return gulp.src('css/*.css') > .pipe(cleanCSS({ compatibility: '*' })) > .pipe(rename({ > @@ -46,7 +50,7 @@ gulp.task('minify-css', ['clean'], () => { > .pipe(gulp.dest('dist/css')) > }) > > -gulp.task('minify-js', ['clean'], () => { > +gulp.task('minify-js', function() { > return gulp.src('js/*.js') > .pipe(minify({ > ext: { > @@ -58,7 +62,7 @@ gulp.task('minify-js', ['clean'], () => { > .pipe(gulp.dest('dist/js')) > }) > > -gulp.task('minify-html', ['clean'], () => { > +gulp.task('minify-html', function() { > return gulp.src('*.html') > .pipe(replace('node_modules/bootstrap/dist/css', 'css')) > .pipe(useref({ noconcat: true })) > @@ -71,7 +75,7 @@ gulp.task('minify-html', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-css', ['clean'], () => { > +gulp.task('copy-css', function() { > return gulp.src('*.html') > .pipe(useref({ noconcat: true })) > .pipe(filter('**/*.css')) > @@ -83,7 +87,7 @@ gulp.task('copy-css', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-js', ['clean'], () => { > +gulp.task('copy-js', function() { > return gulp.src('*.html') > .pipe(useref({ noconcat: true })) > .pipe(filter('**/*.js')) > @@ -100,20 +104,20 @@ gulp.task('copy-js', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-fonts', ['clean'], () => { > +gulp.task('copy-fonts', function() { > return gulp.src([ > - > 'node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.{ttf,woff,woff2}' > > + > 'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.{ttf,woff,woff2}' > > ]) > .pipe(gulp.dest('dist/webfonts')) > }) > > -gulp.task('resize-images', ['clean'], () => { > +gulp.task('resize-images', function() { > return gulp.src('images/*') > .pipe(imagemin({ verbose: true })) > .pipe(gulp.dest('dist/images')) > }) > > -gulp.task('package', () => { > +gulp.task('package', function() { > var name = options.output.replace('.tar', '').replace('.gz', '') > return gulp.src('dist/**') > .pipe(tar(name + '.tar')) > @@ -121,10 +125,7 @@ gulp.task('package', () => { > .pipe(gulp.dest('.')) > }) > > -gulp.task('clean', () => { > - return del('dist/**', { force: true }) > -}) > > -gulp.task('build', ['copy-css', 'copy-js', 'copy-fonts', 'sass', > 'minify-css', 'minify-js', 'minify-html', 'resize-images']) > +gulp.task('build', gulp.series(clean, 'copy-css', 'copy-js', > 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', > 'resize-images')) > > -gulp.task('default', ['build']) > +gulp.task('default', gulp.series('build')) > diff --git a/web-app/index.html b/web-app/index.html > index 82d22bf..641cb8c 100755 > --- a/web-app/index.html > +++ b/web-app/index.html > @@ -10,8 +10,8 @@ > <link rel="stylesheet" > href="node_modules/bootstrap/dist/css/bootstrap.css"> > <!-- build:css --> > <link rel="stylesheet" href="node_modules/dropzone/dist/dropzone.css"> > - <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css"> > > - <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"> > > + <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"> > + <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free/css/solid.css"> > <link rel="stylesheet" href="css/swupdate.css"> > <!-- endbuild --> > > diff --git a/web-app/package.json b/web-app/package.json > index 5daf6a7..2909b45 100755 > --- a/web-app/package.json > +++ b/web-app/package.json > @@ -1,6 +1,6 @@ > { > "name": "swupdate", > - "version": "0.1.0", > + "version": "0.2.0", > "description": "Software Update for Embedded Systems Web Front End", > "main": "index.html", > "scripts": { > @@ -16,28 +16,30 @@ > "devDependencies": { > "csslint": "^1.0.5", > "del": "^3.0.0", > - "gulp": "^3.9.1", > - "gulp-clean-css": "^3.9.0", > + "gulp": "^4.0.0", > + "gulp-clean-css": "^4.0.0", > "gulp-filter": "^5.1.0", > - "gulp-gzip": "^1.4.1", > + "gulp-gzip": "^1.4.2", > "gulp-html-replace": "^1.6.2", > - "gulp-htmlmin": "^4.0.0", > - "gulp-imagemin": "^4.1.0", > - "gulp-minify": "^2.1.0", > - "gulp-rename": "^1.2.2", > - "gulp-replace": "^0.6.1", > - "gulp-sass": "^3.1.0", > + "gulp-htmlmin": "^5.0.1", > + "gulp-imagemin": "^5.0.3", > + "gulp-minify": "^3.1.0", > + "gulp-rename": "^1.4.0", > + "gulp-replace": "^1.0.0", > + "gulp-sass": "^4.0.2", > "gulp-tar": "^2.1.0", > - "gulp-useref": "^3.1.4", > - "htmlhint": "^0.9.13", > + "gulp-useref": "^3.1.6", > + "htmlhint": "^0.10.1", > "minimist": "^1.2.0", > "sass-lint": "^1.12.1", > - "standard": "^10.0.3" > + "standard": "^12.0.1", > + "eslint": "^5.11.1" > }, > "dependencies": { > - "@fortawesome/fontawesome-free-webfonts": "^1.0.3", > - "bootstrap": "^4.0.0", > - "dropzone": "5.2.0", > + "@fortawesome/fontawesome-free": "^5.6.3", > + "bootstrap": "^4.2.1", > + "popper.js": "^1.14.6", > + "dropzone": "5.5.1", > "jquery": "^3.3.1" > }, > "standard": { > -- > 2.17.1 > >
Hi, On 06/03/19 13:01, jan wrote: > Hi, > > After updating to the latest status of the git (master), I don't have > any icons in the example website anymore. > The icons next to 'Software Update', 'Update not Started' and 'Messages' > seems to be missing. > Also the icon when doing a reboot is missing. > > Even when rebuilding the website with NPM, they are still missing. > > Could it be this patch is the reason? > Added Andrey in CC - the icons are coded in the fonts-awesome. Regards, Stefano Babic > br > > On Monday, January 14, 2019 at 12:33:43 AM UTC+1, Andrey Zhizhikin wrote: > > Some components were severely oudated, and some > components are suggested to be upgraded due to > security issues. This patch brings all components > to their actual version. > > Major upgrade includes switching to gulp 4.0, > which requires the new task generation scheme, > this is also included in this patch. > > Signed-off-by: Andrey Zhizhikin <andr...@gmail.com <javascript:>> > --- > web-app/gulpfile.js | 31 ++++++++++++++++--------------- > web-app/index.html | 4 ++-- > web-app/package.json | 34 ++++++++++++++++++---------------- > 3 files changed, 36 insertions(+), 33 deletions(-) > > diff --git a/web-app/gulpfile.js b/web-app/gulpfile.js > index 2ba5b9a..e5702f6 100755 > --- a/web-app/gulpfile.js > +++ b/web-app/gulpfile.js > @@ -27,7 +27,11 @@ var knownOptions = { > > var options = minimist(process.argv.slice(2), knownOptions) > > -gulp.task('sass', ['clean'], () => { > +function clean() { > + return del('dist/**', { force: true }) > +} > + > +gulp.task('sass', function() { > return gulp.src('scss/*.scss') > .pipe(sass().on('error', sass.logError)) > .pipe(cleanCSS({ compatibility: '*' })) > @@ -37,7 +41,7 @@ gulp.task('sass', ['clean'], () => { > .pipe(gulp.dest('dist/css')) > }) > > -gulp.task('minify-css', ['clean'], () => { > +gulp.task('minify-css', function() { > return gulp.src('css/*.css') > .pipe(cleanCSS({ compatibility: '*' })) > .pipe(rename({ > @@ -46,7 +50,7 @@ gulp.task('minify-css', ['clean'], () => { > .pipe(gulp.dest('dist/css')) > }) > > -gulp.task('minify-js', ['clean'], () => { > +gulp.task('minify-js', function() { > return gulp.src('js/*.js') > .pipe(minify({ > ext: { > @@ -58,7 +62,7 @@ gulp.task('minify-js', ['clean'], () => { > .pipe(gulp.dest('dist/js')) > }) > > -gulp.task('minify-html', ['clean'], () => { > +gulp.task('minify-html', function() { > return gulp.src('*.html') > .pipe(replace('node_modules/bootstrap/dist/css', 'css')) > .pipe(useref({ noconcat: true })) > @@ -71,7 +75,7 @@ gulp.task('minify-html', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-css', ['clean'], () => { > +gulp.task('copy-css', function() { > return gulp.src('*.html') > .pipe(useref({ noconcat: true })) > .pipe(filter('**/*.css')) > @@ -83,7 +87,7 @@ gulp.task('copy-css', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-js', ['clean'], () => { > +gulp.task('copy-js', function() { > return gulp.src('*.html') > .pipe(useref({ noconcat: true })) > .pipe(filter('**/*.js')) > @@ -100,20 +104,20 @@ gulp.task('copy-js', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-fonts', ['clean'], () => { > +gulp.task('copy-fonts', function() { > return gulp.src([ > - > 'node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.{ttf,woff,woff2}' > > + > 'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.{ttf,woff,woff2}' > > ]) > .pipe(gulp.dest('dist/webfonts')) > }) > > -gulp.task('resize-images', ['clean'], () => { > +gulp.task('resize-images', function() { > return gulp.src('images/*') > .pipe(imagemin({ verbose: true })) > .pipe(gulp.dest('dist/images')) > }) > > -gulp.task('package', () => { > +gulp.task('package', function() { > var name = options.output.replace('.tar', '').replace('.gz', '') > return gulp.src('dist/**') > .pipe(tar(name + '.tar')) > @@ -121,10 +125,7 @@ gulp.task('package', () => { > .pipe(gulp.dest('.')) > }) > > -gulp.task('clean', () => { > - return del('dist/**', { force: true }) > -}) > > -gulp.task('build', ['copy-css', 'copy-js', 'copy-fonts', 'sass', > 'minify-css', 'minify-js', 'minify-html', 'resize-images']) > +gulp.task('build', gulp.series(clean, 'copy-css', 'copy-js', > 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', > 'resize-images')) > > -gulp.task('default', ['build']) > +gulp.task('default', gulp.series('build')) > diff --git a/web-app/index.html b/web-app/index.html > index 82d22bf..641cb8c 100755 > --- a/web-app/index.html > +++ b/web-app/index.html > @@ -10,8 +10,8 @@ > <link rel="stylesheet" > href="node_modules/bootstrap/dist/css/bootstrap.css"> > <!-- build:css --> > <link rel="stylesheet" > href="node_modules/dropzone/dist/dropzone.css"> > - <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css"> > > - <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"> > > + <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"> > + <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free/css/solid.css"> > <link rel="stylesheet" href="css/swupdate.css"> > <!-- endbuild --> > > diff --git a/web-app/package.json b/web-app/package.json > index 5daf6a7..2909b45 100755 > --- a/web-app/package.json > +++ b/web-app/package.json > @@ -1,6 +1,6 @@ > { > "name": "swupdate", > - "version": "0.1.0", > + "version": "0.2.0", > "description": "Software Update for Embedded Systems Web Front End", > "main": "index.html", > "scripts": { > @@ -16,28 +16,30 @@ > "devDependencies": { > "csslint": "^1.0.5", > "del": "^3.0.0", > - "gulp": "^3.9.1", > - "gulp-clean-css": "^3.9.0", > + "gulp": "^4.0.0", > + "gulp-clean-css": "^4.0.0", > "gulp-filter": "^5.1.0", > - "gulp-gzip": "^1.4.1", > + "gulp-gzip": "^1.4.2", > "gulp-html-replace": "^1.6.2", > - "gulp-htmlmin": "^4.0.0", > - "gulp-imagemin": "^4.1.0", > - "gulp-minify": "^2.1.0", > - "gulp-rename": "^1.2.2", > - "gulp-replace": "^0.6.1", > - "gulp-sass": "^3.1.0", > + "gulp-htmlmin": "^5.0.1", > + "gulp-imagemin": "^5.0.3", > + "gulp-minify": "^3.1.0", > + "gulp-rename": "^1.4.0", > + "gulp-replace": "^1.0.0", > + "gulp-sass": "^4.0.2", > "gulp-tar": "^2.1.0", > - "gulp-useref": "^3.1.4", > - "htmlhint": "^0.9.13", > + "gulp-useref": "^3.1.6", > + "htmlhint": "^0.10.1", > "minimist": "^1.2.0", > "sass-lint": "^1.12.1", > - "standard": "^10.0.3" > + "standard": "^12.0.1", > + "eslint": "^5.11.1" > }, > "dependencies": { > - "@fortawesome/fontawesome-free-webfonts": "^1.0.3", > - "bootstrap": "^4.0.0", > - "dropzone": "5.2.0", > + "@fortawesome/fontawesome-free": "^5.6.3", > + "bootstrap": "^4.2.1", > + "popper.js": "^1.14.6", > + "dropzone": "5.5.1", > "jquery": "^3.3.1" > }, > "standard": { > -- > 2.17.1 > > -- > You received this message because you are subscribed to the Google > Groups "swupdate" group. > To unsubscribe from this group and stop receiving emails from it, send > an email to swupdate+unsubscribe@googlegroups.com > <mailto:swupdate+unsubscribe@googlegroups.com>. > To post to this group, send email to swupdate@googlegroups.com > <mailto:swupdate@googlegroups.com>. > For more options, visit https://groups.google.com/d/optout.
On 06/03/19 14:40, Stefano Babic wrote: > Hi, > > On 06/03/19 13:01, jan wrote: >> Hi, >> >> After updating to the latest status of the git (master), I don't have >> any icons in the example website anymore. >> The icons next to 'Software Update', 'Update not Started' and 'Messages' >> seems to be missing. >> Also the icon when doing a reboot is missing. >> >> Even when rebuilding the website with NPM, they are still missing. >> >> Could it be this patch is the reason? >> > > Added Andrey in CC - the icons are coded in the fonts-awesome. > > Regards, > Stefano Babic > Found the reason : solid.min.css is missing in the installed website. I take a look. Best regards, Stefano Babic >> br >> >> On Monday, January 14, 2019 at 12:33:43 AM UTC+1, Andrey Zhizhikin wrote: >> >> Some components were severely oudated, and some >> components are suggested to be upgraded due to >> security issues. This patch brings all components >> to their actual version. >> >> Major upgrade includes switching to gulp 4.0, >> which requires the new task generation scheme, >> this is also included in this patch. >> >> Signed-off-by: Andrey Zhizhikin <andr...@gmail.com <javascript:>> >> --- >> web-app/gulpfile.js | 31 ++++++++++++++++--------------- >> web-app/index.html | 4 ++-- >> web-app/package.json | 34 ++++++++++++++++++---------------- >> 3 files changed, 36 insertions(+), 33 deletions(-) >> >> diff --git a/web-app/gulpfile.js b/web-app/gulpfile.js >> index 2ba5b9a..e5702f6 100755 >> --- a/web-app/gulpfile.js >> +++ b/web-app/gulpfile.js >> @@ -27,7 +27,11 @@ var knownOptions = { >> >> var options = minimist(process.argv.slice(2), knownOptions) >> >> -gulp.task('sass', ['clean'], () => { >> +function clean() { >> + return del('dist/**', { force: true }) >> +} >> + >> +gulp.task('sass', function() { >> return gulp.src('scss/*.scss') >> .pipe(sass().on('error', sass.logError)) >> .pipe(cleanCSS({ compatibility: '*' })) >> @@ -37,7 +41,7 @@ gulp.task('sass', ['clean'], () => { >> .pipe(gulp.dest('dist/css')) >> }) >> >> -gulp.task('minify-css', ['clean'], () => { >> +gulp.task('minify-css', function() { >> return gulp.src('css/*.css') >> .pipe(cleanCSS({ compatibility: '*' })) >> .pipe(rename({ >> @@ -46,7 +50,7 @@ gulp.task('minify-css', ['clean'], () => { >> .pipe(gulp.dest('dist/css')) >> }) >> >> -gulp.task('minify-js', ['clean'], () => { >> +gulp.task('minify-js', function() { >> return gulp.src('js/*.js') >> .pipe(minify({ >> ext: { >> @@ -58,7 +62,7 @@ gulp.task('minify-js', ['clean'], () => { >> .pipe(gulp.dest('dist/js')) >> }) >> >> -gulp.task('minify-html', ['clean'], () => { >> +gulp.task('minify-html', function() { >> return gulp.src('*.html') >> .pipe(replace('node_modules/bootstrap/dist/css', 'css')) >> .pipe(useref({ noconcat: true })) >> @@ -71,7 +75,7 @@ gulp.task('minify-html', ['clean'], () => { >> .pipe(gulp.dest('dist')) >> }) >> >> -gulp.task('copy-css', ['clean'], () => { >> +gulp.task('copy-css', function() { >> return gulp.src('*.html') >> .pipe(useref({ noconcat: true })) >> .pipe(filter('**/*.css')) >> @@ -83,7 +87,7 @@ gulp.task('copy-css', ['clean'], () => { >> .pipe(gulp.dest('dist')) >> }) >> >> -gulp.task('copy-js', ['clean'], () => { >> +gulp.task('copy-js', function() { >> return gulp.src('*.html') >> .pipe(useref({ noconcat: true })) >> .pipe(filter('**/*.js')) >> @@ -100,20 +104,20 @@ gulp.task('copy-js', ['clean'], () => { >> .pipe(gulp.dest('dist')) >> }) >> >> -gulp.task('copy-fonts', ['clean'], () => { >> +gulp.task('copy-fonts', function() { >> return gulp.src([ >> - >> 'node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.{ttf,woff,woff2}' >> >> + >> 'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.{ttf,woff,woff2}' >> >> ]) >> .pipe(gulp.dest('dist/webfonts')) >> }) >> >> -gulp.task('resize-images', ['clean'], () => { >> +gulp.task('resize-images', function() { >> return gulp.src('images/*') >> .pipe(imagemin({ verbose: true })) >> .pipe(gulp.dest('dist/images')) >> }) >> >> -gulp.task('package', () => { >> +gulp.task('package', function() { >> var name = options.output.replace('.tar', '').replace('.gz', '') >> return gulp.src('dist/**') >> .pipe(tar(name + '.tar')) >> @@ -121,10 +125,7 @@ gulp.task('package', () => { >> .pipe(gulp.dest('.')) >> }) >> >> -gulp.task('clean', () => { >> - return del('dist/**', { force: true }) >> -}) >> >> -gulp.task('build', ['copy-css', 'copy-js', 'copy-fonts', 'sass', >> 'minify-css', 'minify-js', 'minify-html', 'resize-images']) >> +gulp.task('build', gulp.series(clean, 'copy-css', 'copy-js', >> 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', >> 'resize-images')) >> >> -gulp.task('default', ['build']) >> +gulp.task('default', gulp.series('build')) >> diff --git a/web-app/index.html b/web-app/index.html >> index 82d22bf..641cb8c 100755 >> --- a/web-app/index.html >> +++ b/web-app/index.html >> @@ -10,8 +10,8 @@ >> <link rel="stylesheet" >> href="node_modules/bootstrap/dist/css/bootstrap.css"> >> <!-- build:css --> >> <link rel="stylesheet" >> href="node_modules/dropzone/dist/dropzone.css"> >> - <link rel="stylesheet" >> href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css"> >> >> - <link rel="stylesheet" >> href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"> >> >> + <link rel="stylesheet" >> href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"> >> + <link rel="stylesheet" >> href="node_modules/@fortawesome/fontawesome-free/css/solid.css"> >> <link rel="stylesheet" href="css/swupdate.css"> >> <!-- endbuild --> >> >> diff --git a/web-app/package.json b/web-app/package.json >> index 5daf6a7..2909b45 100755 >> --- a/web-app/package.json >> +++ b/web-app/package.json >> @@ -1,6 +1,6 @@ >> { >> "name": "swupdate", >> - "version": "0.1.0", >> + "version": "0.2.0", >> "description": "Software Update for Embedded Systems Web Front End", >> "main": "index.html", >> "scripts": { >> @@ -16,28 +16,30 @@ >> "devDependencies": { >> "csslint": "^1.0.5", >> "del": "^3.0.0", >> - "gulp": "^3.9.1", >> - "gulp-clean-css": "^3.9.0", >> + "gulp": "^4.0.0", >> + "gulp-clean-css": "^4.0.0", >> "gulp-filter": "^5.1.0", >> - "gulp-gzip": "^1.4.1", >> + "gulp-gzip": "^1.4.2", >> "gulp-html-replace": "^1.6.2", >> - "gulp-htmlmin": "^4.0.0", >> - "gulp-imagemin": "^4.1.0", >> - "gulp-minify": "^2.1.0", >> - "gulp-rename": "^1.2.2", >> - "gulp-replace": "^0.6.1", >> - "gulp-sass": "^3.1.0", >> + "gulp-htmlmin": "^5.0.1", >> + "gulp-imagemin": "^5.0.3", >> + "gulp-minify": "^3.1.0", >> + "gulp-rename": "^1.4.0", >> + "gulp-replace": "^1.0.0", >> + "gulp-sass": "^4.0.2", >> "gulp-tar": "^2.1.0", >> - "gulp-useref": "^3.1.4", >> - "htmlhint": "^0.9.13", >> + "gulp-useref": "^3.1.6", >> + "htmlhint": "^0.10.1", >> "minimist": "^1.2.0", >> "sass-lint": "^1.12.1", >> - "standard": "^10.0.3" >> + "standard": "^12.0.1", >> + "eslint": "^5.11.1" >> }, >> "dependencies": { >> - "@fortawesome/fontawesome-free-webfonts": "^1.0.3", >> - "bootstrap": "^4.0.0", >> - "dropzone": "5.2.0", >> + "@fortawesome/fontawesome-free": "^5.6.3", >> + "bootstrap": "^4.2.1", >> + "popper.js": "^1.14.6", >> + "dropzone": "5.5.1", >> "jquery": "^3.3.1" >> }, >> "standard": { >> -- >> 2.17.1 >> >> -- >> You received this message because you are subscribed to the Google >> Groups "swupdate" group. >> To unsubscribe from this group and stop receiving emails from it, send >> an email to swupdate+unsubscribe@googlegroups.com >> <mailto:swupdate+unsubscribe@googlegroups.com>. >> To post to this group, send email to swupdate@googlegroups.com >> <mailto:swupdate@googlegroups.com>. >> For more options, visit https://groups.google.com/d/optout. > >
Hi Jan, On 06/03/19 14:44, Stefano Babic wrote: > On 06/03/19 14:40, Stefano Babic wrote: >> Hi, >> >> On 06/03/19 13:01, jan wrote: >>> Hi, >>> >>> After updating to the latest status of the git (master), I don't have >>> any icons in the example website anymore. >>> The icons next to 'Software Update', 'Update not Started' and 'Messages' >>> seems to be missing. >>> Also the icon when doing a reboot is missing. >>> >>> Even when rebuilding the website with NPM, they are still missing. >>> >>> Could it be this patch is the reason? >>> >> >> Added Andrey in CC - the icons are coded in the fonts-awesome. >> >> Regards, >> Stefano Babic >> > > > > Found the reason : solid.min.css is missing in the installed website. > > I take a look. > Thanks for reporting this - I confirm the issue. I have fixed it and tested myself, it looks ok now. I have also pushed the current git commit to meta-swupdate to make TOT to be built instead of a previous version (it has hidden the issue). Best regards, Stefano Babic
Hello all, On Wed, Mar 6, 2019 at 3:02 PM Stefano Babic <sbabic@denx.de> wrote: > > Hi Jan, > > On 06/03/19 14:44, Stefano Babic wrote: > > On 06/03/19 14:40, Stefano Babic wrote: > >> Hi, > >> > >> On 06/03/19 13:01, jan wrote: > >>> Hi, > >>> > >>> After updating to the latest status of the git (master), I don't have > >>> any icons in the example website anymore. > >>> The icons next to 'Software Update', 'Update not Started' and 'Messages' > >>> seems to be missing. > >>> Also the icon when doing a reboot is missing. > >>> > >>> Even when rebuilding the website with NPM, they are still missing. > >>> > >>> Could it be this patch is the reason? > >>> > >> > >> Added Andrey in CC - the icons are coded in the fonts-awesome. > >> > >> Regards, > >> Stefano Babic > >> > > > > > > > > Found the reason : solid.min.css is missing in the installed website. > > > > I take a look. > > > > Thanks for reporting this - I confirm the issue. > > I have fixed it and tested myself, it looks ok now. I have also pushed > the current git commit to meta-swupdate to make TOT to be built instead > of a previous version (it has hidden the issue). I've also tested the latest master build and confirm that the solid.min.css is produced in the dist folder. This was apparently missing in the example code and Stefano already merged it in. Stefano, As an RFC: Does it make sense to consider that the example is always populated from the web-app during the build? By this it would be guaranteed to always match the content of the web-app and would possibly avoid having similar issues in the future. On the other hand - people would be forced to use npm during the build process, which could introduce an unnecessary dependency... For now, I honestly do not see any other way how the web-app development folder (where the actual SWUpdate website should be customized by end users) could be automatically synced with the example website which is included in the build of SWUpdate component. The other obvious alternative would be just to highlight this in the documentation and let the end user know that anything apart from example webpage should be developed in web-app and synced with the SWUpdate build. Please tell me what you think on above. Thanks a lot!
Thanks for the update. About the building of the website during the build process, please note that npm builds in Yocto are rather not that well supported. On Monday, January 14, 2019 at 12:33:43 AM UTC+1, Andrey Zhizhikin wrote: > Some components were severely oudated, and some > components are suggested to be upgraded due to > security issues. This patch brings all components > to their actual version. > > Major upgrade includes switching to gulp 4.0, > which requires the new task generation scheme, > this is also included in this patch. > > Signed-off-by: Andrey Zhizhikin <andr...@gmail.com <javascript:>> > --- > web-app/gulpfile.js | 31 ++++++++++++++++--------------- > web-app/index.html | 4 ++-- > web-app/package.json | 34 ++++++++++++++++++---------------- > 3 files changed, 36 insertions(+), 33 deletions(-) > > diff --git a/web-app/gulpfile.js b/web-app/gulpfile.js > index 2ba5b9a..e5702f6 100755 > --- a/web-app/gulpfile.js > +++ b/web-app/gulpfile.js > @@ -27,7 +27,11 @@ var knownOptions = { > > var options = minimist(process.argv.slice(2), knownOptions) > > -gulp.task('sass', ['clean'], () => { > +function clean() { > + return del('dist/**', { force: true }) > +} > + > +gulp.task('sass', function() { > return gulp.src('scss/*.scss') > .pipe(sass().on('error', sass.logError)) > .pipe(cleanCSS({ compatibility: '*' })) > @@ -37,7 +41,7 @@ gulp.task('sass', ['clean'], () => { > .pipe(gulp.dest('dist/css')) > }) > > -gulp.task('minify-css', ['clean'], () => { > +gulp.task('minify-css', function() { > return gulp.src('css/*.css') > .pipe(cleanCSS({ compatibility: '*' })) > .pipe(rename({ > @@ -46,7 +50,7 @@ gulp.task('minify-css', ['clean'], () => { > .pipe(gulp.dest('dist/css')) > }) > > -gulp.task('minify-js', ['clean'], () => { > +gulp.task('minify-js', function() { > return gulp.src('js/*.js') > .pipe(minify({ > ext: { > @@ -58,7 +62,7 @@ gulp.task('minify-js', ['clean'], () => { > .pipe(gulp.dest('dist/js')) > }) > > -gulp.task('minify-html', ['clean'], () => { > +gulp.task('minify-html', function() { > return gulp.src('*.html') > .pipe(replace('node_modules/bootstrap/dist/css', 'css')) > .pipe(useref({ noconcat: true })) > @@ -71,7 +75,7 @@ gulp.task('minify-html', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-css', ['clean'], () => { > +gulp.task('copy-css', function() { > return gulp.src('*.html') > .pipe(useref({ noconcat: true })) > .pipe(filter('**/*.css')) > @@ -83,7 +87,7 @@ gulp.task('copy-css', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-js', ['clean'], () => { > +gulp.task('copy-js', function() { > return gulp.src('*.html') > .pipe(useref({ noconcat: true })) > .pipe(filter('**/*.js')) > @@ -100,20 +104,20 @@ gulp.task('copy-js', ['clean'], () => { > .pipe(gulp.dest('dist')) > }) > > -gulp.task('copy-fonts', ['clean'], () => { > +gulp.task('copy-fonts', function() { > return gulp.src([ > - > 'node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.{ttf,woff,woff2}' > > + > 'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.{ttf,woff,woff2}' > > ]) > .pipe(gulp.dest('dist/webfonts')) > }) > > -gulp.task('resize-images', ['clean'], () => { > +gulp.task('resize-images', function() { > return gulp.src('images/*') > .pipe(imagemin({ verbose: true })) > .pipe(gulp.dest('dist/images')) > }) > > -gulp.task('package', () => { > +gulp.task('package', function() { > var name = options.output.replace('.tar', '').replace('.gz', '') > return gulp.src('dist/**') > .pipe(tar(name + '.tar')) > @@ -121,10 +125,7 @@ gulp.task('package', () => { > .pipe(gulp.dest('.')) > }) > > -gulp.task('clean', () => { > - return del('dist/**', { force: true }) > -}) > > -gulp.task('build', ['copy-css', 'copy-js', 'copy-fonts', 'sass', > 'minify-css', 'minify-js', 'minify-html', 'resize-images']) > +gulp.task('build', gulp.series(clean, 'copy-css', 'copy-js', > 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', > 'resize-images')) > > -gulp.task('default', ['build']) > +gulp.task('default', gulp.series('build')) > diff --git a/web-app/index.html b/web-app/index.html > index 82d22bf..641cb8c 100755 > --- a/web-app/index.html > +++ b/web-app/index.html > @@ -10,8 +10,8 @@ > <link rel="stylesheet" > href="node_modules/bootstrap/dist/css/bootstrap.css"> > <!-- build:css --> > <link rel="stylesheet" href="node_modules/dropzone/dist/dropzone.css"> > - <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css"> > > - <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"> > > + <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"> > + <link rel="stylesheet" > href="node_modules/@fortawesome/fontawesome-free/css/solid.css"> > <link rel="stylesheet" href="css/swupdate.css"> > <!-- endbuild --> > > diff --git a/web-app/package.json b/web-app/package.json > index 5daf6a7..2909b45 100755 > --- a/web-app/package.json > +++ b/web-app/package.json > @@ -1,6 +1,6 @@ > { > "name": "swupdate", > - "version": "0.1.0", > + "version": "0.2.0", > "description": "Software Update for Embedded Systems Web Front End", > "main": "index.html", > "scripts": { > @@ -16,28 +16,30 @@ > "devDependencies": { > "csslint": "^1.0.5", > "del": "^3.0.0", > - "gulp": "^3.9.1", > - "gulp-clean-css": "^3.9.0", > + "gulp": "^4.0.0", > + "gulp-clean-css": "^4.0.0", > "gulp-filter": "^5.1.0", > - "gulp-gzip": "^1.4.1", > + "gulp-gzip": "^1.4.2", > "gulp-html-replace": "^1.6.2", > - "gulp-htmlmin": "^4.0.0", > - "gulp-imagemin": "^4.1.0", > - "gulp-minify": "^2.1.0", > - "gulp-rename": "^1.2.2", > - "gulp-replace": "^0.6.1", > - "gulp-sass": "^3.1.0", > + "gulp-htmlmin": "^5.0.1", > + "gulp-imagemin": "^5.0.3", > + "gulp-minify": "^3.1.0", > + "gulp-rename": "^1.4.0", > + "gulp-replace": "^1.0.0", > + "gulp-sass": "^4.0.2", > "gulp-tar": "^2.1.0", > - "gulp-useref": "^3.1.4", > - "htmlhint": "^0.9.13", > + "gulp-useref": "^3.1.6", > + "htmlhint": "^0.10.1", > "minimist": "^1.2.0", > "sass-lint": "^1.12.1", > - "standard": "^10.0.3" > + "standard": "^12.0.1", > + "eslint": "^5.11.1" > }, > "dependencies": { > - "@fortawesome/fontawesome-free-webfonts": "^1.0.3", > - "bootstrap": "^4.0.0", > - "dropzone": "5.2.0", > + "@fortawesome/fontawesome-free": "^5.6.3", > + "bootstrap": "^4.2.1", > + "popper.js": "^1.14.6", > + "dropzone": "5.5.1", > "jquery": "^3.3.1" > }, > "standard": { > -- > 2.17.1 > >
Hi Andrey, On 06/03/19 15:16, Andrey Zhizhikin wrote: > Hello all, > > On Wed, Mar 6, 2019 at 3:02 PM Stefano Babic <sbabic@denx.de> wrote: >> >> Hi Jan, >> >> On 06/03/19 14:44, Stefano Babic wrote: >>> On 06/03/19 14:40, Stefano Babic wrote: >>>> Hi, >>>> >>>> On 06/03/19 13:01, jan wrote: >>>>> Hi, >>>>> >>>>> After updating to the latest status of the git (master), I don't have >>>>> any icons in the example website anymore. >>>>> The icons next to 'Software Update', 'Update not Started' and 'Messages' >>>>> seems to be missing. >>>>> Also the icon when doing a reboot is missing. >>>>> >>>>> Even when rebuilding the website with NPM, they are still missing. >>>>> >>>>> Could it be this patch is the reason? >>>>> >>>> >>>> Added Andrey in CC - the icons are coded in the fonts-awesome. >>>> >>>> Regards, >>>> Stefano Babic >>>> >>> >>> >>> >>> Found the reason : solid.min.css is missing in the installed website. >>> >>> I take a look. >>> >> >> Thanks for reporting this - I confirm the issue. >> >> I have fixed it and tested myself, it looks ok now. I have also pushed >> the current git commit to meta-swupdate to make TOT to be built instead >> of a previous version (it has hidden the issue). > > I've also tested the latest master build and confirm that the > solid.min.css is produced in the dist folder. > This was apparently missing in the example code and Stefano already > merged it in. > > Stefano, > > As an RFC: > Does it make sense to consider that the example is always populated > from the web-app during the build? > By this it would be guaranteed to always match the content of the > web-app and would possibly avoid having similar > issues in the future. This was desirable and was discussed at the beginning. Rather, support for npm in OE was far away to be optimal. To go in this direction, we need that building the web-app must be straightforward, and it is not. For this reason I decided to store the generated website into the repo - I learned that most users take the website as it is. This was with old "non-responsive" website, too, and people just replaced the logo and background with the ones of the company where they work. I am very glad that the web-app replaced the old crap. > On the other hand - people would be forced to use npm during the build > process, which could introduce an > unnecessary dependency... Right - this is the reason why the "dist" from build is stored into examples. > > For now, I honestly do not see any other way how the web-app > development folder (where the actual SWUpdate > website should be customized by end users) could be automatically > synced with the example website which is > included in the build of SWUpdate component. 99% of the users replace logo, colours and background. Just a few of them build their own web-app. It seems overkilling to constrain to build the website, mainly due to the poor npm support in OE. > > The other obvious alternative would be just to highlight this in the > documentation and let the end user know that > anything apart from example webpage should be developed in web-app and > synced with the SWUpdate build. > > Please tell me what you think on above. The best way to do will be to put web-app in a separate repo and build from source in OE. But as this generates a lot of problems, it is better to stick with the current way. > > Thanks a lot! > Best regards, Stefano
On Wed, Mar 6, 2019 at 5:57 PM Stefano Babic <sbabic@denx.de> wrote: > > Hi Andrey, > > On 06/03/19 15:16, Andrey Zhizhikin wrote: > > Hello all, > > > > On Wed, Mar 6, 2019 at 3:02 PM Stefano Babic <sbabic@denx.de> wrote: > >> > >> Hi Jan, > >> > >> On 06/03/19 14:44, Stefano Babic wrote: > >>> On 06/03/19 14:40, Stefano Babic wrote: > >>>> Hi, > >>>> > >>>> On 06/03/19 13:01, jan wrote: > >>>>> Hi, > >>>>> > >>>>> After updating to the latest status of the git (master), I don't have > >>>>> any icons in the example website anymore. > >>>>> The icons next to 'Software Update', 'Update not Started' and 'Messages' > >>>>> seems to be missing. > >>>>> Also the icon when doing a reboot is missing. > >>>>> > >>>>> Even when rebuilding the website with NPM, they are still missing. > >>>>> > >>>>> Could it be this patch is the reason? > >>>>> > >>>> > >>>> Added Andrey in CC - the icons are coded in the fonts-awesome. > >>>> > >>>> Regards, > >>>> Stefano Babic > >>>> > >>> > >>> > >>> > >>> Found the reason : solid.min.css is missing in the installed website. > >>> > >>> I take a look. > >>> > >> > >> Thanks for reporting this - I confirm the issue. > >> > >> I have fixed it and tested myself, it looks ok now. I have also pushed > >> the current git commit to meta-swupdate to make TOT to be built instead > >> of a previous version (it has hidden the issue). > > > > I've also tested the latest master build and confirm that the > > solid.min.css is produced in the dist folder. > > This was apparently missing in the example code and Stefano already > > merged it in. > > > > Stefano, > > > > As an RFC: > > Does it make sense to consider that the example is always populated > > from the web-app during the build? > > By this it would be guaranteed to always match the content of the > > web-app and would possibly avoid having similar > > issues in the future. > > This was desirable and was discussed at the beginning. Rather, support > for npm in OE was far away to be optimal. To go in this direction, we > need that building the web-app must be straightforward, and it is not. > > For this reason I decided to store the generated website into the repo - > I learned that most users take the website as it is. This was with old > "non-responsive" website, too, and people just replaced the logo and > background with the ones of the company where they work. I am very glad > that the web-app replaced the old crap. Thanks a lot for clarifications here! I was really suspecting that this is the case, and you have it confirmed. > > > On the other hand - people would be forced to use npm during the build > > process, which could introduce an > > unnecessary dependency... > > Right - this is the reason why the "dist" from build is stored into > examples. > > > > > For now, I honestly do not see any other way how the web-app > > development folder (where the actual SWUpdate > > website should be customized by end users) could be automatically > > synced with the example website which is > > included in the build of SWUpdate component. > > 99% of the users replace logo, colours and background. Just a few of > them build their own web-app. It seems overkilling to constrain to build > the website, mainly due to the poor npm support in OE. > > > > > The other obvious alternative would be just to highlight this in the > > documentation and let the end user know that > > anything apart from example webpage should be developed in web-app and > > synced with the SWUpdate build. > > > > Please tell me what you think on above. > > The best way to do will be to put web-app in a separate repo and build > from source in OE. But as this generates a lot of problems, it is better > to stick with the current way. I might look into the current state of npm support from OE, since it might've advanced a bit with later releases. I really like above approach you described when the web-app is put into a separate repo - this would give a lot more freedom for those who are modifying the web-app more than just replacing media. Besides, in this case the web-app can also be developed further as a standalone component (new features, Node.js updates and so on). > > > > > Thanks a lot! > > > > Best regards, > Stefano > > -- > ===================================================================== > DENX Software Engineering GmbH, Managing Director: Wolfgang Denk > HRB 165235 Munich, Office: Kirchenstr.5, D-82194 Groebenzell, Germany > Phone: +49-8142-66989-53 Fax: +49-8142-66989-80 Email: sbabic@denx.de > ===================================================================== -- Regards, Andrey.
Hi Andrey, On 07/03/19 10:41, Andrey Zhizhikin wrote: > On Wed, Mar 6, 2019 at 5:57 PM Stefano Babic <sbabic@denx.de> wrote: >> >> Hi Andrey, >> >> On 06/03/19 15:16, Andrey Zhizhikin wrote: >>> Hello all, >>> >>> On Wed, Mar 6, 2019 at 3:02 PM Stefano Babic <sbabic@denx.de> wrote: >>>> >>>> Hi Jan, >>>> >>>> On 06/03/19 14:44, Stefano Babic wrote: >>>>> On 06/03/19 14:40, Stefano Babic wrote: >>>>>> Hi, >>>>>> >>>>>> On 06/03/19 13:01, jan wrote: >>>>>>> Hi, >>>>>>> >>>>>>> After updating to the latest status of the git (master), I don't have >>>>>>> any icons in the example website anymore. >>>>>>> The icons next to 'Software Update', 'Update not Started' and 'Messages' >>>>>>> seems to be missing. >>>>>>> Also the icon when doing a reboot is missing. >>>>>>> >>>>>>> Even when rebuilding the website with NPM, they are still missing. >>>>>>> >>>>>>> Could it be this patch is the reason? >>>>>>> >>>>>> >>>>>> Added Andrey in CC - the icons are coded in the fonts-awesome. >>>>>> >>>>>> Regards, >>>>>> Stefano Babic >>>>>> >>>>> >>>>> >>>>> >>>>> Found the reason : solid.min.css is missing in the installed website. >>>>> >>>>> I take a look. >>>>> >>>> >>>> Thanks for reporting this - I confirm the issue. >>>> >>>> I have fixed it and tested myself, it looks ok now. I have also pushed >>>> the current git commit to meta-swupdate to make TOT to be built instead >>>> of a previous version (it has hidden the issue). >>> >>> I've also tested the latest master build and confirm that the >>> solid.min.css is produced in the dist folder. >>> This was apparently missing in the example code and Stefano already >>> merged it in. >>> >>> Stefano, >>> >>> As an RFC: >>> Does it make sense to consider that the example is always populated >>> from the web-app during the build? >>> By this it would be guaranteed to always match the content of the >>> web-app and would possibly avoid having similar >>> issues in the future. >> >> This was desirable and was discussed at the beginning. Rather, support >> for npm in OE was far away to be optimal. To go in this direction, we >> need that building the web-app must be straightforward, and it is not. >> >> For this reason I decided to store the generated website into the repo - >> I learned that most users take the website as it is. This was with old >> "non-responsive" website, too, and people just replaced the logo and >> background with the ones of the company where they work. I am very glad >> that the web-app replaced the old crap. > > Thanks a lot for clarifications here! I was really suspecting that > this is the case, and you have it confirmed. Right. > >> >>> On the other hand - people would be forced to use npm during the build >>> process, which could introduce an >>> unnecessary dependency... >> >> Right - this is the reason why the "dist" from build is stored into >> examples. >> >>> >>> For now, I honestly do not see any other way how the web-app >>> development folder (where the actual SWUpdate >>> website should be customized by end users) could be automatically >>> synced with the example website which is >>> included in the build of SWUpdate component. >> >> 99% of the users replace logo, colours and background. Just a few of >> them build their own web-app. It seems overkilling to constrain to build >> the website, mainly due to the poor npm support in OE. >> >>> >>> The other obvious alternative would be just to highlight this in the >>> documentation and let the end user know that >>> anything apart from example webpage should be developed in web-app and >>> synced with the SWUpdate build. >>> >>> Please tell me what you think on above. >> >> The best way to do will be to put web-app in a separate repo and build >> from source in OE. But as this generates a lot of problems, it is better >> to stick with the current way. > > I might look into the current state of npm support from OE, since it > might've advanced a bit with later releases. Right, I have not checked after -rocko, there could be some improvements. > I really like above > approach you described when the web-app is put into a separate repo - > this would give a lot more freedom for those who are modifying the > web-app more than just replacing media. Correct. > Besides, in this case the > web-app can also be developed further as a standalone component (new > features, Node.js updates and so on). > Best regards, Stefano
diff --git a/web-app/gulpfile.js b/web-app/gulpfile.js index 2ba5b9a..e5702f6 100755 --- a/web-app/gulpfile.js +++ b/web-app/gulpfile.js @@ -27,7 +27,11 @@ var knownOptions = { var options = minimist(process.argv.slice(2), knownOptions) -gulp.task('sass', ['clean'], () => { +function clean() { + return del('dist/**', { force: true }) +} + +gulp.task('sass', function() { return gulp.src('scss/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(cleanCSS({ compatibility: '*' })) @@ -37,7 +41,7 @@ gulp.task('sass', ['clean'], () => { .pipe(gulp.dest('dist/css')) }) -gulp.task('minify-css', ['clean'], () => { +gulp.task('minify-css', function() { return gulp.src('css/*.css') .pipe(cleanCSS({ compatibility: '*' })) .pipe(rename({ @@ -46,7 +50,7 @@ gulp.task('minify-css', ['clean'], () => { .pipe(gulp.dest('dist/css')) }) -gulp.task('minify-js', ['clean'], () => { +gulp.task('minify-js', function() { return gulp.src('js/*.js') .pipe(minify({ ext: { @@ -58,7 +62,7 @@ gulp.task('minify-js', ['clean'], () => { .pipe(gulp.dest('dist/js')) }) -gulp.task('minify-html', ['clean'], () => { +gulp.task('minify-html', function() { return gulp.src('*.html') .pipe(replace('node_modules/bootstrap/dist/css', 'css')) .pipe(useref({ noconcat: true })) @@ -71,7 +75,7 @@ gulp.task('minify-html', ['clean'], () => { .pipe(gulp.dest('dist')) }) -gulp.task('copy-css', ['clean'], () => { +gulp.task('copy-css', function() { return gulp.src('*.html') .pipe(useref({ noconcat: true })) .pipe(filter('**/*.css')) @@ -83,7 +87,7 @@ gulp.task('copy-css', ['clean'], () => { .pipe(gulp.dest('dist')) }) -gulp.task('copy-js', ['clean'], () => { +gulp.task('copy-js', function() { return gulp.src('*.html') .pipe(useref({ noconcat: true })) .pipe(filter('**/*.js')) @@ -100,20 +104,20 @@ gulp.task('copy-js', ['clean'], () => { .pipe(gulp.dest('dist')) }) -gulp.task('copy-fonts', ['clean'], () => { +gulp.task('copy-fonts', function() { return gulp.src([ - 'node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.{ttf,woff,woff2}' + 'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.{ttf,woff,woff2}' ]) .pipe(gulp.dest('dist/webfonts')) }) -gulp.task('resize-images', ['clean'], () => { +gulp.task('resize-images', function() { return gulp.src('images/*') .pipe(imagemin({ verbose: true })) .pipe(gulp.dest('dist/images')) }) -gulp.task('package', () => { +gulp.task('package', function() { var name = options.output.replace('.tar', '').replace('.gz', '') return gulp.src('dist/**') .pipe(tar(name + '.tar')) @@ -121,10 +125,7 @@ gulp.task('package', () => { .pipe(gulp.dest('.')) }) -gulp.task('clean', () => { - return del('dist/**', { force: true }) -}) -gulp.task('build', ['copy-css', 'copy-js', 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', 'resize-images']) +gulp.task('build', gulp.series(clean, 'copy-css', 'copy-js', 'copy-fonts', 'sass', 'minify-css', 'minify-js', 'minify-html', 'resize-images')) -gulp.task('default', ['build']) +gulp.task('default', gulp.series('build')) diff --git a/web-app/index.html b/web-app/index.html index 82d22bf..641cb8c 100755 --- a/web-app/index.html +++ b/web-app/index.html @@ -10,8 +10,8 @@ <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> <!-- build:css --> <link rel="stylesheet" href="node_modules/dropzone/dist/dropzone.css"> - <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css"> - <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"> + <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"> + <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/solid.css"> <link rel="stylesheet" href="css/swupdate.css"> <!-- endbuild --> diff --git a/web-app/package.json b/web-app/package.json index 5daf6a7..2909b45 100755 --- a/web-app/package.json +++ b/web-app/package.json @@ -1,6 +1,6 @@ { "name": "swupdate", - "version": "0.1.0", + "version": "0.2.0", "description": "Software Update for Embedded Systems Web Front End", "main": "index.html", "scripts": { @@ -16,28 +16,30 @@ "devDependencies": { "csslint": "^1.0.5", "del": "^3.0.0", - "gulp": "^3.9.1", - "gulp-clean-css": "^3.9.0", + "gulp": "^4.0.0", + "gulp-clean-css": "^4.0.0", "gulp-filter": "^5.1.0", - "gulp-gzip": "^1.4.1", + "gulp-gzip": "^1.4.2", "gulp-html-replace": "^1.6.2", - "gulp-htmlmin": "^4.0.0", - "gulp-imagemin": "^4.1.0", - "gulp-minify": "^2.1.0", - "gulp-rename": "^1.2.2", - "gulp-replace": "^0.6.1", - "gulp-sass": "^3.1.0", + "gulp-htmlmin": "^5.0.1", + "gulp-imagemin": "^5.0.3", + "gulp-minify": "^3.1.0", + "gulp-rename": "^1.4.0", + "gulp-replace": "^1.0.0", + "gulp-sass": "^4.0.2", "gulp-tar": "^2.1.0", - "gulp-useref": "^3.1.4", - "htmlhint": "^0.9.13", + "gulp-useref": "^3.1.6", + "htmlhint": "^0.10.1", "minimist": "^1.2.0", "sass-lint": "^1.12.1", - "standard": "^10.0.3" + "standard": "^12.0.1", + "eslint": "^5.11.1" }, "dependencies": { - "@fortawesome/fontawesome-free-webfonts": "^1.0.3", - "bootstrap": "^4.0.0", - "dropzone": "5.2.0", + "@fortawesome/fontawesome-free": "^5.6.3", + "bootstrap": "^4.2.1", + "popper.js": "^1.14.6", + "dropzone": "5.5.1", "jquery": "^3.3.1" }, "standard": {
Some components were severely oudated, and some components are suggested to be upgraded due to security issues. This patch brings all components to their actual version. Major upgrade includes switching to gulp 4.0, which requires the new task generation scheme, this is also included in this patch. Signed-off-by: Andrey Zhizhikin <andrey.z@gmail.com> --- web-app/gulpfile.js | 31 ++++++++++++++++--------------- web-app/index.html | 4 ++-- web-app/package.json | 34 ++++++++++++++++++---------------- 3 files changed, 36 insertions(+), 33 deletions(-)