After running gulp, the file index.html.gz doesn't compress css and js files

[filipecalegario]

Hello,

I edited the index.html file to change some of the titles.

When I run gulp, there is no error, but the resulting file has no CSS either JS files embedded into index.html.gz.

[22:11:03] Using gulpfile ~/git/ESP32-STUDIES/esp32-wifi-manager-vuejs/web-app/gulpfile.js
[22:11:03] Starting 'default'...
[22:11:03] Starting 'buildfs'...
[22:11:03] Starting 'clean'...
[22:11:03] Finished 'clean' after 54 ms
[22:11:03] Starting 'files'...
[22:11:06] Finished 'files' after 3.02 s
[22:11:06] Starting 'html'...
[22:11:06] Finished 'html' after 299 ms
[22:11:06] Finished 'buildfs' after 3.38 s
[22:11:06] Finished 'default' after 3.38 s

I even uploaded to an ESP32 and, when I open it, the server works fine, but the page come with no style either functionalities.

If I want to modify the index.html, is that the right workflow: 1) alter the index.html file and 2) run gulp command? Are there other steps I'm not following?

Thanks!

[giobauermeister]

Hey Filipe!

Inside gulp script there is the section that takes care of the js, css files:

/* Process HTML, CSS, JS  --- LINE --- */
gulp.task('inline', function() {
    return gulp.src('./*.html')
        .pipe(inline({
            base: './',
            js: uglify,
            css: cleancss,
            //disabledTypes: ['svg', 'img']
            //disabledTypes: ['img']
        }))
        .pipe(htmlmin({
            collapseWhitespace: true,
            removeComments: true,
            minifyCSS: true,
            minifyJS: true
        }))
        .pipe(gzip())
        .pipe(gulp.dest('dist'));
});
 
/* Process HTML, CSS, JS */
gulp.task('html', function() {
  return gulp.src('./*.html')
      .pipe(useref())
      .pipe(plumber())
      .pipe(gulpif('*.css', cleancss()))
      .pipe(gulpif('*.js', uglify()))
      .pipe(gulpif('*.html', htmlmin({
          collapseWhitespace: true,
          removeComments: true,
          minifyCSS: true,
          minifyJS: true
      })))
      .pipe(gzip())
      .pipe(gulp.dest('dist'));
});

So it should work if you keep the file structure the same as the project.

If you do not modify index.html, does it work?

[felixsteghofer]

Hi @filipecalegario,

late to the party but you have to run gulp buildfs2 in order to inline css and js. @giobauermeister there are two buildfs tasks and I think you want the second to be the default?

see:

gulp.task('buildfs', gulp.series('clean', 'files', 'html'));
gulp.task('buildfs2', gulp.series('clean', 'files', 'inline'));
gulp.task('compilepage', gulp.series('delgzip', 'files', 'inline'));
gulp.task('default', gulp.series('buildfs'));