Gulp Js 和 BundleConfig.json Sass 不编译 @Import？

Question

我是整个 Grunt/Gulp 设置的新手，我正在尝试设置一个简单的解决方案。我的 JS、Html 和 CSS 可以正常工作。但我无法让 SASS 正确编译。这是一个 .Net 核心应用程序，使用了我的 gulpfile.js 中使用的 BundleConfig.json 文件。

我的 CSS 文件是这样结束的

@import"_variables.scss";@import"base.scss";

没有编译 SASS，我现在卡住了。

这是我的 bundleconfig.json

[
  {
    "outputFileName": "wwwroot/css/sass.min.css",
    "inputFiles": [
      "sass/main.scss"
    ]
  },
  {
    "outputFileName": "wwwroot/css/all.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/bootstrap/dist/css/bootstrap-grid.min.css",
      "wwwroot/css/sass.min.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/all.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/jquery-validation/dist/jquery.validate.min.js",
      "node_modules/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
      "scripts/**/*.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

这是我的 gulpfile.js

"use strict";

var gulp = require("gulp"),
    scsscompile = require("gulp-sass"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    htmlmin = require("gulp-htmlmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json");

var regex = {
    scss: /\.scss$/,
    css: /\.css$/,
    html: /\.(html|htm)$/,
    js: /\.js$/
};

gulp.task("min", ["min:js", "min:scss", "min:css", "min:html"]);

gulp.task("min:js", function () {
    var tasks = getBundles(regex.js).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:scss", function () {
    var tasks = getBundles(regex.scss).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(scsscompile({ includePaths: ['./sass'] }))
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:css", function () {
    var cssTasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    });
    return merge(cssTasks);
});

gulp.task("min:html", function () {
    var tasks = getBundles(regex.html).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("clean", function () {
    var files = bundleconfig.map(function (bundle) {
        return bundle.outputFileName;
    });

    return del(files);
});

gulp.task("watch", function () {
    getBundles(regex.js).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:js"]);
    });

    getBundles(regex.scss).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:scss"]);
    });

    getBundles(regex.css).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:css"]);
    });

    getBundles(regex.html).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:html"]);
    });
});

function getBundles(regexPattern) {
    return bundleconfig.filter(function (bundle) {
        return regexPattern.test(bundle.outputFileName);
    });
}

我正在尝试编译的Sass文件ma​​in.scss就是这样，导入到同一目录中的Sass文件中。

@import "_variables.scss";
@import "base.scss";

当我运行 grunt 任务时，我得到了这个？

预期的分号或右花括号，发现 '-' 预期
分号或右花括号，找到 '-' 预期分号或
关闭花括号，找到“-”意外标记，找到“@import”
意外的令牌，找到 '"_variables.scss"' 意外的令牌，找到
'@import' 意外的令牌，找到了 '"base.scss"'

任何帮助将不胜感激。

Answer 1

getBundles() 函数在outputFilename 中寻找regex.scss 模式。在bundleconfig.json 中，输出文件名以.css 或.js 扩展名结尾。

您需要将您的 min:scss 任务更改为如下所示：

gulp.task("sass", function () {
    var tasks = gulp.src('./sass/main.scss')
                    .pipe(sass().on('error', sass.logError))
                    .pipe(gulp.dest('./wwwroot/css'));
    return merge(tasks);
});

我所做的是 - 我已经明确表示要在 sass 文件夹中查找 main.scss 文件。您可以编写一个 glob 模式来查找 sass 文件夹中的所有 scss。如果您想严格遵守bundleconfig.json - 那么您将需要编写一个新的getbundles() 函数来查找具有.scss 扩展名的输入文件并将其返回。

希望这会有所帮助。

Answer 2

这个问题已经存在了一段时间，但我遇到了与 SO 相同的问题。

我能够通过将 a 解析为包含 .SCSS 文件的包来解决此问题。

创建一个将在inputFiles 而不是outputFileName 中查找的新方法

const getBundlesByInputs = (regexPattern) => {
    return bundleconfig.filter(bundle => {
        return regexPattern.test(bundle.inputFiles);
    });
};

然后您可以简单地修改您的 min:scss 任务，使其使用新的getBundlesByInput 方法：

gulp.task("min:scss", async function () {
    merge(getBundlesByInputs(regex.scss).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(scsscompile({ includePaths: ['./sass'] }))
            .pipe(gulp.dest('.'));
    }))
});