gulp css sourcemap,css - Gulp sourcemaps and sass issues - Stack Overflow

Im trying to merge all my styles(css, scss) files into one file and compile.

The reason is because there is files that based on variables in another file, but now i cant create a sourcemap.

What am I doing wrong? Is there a better solution?

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

})

);