Gulp Sourcemaps und Sass Probleme

Question

Ich versuche, alle meine Stile (CSS, SSS) Dateien in eine Datei zusammenführen und kompilieren. Der Grund ist, weil es Dateien gibt, die auf Variablen in einer anderen Datei basieren, aber jetzt kann ich keine Quellkarte erstellen.

Was mache ich falsch? Gibt es eine bessere Lösung?

const gulp = require('gulp'); 
const debug = require('gulp-debug'); 
const sass = require('gulp-sass'); 
const concat = require('gulp-concat'); 
const uglify = require('gulp-uglify'); 
const csso = require('gulp-csso'); 
const autoprefixer = require('gulp-autoprefixer'); 
const addsrc = require('gulp-add-src'); 
const sourcemaps = require('gulp-sourcemaps'); 
const ngmin = require('gulp-ngmin'); 
const browserSync = require('browser-sync'); 

gulp.task('default', ['browser-sync'], function(){ 
    gulp.watch('app/**/*.scss', ['styles']); 
    gulp.watch('app/**/*.js', ['app-scripts']); 
    gulp.watch('app/components/**/*.html', ['components-html']); 
    gulp.watch('app/views/**/*.html', ['view-html']); 
    gulp.watch('app/index.html', ['copy-index-html']); 
    gulp.watch('app/json/**/*.json', ['copy-jsons']); 
}); 

gulp.task('styles',() => 
    gulp.src([ 
     'app/style/vendors/*.css', 
     'app/style/utils/*.scss', 
     'app/style/base/*.scss', 
     'app/style/layout/*.scss', 
     'app/components/**/*.scss', 
     'app/views/**/*.scss' 
    ]) 
    .pipe(concat('styles.scss')) 
    .pipe(sass()) 
    .pipe(autoprefixer()) 
    .pipe(csso()) 
    .pipe(concat('styles.min.css')) 
    .pipe(gulp.dest('dist/style')) 
); 

gulp.task('copy-fonts',() => 
    gulp.src('app/assets/fonts/**/*.{ttf,woff,eof,svg}') 
     .pipe(gulp.dest('dist/style/fonts')) 
); 

gulp.task('copy-images',() => 
    gulp.src('app/assets/img/**/*.{png,jpg,jpeg,svg}') 
     .pipe(gulp.dest('dist/img')) 
); 

gulp.task('copy-index-html',() => 
    gulp.src('app/index.html') 
     .pipe(gulp.dest('dist')) 
); 

gulp.task('components-html',() => 
    gulp.src(['app/components/**/*.html']) 
     .pipe(gulp.dest('dist/components')) 
); 

gulp.task('view-html',() => 
    gulp.src('app/views/**/*.html') 
     .pipe(gulp.dest('dist/views')) 
); 

gulp.task('copy-jsons',() => 
    gulp.src('app/json/**/*.json') 
     .pipe(gulp.dest('dist/json')) 
); 

gulp.task('app-scripts',() => 
    gulp.src(['app/*.js', '!app/app.js']) 
     .pipe(addsrc.append([ 
      'app/services/**/*.js', 
      'app/views/**/*.js', 
      'app/directives/**/*.js', 
      'app/components/**/*.js' 
     ])) 
     .pipe(addsrc.prepend('app/app.js')) 
     .pipe(ngmin()) 
     .pipe(concat('app.min.js')) 
     .pipe(gulp.dest('dist/js')) 
); 

gulp.task('vendor-scripts',() => 
    gulp.src(['app/vendor/angular/*.js', '!app/vendor/angular/angular.js']) 
     .pipe(addsrc.prepend('app/vendor/angular/angular.js')) 
     .pipe(addsrc.append('app/vendor/*.js')) 
     .pipe(uglify()) 
     .pipe(concat('vendor.min.js')) 
     .pipe(gulp.dest('dist/js')) 
); 

gulp.task('browser-sync',() => 
    browserSync({ 
     files: 'dist/**/*.css, dist/**/*.js, app/**/*.html', 
     port: 8082 
    }) 
); 

Answer 1

Es ist üblich, eine main.scss-Datei zu erstellen, aus der Sie Ihre anderen Stylesheets nach Bedarf importieren. Mit dieser Technik können Sie Ihre Abhängigkeiten besser organisieren. Wenn Sie zum Beispiel die folgende Struktur haben:

--app/style/ 
    --vendors/ 
    --vendors.scss 
    --utils/ 
    --utils.css 
    --base/ 
    --base.scss 
    --variables.css //here are all my variables 

Erstellen Sie einfach eine main.scss Datei unter app/Stile, die alle anderen Dateien importieren:

@import 'base/variables'; //note that the order is important for variables 
@import 'vendors/vendors'; 
@import 'base/base'; 

jetzt, haben Sie bemerkt, was wir tun nicht die Dateiendung angeben? Dies ist wichtig, da Sie Ihre .css-Dateien in .scss-Dateien ändern möchten. Darüber hinaus sollten Sie allen Dateien, die nicht die main.scss-Datei sind, einen Unterstrich (_) voranstellen (lesen Sie hierzu mehr unter here) So stellen Sie sicher, dass der Sass-Compiler keine Menge von CSS-Dateien erstellt und Ihre einzige Ausgabe ist die Datei main.css.

Auf diese Weise erhalten Sie die Quellkarten, die Sie benötigen, beachten Sie, dass Sie derzeit Ihre .css Dateien nicht durch irgendeinen Sass-Task laufen lassen, so dass Sie keine Quellkarten für diese Dateien erhalten.

Es scheint eine Menge Arbeit zu sein, wenn Ihr Projekt schon groß ist, aber das wird Ihnen viel Ärger ersparen, wenn Ihre App größer wird.