Gulp Js＆BundleConfig.json Sass没有编译@Import？

Question

我是整个Grunt / Gulp设置的新手，我正在尝试建立一个简单的解决方案。我的JS，Html和CSS正在进行各种工作。但我无法正确编译SASS。它是一个使用BundleConfig.json文件的.Net核心应用程序，该文件正在我的gulpfile.js中使用。

我的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);
    });
}

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

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

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

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

任何帮助，将不胜感激。

Answer 1

getBundles()函数正在寻找regex.scss中的outputFilename模式。在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);
});

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

希望这可以帮助。