1

我有一个非常基本的 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 文件并将“stylus()”替换为“cssnano()”，cssnano 可以正常工作并缩小文件。当作为自己的任务运行时，Stylus 在 useref 和 gulpIf 之外可以正常工作，但我最好像这样使用它。

4

1 回答 1

0

您可以尝试为 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"))
});

我个人只是将路径设置为包含我的整个应用程序的根目录。

于 2017-03-13T13:41:22.020 回答