Препроцессор стилуса не будет работать внутри 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"))
});

Я лично только установил путь к корню, который содержит все мое приложение.

Другие вопросы по тегам