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文件。

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

當我運行grunt任務時，我得到了這個？

預期分號或關閉大括號，發現「 - 」預期
分號或關閉大括號，發現「 - 」預期分號或
閉大括號，實測「 - 」的意外標記，發現'@import'
意外的令牌，發現 ' 「_variables.scss」' 意外令牌，發現
'@import' 意外令牌，發現 ' 「base.scss」'

任何幫助，將不勝感激。

Answer 1

getBundles（）函數正在尋找outputFilename中的regex.scss模式。在bundleconfig.json中，輸出文件名以.css或.js擴展名結尾。

您將需要更改分鐘：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擴展名的輸入文件並返回該文件。

希望這有助於