Why doesn't the sourcemaps plugin work in gulp?

Question

JavaScript

Here is my task. Here is a screenshot of prntscr.com/b9fhki and the link leads to an already minified file that is molded from many css files. As I understand it, sourcemaps is just what is needed in order to view the source css files. What is wrong with my taxi?
As I understand it, I copy a ready-made site to the server in my case, the public folder where everything is compressed, and so on. And if I do not copy the folder with the source files in my frontend cases, then where will sourcemaps take the sources from?

gulp.task('styles', function () {
  return gulp.src('frontend/**/*.css')
    .pipe(concatCss('all.css'))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(minifyCss('all.css'))
    .pipe(rename('all.min.css'))
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))
    .pipe(gulpIf(isDevelopment, sourcemaps.write()))
    .pipe(gulp.dest('public/css'));
});

Answer 1

You need to initialize sourcemapsbefore changing files, so that the object sourcemapsreceives information about the changes, which it subsequently writes.
It should be like this:

gulp.task('styles', function () {
  return gulp.src('frontend/**/*.css')
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))
    .pipe(concatCss('all.css'))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(minifyCss('all.css'))
    .pipe(rename('all.min.css'))
    .pipe(gulpIf(isDevelopment, sourcemaps.write()))
    .pipe(gulp.dest('public/css'));
});

You do not need to copy the source codes to the site, all the necessary information is contained in the sourcemap. I advise you to write soucemapnot in the style file itself, like yours, but in a separate file (to make it all.min.csseasier).
Like this:sourcemaps.write('./maps')