gulp-htmlhint icon indicating copy to clipboard operation
gulp-htmlhint copied to clipboard

Can I lint the HTML immediately after pug→html conversion?

Open ghost opened this issue 6 years ago • 0 comments

Thank you for your amazing plugin! When I make it works, the HTML validation routine becomes to past.

The following code is working in gulp#4.0:

    gulp.task('Development Build',
        gulp.series(
            gulp.parallel('pug', 'sass')
        )
    );
    
    gulp.task('Watch Assets And Source', function() {   
        gulp.watch(/* ... */, gulp.series('pug'));
        gulp.watch(/* ... */, gulp.series('sass'));
    });
    
    gulp.task('Static Server', function() {         
        browserSync.init({
            server: // ...
        });
        
        browserSync.watch(/* ... */).on('change', browserSync.reload);
        
    });

    gulp.task('Development Run',    
        gulp.series('Development Build', 
            gulp.parallel('Watch Assets And Source', 'Static Server')
        )
    );

As far as I can tell according documentation, the htmlhint is infinite task:

    var htmlhint = require("gulp-htmlhint");
    
    gulp.src("./src/*.html")
    	.pipe(htmlhint())
    	.pipe(htmlhint.reporter())

I tried to lint HTML immediately after pug → html conversion - zero effect, no messages in console:


    gulp.task('pug', function(){
        
        return gulp.src(/* ... */)
            .pipe(gulpIf(isDevelopment, sourcemaps.init()))
            .pipe(pug({pretty: true }))
            .pipe(htmlhint())
            .pipe(htmlhint.reporter())
            // ...

Other approach: add the Html Lint task to gulp.parallel('Watch Assets And Source', 'Static Server'). With below code, gulp is working, but there are no messages in console when HTML is invalid:

    gulp.task('Html Lint', function() {
        
        gulp.src('development/devBuild/public/01_top.html')
    	.pipe(htmlhint())
    	.pipe(htmlhint.reporter());
        
    });
    
    gulp.task('Development Run',    
        gulp.series('Development Build', 
            gulp.parallel('Watch Assets And Source', 'Static Server', 'Html Lint')
        )
    );

Ideally, it's comfortable to lint HTML immediately after pug → html conversion. Even if impossible, how I can see the invalid HTML messages?

ghost avatar Nov 19 '17 09:11 ghost