F
F
Fedya2019-08-23 06:08:15
gulp.js
Fedya, 2019-08-23 06:08:15

Why doesn't Gulp autoprefixer work with sourcemaps?

When starting the style task from

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;


the console gives an error and the function does not start...
But if you remove the pipe - .pipe(autoprefixer({...})), then the sourcesmaps start to display correctly..
How to make friends with the autoprefixer?? I have been reading the manuals for several days now and I just can’t get it to work ...
If anything, galp version 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"
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Martovitskiy, 2019-08-23
@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 after autoprefixer

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question