Препроцессор стилуса не будет работать внутри useref с gulpif
У меня очень простое задание, и я хочу обработать CSS-файл Stylus (.styl). Это задача внутри gulpfile:
const gulp = require("gulp");
const gulpIf = require("gulp-if");
const useref = require("gulp-useref");
const stylus = require("gulp-stylus");
const cssnano = require("gulp-cssnano");
gulp.task("default", function(){
return gulp.src("*.htm")
.pipe(useref())
.pipe(gulpIf("*.css", stylus()))
.pipe(gulp.dest("dist"))
});
И это особый раздел HTML
<!--build:css css/style.min.css -->
<link rel="stylesheet" href="style.styl">
<!-- endbuild -->
По какой-то причине файл Stylus просто не обрабатывается, а копируется в css/style.min.css без какой-либо обработки.
Еще более странно то, что если я отформатирую CSS как обычный файл CSS и заменю "stylus()" на "cssnano()", cssnano работает нормально и минимизирует файл. Стилус отлично работает за пределами useref и gulpIf, когда запускается как его собственная задача, но я хочу использовать его следующим образом.
1 ответ
Можете ли вы попробовать указать корневой путь для useref, где он может найти ресурсы:
options.searchPath
Тип: String или Array По умолчанию: нет
Укажите местоположение для поиска файлов активов относительно текущего рабочего каталога. Может быть строкой или массивом строк.
Твое задание
gulp.task("default", function(){
return gulp.src("*.htm")
.pipe(useref({
searchPath: 'assets_path_here'
}))
.pipe(gulpIf("*.css", stylus()))
.pipe(gulp.dest("dist"))
});
Я лично только установил путь к корню, который содержит все мое приложение.