Gulp Js＆BundleConfig.json @ImportをコンパイルしていないSass？

Question

私はGrunt/Gulpの設定全体を初めて知りました。私は簡単な解決法を設定しようとしています。私のJS、Html、CSSは一種のものです。しかし、SASSを正しくコンパイルすることはできません。これは、gulpfile.jsで使用されているBundleConfig.jsonファイルを使用している.Netコアアプリケーションです。

私のCSSファイルがコンパイルされているSASSせずに、この

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

のように終わると、私は今こだわっています。ここで

は私がmain.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する。

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

私は単調なタスクを実行すると、私はこれを取得？ 「 - 」
セミコロンを期待か見つけ中括弧を閉じる「 - 」が見つかり期待セミコロンまたは
中括弧を閉じて、「 - 」予期しないトークン、見つかったセミコロンまたは閉じ中括弧、期待

'@import'
予期しないトークン、見つかった ' "_variables.scss"' 予期しないトークンは、任意の助けをいただければ幸い予期しないトークン、見つかった ' "base.scss"' '@import'

を
を見つけました。

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フォルダ。 sassフォルダ内のすべてのscssを探すglobパターンを書くことができます。 bundleconfig.jsonに厳密に固執したいのであれば、拡張子が.scssの入力ファイルを探してそれを返す新しいgetbundles（）関数を書く必要があります。

これが役に立ちます。