Gulp Js & BundleConfig.json Sass nicht @Import kompilieren?

Question

Ich bin neu in diesem ganzen Grunt/Gulp-Setup, und ich versuche, eine einfache Lösung einzurichten. Mein JS, Html und CSS funktioniert von Art. Aber ich kann die SASS nicht richtig kompilieren. Es ist eine .NET-Kernanwendung, die die Datei BundleConfig.json verwendet, die in meinem gulpfile.js verwendet wird.

Meine CSS-Datei endet wie diese

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

Ohne die SASS kompiliert wird, und ich bin jetzt stecken.

Hier ist meine 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 
    } 
] 

Und hier ist mein 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); 
    }); 
} 

Meine Sass-Datei, die ich main.scss gerade diese Importe zu kompilieren versuche Sass-Dateien im selben Verzeichnis.

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

Wenn ich die Grunt-Aufgabe ausführen, bekomme ich das?

Erwartete Semikolon oder Schließen geschweiften Klammer, gefunden ‚-‘ Erwartete
Semikolon oder Schließen geschweiften Klammer, gefunden ‚-‘ Erwartete Semikolon oder
geschweiften-Klammer, gefunden ‚-‘ Unexpected Token gefunden '@import'
unerwartetes Token, gefunden ' "_variables.scss"' Unexpected Token gefunden
'@import' unerwartetes Token, gefunden ' "base.scss"'

Jede Hilfe würde geschätzt.

Answer 1

Die Funktion getBundles() sucht nach dem regex.scss-Muster in outputFilename. In der Datei bundleconfig.json enden die Ausgabedateinamen entweder mit der Erweiterung .css oder .js.

Sie benötigen, um Ihre min zu ändern: SCSS Aufgabe etwas wie unten:

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

, was ich getan habe, ist - ich habe ausdrücklich gesagt, dass sucht main.scss Datei in sass Ordner. Sie können ein glob-Muster schreiben, das nach allen scss im sass-Ordner sucht. Wenn Sie sich strikt an bundleconfig.json halten wollen, müssen Sie eine neue Funktion getbundles() schreiben, die nach Eingabedateien mit der Erweiterung .scss sucht und diese zurückgibt.

hoffe das hilft