Gulp sourcemaps and sass issues

Question

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
    })
);

Excitement

Could you post the whole gulpfile? – Alyosha

Why you need to see the whole gulpfile? – Excitement

I would like to replicate and run the whole gulpfile.js. It might be how you import and init gulp sourcemap or how you run the task that might cause the problem. With the current piece of code the only thing I could suggest is to move the .pipe(sass()) to be above the .pipe(concat('styles.scss')). – Alyosha

Edit my question. what you say is the only way i know but i can't do this because i collect many sass file that base on variables and mixings in another file. – Excitement

Try importing all your .scss and .css file to a main.scss file and only put that main.scss file into gulpfile. Try the importing in the correct order so you can have all your variables and mixings working. – Alyosha

But then I'll need add manually to main.scss every new file. :/ – Excitement

I believe that is the recommended structure. I'm using it in my current projects. For example, I have 3 files variables, font, mixins in my standards folder, and since my font and mixins file need access to the variables, I need to import them in that particular order to my main.scss. If I only set the path in gulp to /standards/*.scss it wouldn't process the files in the particular order and hence confuses the compiler. Following that structure you can keep your project logical and easier to reason about. – Alyosha

Answer 1

It is a common practice to create a main.scss file from which you import your other stylesheets as needded. Using this technique will help you to better organize your dependencies. For example if you have the following structure:

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

Just create a main.scss file under app/styles that will import all your other files:

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

now, did you notice we do not specify the file extension? this is important as you will want to change your .css files to .scss files, and more over you will want to prepend an underscore(_) to all files that are not the main.scss (read more about this here), this way you make sure the sass compiler doesn't create a bunch of css files and your only output will be the main.css file.

This way you will get the sourcemaps you need, do note that currently, you are not running your .css files through any sass task at the moment, so you will not get sourcemaps for these files.

It seems like a lot of work to do if your project is already big, but this will save you a lot of trouble as your app gets bigger.

Puduns

Thank for your answer! I found a solution for multiple file importing with gulp bulksass and now its works perfectly! – Excitement