Question

我有一个非常基本的gulp任务，我想处理一个Stylus CSS文件（.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文件并替换＆＃34; stylus（）＆＃34;使用＆＃34; cssnano（）＆＃34;，cssnano工作正常并缩小文件。当作为自己的任务运行时，触控笔在useref和gulpIf之外工作正常，但我最好想要像这样使用它。

Answer 1

您可以尝试在可以找到资产的位置指定useref的根路径：

options.searchPath

类型：字符串或数组默认值：无

指定搜索资产文件的位置，相对于   当前的工作目录。可以是字符串或字符串数组。

您的任务

gulp.task("default", function(){
    return gulp.src("*.htm")
    .pipe(useref({
            searchPath: 'assets_path_here'
        }))
    .pipe(gulpIf("*.css", stylus()))
    .pipe(gulp.dest("dist"))
});

我个人只是设置了包含整个应用程序的根目录。

手写笔预处理器在useref内与gulpif

1 个答案: