Почему не работает Gulp autoprefixer вместе с sourcemaps?

Question

[Федя]

При запуске задачи style из

gulpfile.js

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      sourcemaps = require('gulp-sourcemaps'),
      autoprefixer = require('gulp-autoprefixer'),
      browsersync = require('browser-sync').create();

function style() {
  return gulp.src('./source/sass/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('./maps'))
    .pipe(autoprefixer({cascade: true}))
    .pipe(gulp.dest('./build/css/'))
    .pipe(browsersync.stream());
};

function watch() {
  browsersync.init({
    server: {
      baseDir: './build/'
    },
      port: 3000,
      notify: false
  });
  gulp.watch('./source/sass/**/*.scss', style);
  gulp.watch('./source/*.html').on('change', gulp.series(browsersync.reload));
  gulp.watch('./source/js/**/*.js').on('change', gulp.series(browsersync.reload));
};

exports.style = style;
exports.watch = watch;

консоль выдает ошибку и функция не запускается...
Но стоит убрать пайп - .pipe(autoprefixer({...})), как соурсмапы начинают корректно отображаться..
Как подружить соурсмапы с автопрефиксером?? Уже несколько дней читаю мануалы и никак не получается сделать чтобы работало...
Если что, галп версии 4.0.2

package.json

{
  "name": "Project",
  "version": "1.0.0",
  "description": "MyNewProject",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-watch": "^5.0.1",
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "browserslist": [
    "since 2015",
    "IE 10"
  ],
  "author": "Fedya",
  "license": "ISC"
}

Comments

[Сергей delphinpro]

писать мапы после автопрефиксера не пробовали?

[Федя]

Сергей delphinpro, пробовал, мапы не работают

spoiler

[sim3x]

Убрать префиксер за ненадобностью

[Федя]

sim3x, хорошо, а как тогда расставлять префиксы для кроссбраузерности? Вручную в *.scss прописывать?

[sim3x]

Федя, а кто вам сказал, что они вам нужны?

Вы поддерживаете ие11- ?

[Федя]

sim3x, А разве это хорошая практика не поддерживать ie11? Доля его пользователей по миру составляет около 6,5%.

[sim3x]

Федя,
В зависимости от режима поддержки - вам в любом случае придется делать какую-то часть поддержки ие своими руками
Потому никакая автоматизация вам не поможет

[Федя]

sim3x, то есть нет такой возможности использовать соурсмапы и автопрефиксер? Странно, что у людей это почему то работает на ютуб роликах и мануалах

[sim3x]

Федя,
запись мапов поставьте после префиксера

.pipe(autoprefixer({cascade: true}))
    .pipe(sourcemaps.write('./'))

ие11 по cainuse менее 2%

[Федя]

sim3x, если ставлю так, то не работают мапы

spoiler

[sim3x]

Федя,
Судя по скрину - как раз работают
Без сорсмапов scss не показался бы

[Федя]

sim3x, у меня эти стили со скрина написаны в файле _application-overwiew.scss...а на скрине хром показывает уже скомпилированный style.css...а нужно чтобы хром показывал вот так

spoiler

Answer 1

[Martovitskiy]

function style() {
  return gulp.src('./source/sass/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({cascade: true}))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./build/css/'))
    .pipe(browsersync.stream());
};

sourcemaps.write после autoprefixer

Comments

[Федя]

Так тоже не работает...команда запускается, но в хроме адреса стилей показываются не из файлов *.scss, а из подключенного к странице style.css

spoiler

А если пайп авропефиксера убрать из таска, то карты работают корректно

spoiler

[Martovitskiy]

Федя, попробуйте так:

// Compile Sass
.pipe(sourcemaps.init())
    .pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('../public/assets/css'))

// Autoprefix
.pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer('last 2 version', 'ie 8', 'ie 9'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('../public/assets/css'))
И затем только просмотр css файлов для вставки стиля.

// CSS Injection
.pipe(filter('**/*.css'))
.pipe(browserSync.reload({stream:true}))

[Федя]

Martovitskiy, вчера тоже это нагуглил)) пробовал - не работает

[Martovitskiy]

Федя, блин, ради интереса протестирую и отпишусь

[Федя]

Martovitskiy, да, только поставьте те же версии модулей, что и у меня в package.json...Может дело именно в них? У меня галп 4,0,2, возможно у автора стоял 3,8 (на нем я не пробовал)

[Martovitskiy]

