schluck-usemin mehrere HTML-Dateien

Question

ich mehrere HTML-Dateien in meinem Repository für verschiedene Ansichten von meiner Seite aus:

• index.html
• news.html
• seite.html

Aber meine Schluck Build-Aufgabe baut nur eine der Dateien nicht alle.

gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() { 
    var stream = gulp.src('./src/**/*.html') 
    .pipe(useMin({ 
     css: [minifyCss(), 'concat'], 
     js: [minifyJs(), 'concat'], 
     html: [minifyHtml({collapseWhitespace: true})] 
    })) 
    .pipe(gulp.dest(distPath)); 
    return stream; 
}); 

Hat jemand eine Idee, wie ich es beheben kann? Danke.

Meine volle gulpfile.js

//////////////////// 
// Modules 
//////////////////// 
var gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    sassLint = require('gulp-sass-lint'), 
    jsHint = require('gulp-jshint'), 
    minifyJs = require('gulp-uglify'), 
    minifyCss = require('gulp-minify-css'), 
    minifyHtml = require('gulp-htmlmin'), 
    minifyImages = require('gulp-imagemin'), 
    useMin = require('gulp-usemin'), 
    del = require('del'), 
    browserSync = require('browser-sync').create(); 


//////////////////// 
// Constants 
//////////////////// 
const distPath = './dist'; 


//////////////////// 
// Tasks 
//////////////////// 

// Sass 
gulp.task('sass', function() { 
    gulp.src('./src/sass/**/*.scss') 
     .pipe(sassLint({ 
      options: { 
       formatter: 'stylish', 
       configFile: './.sass-lint.yml' 
      }, 
     })) 
     .pipe(sassLint.format()) 
     .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) 
     .pipe(gulp.dest('./src/css')) 
}); 

// Check JavaScripts 
gulp.task('scripts-check', function() { 
    gulp.src('src/js/**/*.js') 
    .pipe(jsHint()) 
    .pipe(jsHint.reporter('jshint-stylish')) 
}); 

// Browsersync 
gulp.task('browser-sync', function() { 
    browserSync.init({ 
     server: { 
      baseDir: './src/' 
     }, 
     notify: false 
    }); 
}); 

// Watch 
gulp.task('watch', function() { 
    gulp.watch('./src/js/**/*.js', ['scripts-check']); 
    gulp.watch('./src/sass/**/*.scss', ['sass']); 
    gulp.watch(['./src/*.html', './src/css/*.css', './src/js/*.js']).on('change', browserSync.reload); 
}); 

// Serve 
gulp.task('serve', ['sass', 'scripts-check', 'browser-sync', 'watch']); 


//////////////////// 
// Build Tasks 
//////////////////// 
gulp.task('build:cleanfolder', function() { 
    return del(distPath).then(paths => { 
     console.log('Deleted files and folders:\n', paths.join('\n')); 
    }); 
}); 

gulp.task('build:copyfiles', ['build:cleanfolder'], function() { 
    var stream = gulp.src([ 
     'src/**', 
    ]) 
    .pipe(gulp.dest(distPath)); 
    return stream; 
}); 

gulp.task('build:cleanfiles', ['build:copyfiles'], function() { 
    return del([ 
     distPath + '/**/*.html', 
     distPath + '/sass', 
     distPath + '/css', 
     distPath + '/js', 
     distPath + '/images', 
     distPath + '/bower_components' 
    ]) 
    .then(paths => { 
     console.log('Deleted files and folders:\n', paths.join('\n')); 
    }); 
}); 

gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() { 
    var stream = gulp.src('./src/**/*.html') 
    .pipe(useMin({ 
     css: [minifyCss(), 'concat'], 
     js: [minifyJs(), 'concat'], 
     html: [ function(){ return minifyHtml({collapseWhitespace: true});} ] 
    })) 
    .pipe(gulp.dest(distPath)); 
    return stream; 
}); 

gulp.task('build:minify-images', ['build:cleanfolder', 'build:cleanfiles'], function() { 
    var stream = gulp.src('./src/images/**/*.{png,gif,jpg,svg}') 
    .pipe(minifyImages()) 
    .pipe(gulp.dest(distPath + '/images')); 
    return stream; 
}); 

gulp.task('build:sass', ['build:cleanfolder', 'build:cleanfiles'], function() { 
    var stream = gulp.src('./src/sass/**/*.scss') 
    .pipe(sass({outputStyle: 'compressed'})) 
    .pipe(gulp.dest(distPath + '/css')) 
    return stream; 
}); 

gulp.task('build:serve', function() { 
    browserSync.init({ 
     server: { 
      baseDir: distPath 
     }, 
     notify: false 
    }); 
}); 

gulp.task('build', ['build:sass', 'build:usemin', 'build:minify-images']); 

Answer 1

Gemäß der documentation

Wenn Sie die gleiche Pipeline zweimal anrufen müssen, müssen Sie jede Aufgabe als eine Funktion definieren, die den Stream-Objekt zurückgibt das sollte verwendet werden.

Deshalb:

gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() { 
    var stream = gulp.src('./src/**/*.html') 
    .pipe(useMin({ 
     css: [minifyCss(), 'concat'], 
     js: [minifyJs(), 'concat'], 
     html: [ function(){ return minifyHtml({collapseWhitespace: true});} ] 
    })) 
    .pipe(gulp.dest(distPath)); 
    return stream; 
});