@lifetowin
Верстаю.

Почему ломаются корректные пути к stylus файлам (gulp-sourcemaps + browsersync)?

Есть общий файл style.styl. В нем есть ряд импортов из других .styl файлов. Убираю любой верхний импорт и ломаются все пути нижних импортов, после того как browsersync перезагружает страницу. Если после этого обновить вручную страницу, то пути встают уже нормально.

Пример:

5aa26f3ca6725010987092.png

Убираем импорт normalize.styl (@import "assets/_normalize"). Импорта этого файла уже нет, но пути указывают на него.

5aa26f5f1e10d340436140.png

Мой gupfile:

var gulp         = require('gulp'),
    browserSync  = require('browser-sync').create(),
    uglify       = require('gulp-uglifyjs'),
    cssnano      = require('gulp-cssnano'),
    gulpIf       = require('gulp-if'),
    useref       = require('gulp-useref'),
    plumber      = require('gulp-plumber'),
    flatten      = require('gulp-flatten'),
    autoprefixer = require('gulp-autoprefixer'),
    ftp          = require('vinyl-ftp'),
    imagemin     = require('gulp-imagemin'),
    cache        = require('gulp-cache'),
    pngquant     = require('imagemin-pngquant'),
    spritesmith  = require('gulp.spritesmith'),
    stylus       = require('gulp-stylus'),
    sourcemaps   = require('gulp-sourcemaps'),
    pug          = require('gulp-pug');

gulp.task('pug', function(){
    return gulp.src(['app/pug/**/*.pug','!app/pug/**/_*.pug'])
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('app'))
});

// stylus

gulp.task('stylus', function(){
    return gulp.src(['app/stylus/**/*.styl', '!app/stylus/**/_*.styl'], {'base': 'app'})
        .pipe(sourcemaps.init())
        .pipe(stylus())
        .pipe(sourcemaps.write('.'))
        .pipe(flatten())
        .pipe(gulp.dest('app/css'))
        // .pipe(browserSync.stream())
});

// sync

gulp.task('browser-sync', function(){
    browserSync.init({
        server: {
            baseDir: 'app'
        },
        injectChanges: true,
        logLevel: 'debug'
    });
});

// watch

gulp.task('watch', function(){
    gulp.watch('app/pug/**/*.pug', gulp.series('pug'));
    gulp.watch(['app/stylus/**/*.styl','app/stylus/**/_*.styl'], gulp.series('stylus'));
    
    gulp.watch("app/css/style.css").on('change', browserSync.reload);
    gulp.watch("app/*.html").on('change', browserSync.reload);
    gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
});

gulp.task('default', gulp.series(
    gulp.parallel('pug', 'stylus'),
    gulp.parallel('watch','browser-sync')
));
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы