Выполнение «gulp-preprocess» как часть задачи «gulp serve»

Question

Я основываю свой проект на Google Web Starter Kit и собираюсь интегрировать gulp-preprocess в конвейер.

мне удалось заставить его работать для gulp serve:dist задачи, соответствующий код:

gulp.task('htmlIncludes', function() { 
     gulp.src('app/*.html') 
     .pipe(preprocess({context: { NODE_ENV: 'production', DEBUG: true}})) 
     .pipe(gulp.dest('./dist/')) 
    }); 

    gulp.task('default', ['clean'], function (cb) { 
     runSequence('styles', ['jshint', 'html', 'images', 'fonts', 'copy', 'htmlIncludes'], cb); 
    }); 

Однако, у меня возникли проблемы при получении его на работу для gulp:serve задачи, которая включает в себя браузер синхронизации:

gulp.task('serve', ['styles'], function() { 
    browserSync({ 
    notify: false, 
    server: ['.tmp', 'app'] 
    }); 

Я хотел бы добавить задачу htmlIncludes, чтобы она была повторно запущена, когда файлы обновляются во время работы gulp:serve. Однако просто добавление его в список, который в настоящее время включает 'styles', не имеет желаемого эффекта. Любая идея, что мне нужно изменить?

Answer 1

Вы совершенно правы, вам нужно добавить его к зависимостям этой задачи, которые будут выполняться хотя бы один раз. Однако это всего лишь половина истории. Вы должны работать ваша задача каждый раз, когда ваши HTML файлы изменились, поэтому добавьте его в соответствующий watch процесса:

gulp.task('serve', ['styles', 'htmlIncludes'], function() { 
    browserSync({ 
     notify: false, 
     logPrefix: 'WSK', 
     server: ['.tmp', 'app'] 
    }); 

    // here's the change 
    gulp.watch(['.tmp/**/*.html', 'app/**/*.html'], ['htmlIncludes', reload]); 
    gulp.watch(['app/styles/**/**/**/**/*.{scss,css}'], ['styles', reload]); 
    gulp.watch(['app/scripts/**/*.js'], ['jshint']); 
    gulp.watch(['app/images/**/*'], reload); 
}); 

Вы также видите, что это browserSync вызов просто служит .tmp и app папки, в то время как ваш выход хранится в dist. Таким образом, вы должны изменить свою htmlIncludes задачу тоже:

gulp.task('htmlIncludes', function() { 
    return gulp.src('app/*.html') 
     .pipe(preprocess({context: { NODE_ENV: 'production', DEBUG: true}})) 
     .pipe(gulp.dest('./.tmp/')) 
     .pipe(gulp.dest('./dist/')) 
}); 

Если вам нужны отдельные конфигурации для каждого выхода, мы должны решать его снова. Но на данный момент он должен работать так, как планировалось.

Это также может быть возможно, что вы должны запустить 'html' задачу в первой последовательности, но я не то, что вписывается в WSK Gulpfile ответить вам, что ;-)