Gulp Js & BundleConfig.json @Import를 컴파일하지 않는 Sass?

Question

저는이 Grunt/Gulp 설정을 처음 접했고 간단한 해결책을 설정하려고합니다. My JS, Html 및 CSS가 작동합니다. 하지만 SASS를 올바르게 컴파일 할 수는 없습니다. 내 gulpfile.js에 사용중인 BundleConfig.json 파일을 사용하는 .Net 핵심 응용 프로그램입니다.

내 CSS 파일은 컴파일되는 SASS없이이

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

처럼 종료하고 지금은 갇혔어요. 여기

내 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"; 

내가 쓸데없는 작업을 실행하면 어떻게됩니까?

예상 세미콜론 또는 발견 곱슬 중괄호, 폐쇄 '-', 예기치 않은 토큰을 발견 - - 발견 곱슬 중괄호를 닫는 예상 세미콜론 또는
을 '' ''
세미콜론 또는 곱슬 중괄호를 닫는 예상은, 발견 '@import'
예기치 않은 토큰 발견 ' "_variables.scss"'예기치 않은 토큰, 예기치 않은 토큰 발견 ' "base.scss는"'

어떤 도움을 주시면 감사하겠습니다 '@import'
을 발견했다.

Answer 1

getBundles() 함수는 outputFilename에서 regex.scss 패턴을 찾습니다. bundleconfig.json에서 출력 파일 이름은 .css 또는 .js 확장자로 끝납니다.

당신이 당신의 분을 변경해야합니다 : SCS들 작업을 뭔가 아래와 같이 :

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을 철저히 준수하려면 --scsc 확장자를 가진 inputfiles를 찾고 리턴하는 새로운 getbundles() 함수를 작성해야합니다.

도움이 되겠습니다.