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扩展名的输入文件并返回该文件。

希望这有助于