посмотрел у себя получил ожидаемый результат:
package.json

spoiler

{
  "name": "martovytskyi",
  "version": "1.0.0",
  "description": "site resume front-end ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yevhenii Martovytskyi",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.26.7",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "jquery-touchswipe": "^1.6.19",
    "natives": "^1.1.6"
  },
  "devDependencies": {
    "bs-html-injector": "^3.0.3",
    "gulp-autoprefixer": "^7.0.0",
    "gulp-cache": "^1.1.3",
    "gulp-cli": "^2.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-concat-css": "^3.1.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-eslint": "^6.0.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^6.1.0",
    "gulp-rename": "^1.4.0",
    "gulp-uglifyjs": "^0.6.2",
    "gulp-util": "^3.0.8",
    "imagemin-pngquant": "^8.0.0",
    "node-sass": "^4.12.0",
    "vinyl-ftp": "^0.6.1"
  }
}

gulpfile.js

spoiler

const
  gulp          = require('gulp'),
  sass          = require('gulp-sass'),
  browsersync   = require("browser-sync").create(),
  concat        = require('gulp-concat'),
  concatCSS     = require('gulp-concat-css'),
  uglify        = require('gulp-uglifyjs'),
  cssnano       = require('gulp-cssnano'),
  rename        = require('gulp-rename'),
  del           = require('del'),
  imagemin      = require('gulp-imagemin'),
  pngquant      = require('imagemin-pngquant'),
  cache         = require('gulp-cache'),
  autoprefixer  = require('gulp-autoprefixer'),
  htmlmin       = require('gulp-htmlmin'),
  sourcemaps    = require('gulp-sourcemaps');


function gulpSass() {
  return gulp
    .src('assets/sass/**/*.sass')
    .pipe(sass({ outputStyle: "expanded" }))

    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(gulp.dest('assets/css'))
    .pipe(browsersync.stream())
}

function libsJs() {
  return gulp.src([
    'assets/libs/jquery/dist/jquery.js',
    'assets/libs/bootstrap/dist/js/bootstrap.min.js',
  ])
    .pipe(concat('libs.min.js'))
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('assets/js'))
}

function libsCss() {
  return gulp.src([
    'assets/libs/bootstrap/dist/css/bootstrap.css',
  ])
    .pipe(sourcemaps.init())
    .pipe(concatCSS('libs.css'))
    .pipe(gulp.dest('assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('assets/css'))
}

function browserSync(done) {
  browsersync.init({
    injectChanges: true,
    server: {
      baseDir: "assets/"
    },
    port: 3000,
    notify: false
  });
  done();
}

function clean() {
  return del(["dist"]);
}

function clear() {
  return cache.clearAll();
}

function images() {
  return gulp
    .src("assets/images/**/*")
    .pipe((cache(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.jpegtran({ progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true,
              use: [pngquant()]
            }
          ]
        })
      ])))
    )
    .pipe(gulp.dest("dist/assets/images"));
}

function watchFiles(done) {
  gulp.watch('assets/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('assets/css/**/*.css', reload);
  gulp.watch('assets/js/**/*.js', reload);
  gulp.watch('*.html', reload);
  done();
}

function buildFiles(done) {
  gulp.src([
    'assets/css/main.css',
    'assets/css/libs.min.css'
  ])
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'));

  gulp.src(
    'assets/js/libs.min.js')
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src('assets/js/main.js')
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src('*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
  done();
}
const watch = gulp.parallel(watchFiles, browserSync, libsCss, libsJs);
const build = gulp.series(clean, gulp.parallel(buildFiles, images, libsJs));

exports.clean = clean;
exports.clear = clear;
exports.watch = watch;
exports.build = build;

function reload(done) {
  browsersync.reload();
  done();
}

[Федя]

Martovitskiy, у вас автопрефиксер вместе с сасс прогоняет файлы из assets/sass/**/ и кладет их в assets/css...Вы не создаете тут соурсмапу для отслеживания сасс файлов в которых пишете стили..
А соурсмапы у вас создаются для бутстрапа - assets/libs/bootstrap/dist/css/bootstrap.css
Поэтому тут не может быть конфликта...Вы применяете автопрефиксер для ваших стилей сасс, а соурсмапы записываете для бутстрапа...Поправьте, если не прав)
А мой вопрос заключался именно в одновременном применении автопрефиксера и соурсмапов к стилям в сасс.