Gulp -sass autoprefix sourcemap

В эти выходные я начал играть с gulp. Я хотел создать задачу, которая может

  • скомпилируйте мои sass файлы
    • продолжайте работать, если я ошибаюсь в файле sass
    • работа с sass Bootstrap
  • генерировать исходные файлы
  • добавить префиксы для браузера
  • вставить скомпилированный css wihtout browser reload
  • быстрый (1-2 с вершины в dev env)

Я получил большинство шагов, но префиксы браузера дали мне трудное время Вот что я получил до сих пор

var browserSync = require('browser-sync');
var reload = browserSync.reload;
var filter = require('gulp-filter');
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');

var config = {
    sassPath: './sass',
    bower: './bower_components',
    bootstrap: './bower_components/bootstrap-sass-official/assets/stylesheets',
    fonts: './bower_components/bootstrap-sass-official/assets/fonts'
};

gulp.task('sass', function () {
    return gulp.src(config.sassPath + '/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                //outputStyle: 'compressed',
                outputStyle: 'nested',
                precision: 10,
                includePaths: [
                    config.sassPath,
                    config.bower,
                    config.bootstrap
                ],
                onError: function (err) {
                    notify().write(err);
                }
            }))
            .pipe(concat('app.css'))
            .pipe(autoprefixer('last 2 version'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('css'))
        .pipe(filter('**/*.css')) // Filtering stream to only css files
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('browser-sync', function() {
    browserSync({
        logLevel: "info",
        server: {
            baseDir: './',
            //directory: true,
            routes: {
                "/fonts": config.fonts
            }
        }
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch(['./**/*.html', 'js/**/*.js'], reload);
    gulp.watch('sass/*.scss',['sass']);
});

Проблема заключается в том, что autoprefixer дает мне ошибку и помешает исходным файлам

Ошибка, которую я получаю: "gulp -sourcemap-write: исходный файл не найден: C:\WEB\skilldrill_v1\skilldrill\sass\app.css"

Поэтому по какой-то причине он пытается найти файлы css в sass dir

[Изменить]
Мне удалось найти проблему, но она не смогла ее решить. Труба эта вещь работает: gulp -autoprefixer → сделать некоторые вещи → задачи префикса → vinyl-sourcemaps-apply

В 35-й строке gulp -autoprefixer\index.js: applySourceMap (файл, res.map.toString()); С этого момента винил-sourmaps-apply понимает, что текущий файл (в моем случае app.css) также становится источником.

Вот проблемы: a) он считает, что файл css находится в той же папке, что указан в gulp.src(), которая обычно неверна b) он не работает только с строками, добавленными автоприемником, но добавляет ссылку на каждую отдельную строку

Есть ли у вас идеи, основанные на этой информации? Я начал копать в gulp -concat, который правильно обрабатывает подобную проблему.

ОТВЕТЫ

Ответ 1

У меня были те же проблемы с autoprefixer и sourcemaps. Я изменил свой рабочий процесс, чтобы создать исходные файлы после компиляции sass, а затем снова загрузиться в gulp -sourcemaps при запуске autoprefixer и, наконец, создать обновленные исходные файлы.

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

Ответ 2

@philipb3 СПАСИБО!! Проделали большую часть 2 дней, пытаясь понять, почему autoprefixer и gulp -sourcemaps не играли хорошо вместе, а затем, когда я, наконец, исправил эту проблему, браузер-sync полностью перезагрузился, но не впрыскивал только что сгенерированный css. Это, похоже, решило проблему.

Для тех, кто смущен, как я был сначала из объяснения, вот пример моей задачи sass в моем файле gulp с комментариями о том, что происходит.

gulp.task('sass', function() {
    // create postcss processors
    var processors = [
        mqpacker,
        autoprefixer({ browsers: ['last 2 version'] })
    ];

return gulp.src(src.scss)
   .pipe(sourcemaps.init()) // start sourcemaps
   .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) // compile sass
   .pipe(sourcemaps.write()) // write map inline
   .pipe(gulp.dest(src.css)) // pipe to css dir
   .pipe(sourcemaps.init({loadMaps: true})) // init sourcemaps again after pipe to dest dir
   .pipe(postcss(processors)) // run postcss stuff
   .pipe(sourcemaps.write('./maps')) // write map to external dir instead of inline
   .pipe(gulp.dest(src.css)) // pipe to dest dir again
   .pipe(filter('**/*.css')) // filter out everything that isn't a css file
   .pipe(reload({ stream: true })); // pipe result to browser-sync for reload
});

Изменить: Итак, в конце концов, это также снова начало ломаться, когда я начал добавлять еще несколько задач и плагинов в мою конструкцию gulp. Я не совсем уверен, что нужно дважды загружать исходные коды. Я перестроил файл gulp, начиная с gulp -sass и gulp -sourcemaps, и это, похоже, работает для меня даже после настройки других задач после. Надеюсь, что одно из этих двух решений будет работать для кого-то.

Соответствующие плагины:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

//** Post CSS Modules **//
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var mqpacker = require('css-mqpacker');

Если вы используете браузер-синхронизацию: (также задайте задачи watch/serve)

//** Browser-Sync **//
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

Источники: измените их соответственно

var src = {
   base: 'ROOT_FOLDER',
   js:     'ROOT_FOLDER/js/**/*.js',
   css:    'ROOT_FOLDER/css',
   html:   'ROOT_FOLDER/*.html',
   jsdir:  'ROOT_FOLDER/js',
   maps:   './maps',
   scss:   'ROOT_FOLDER/scss/**/*.scss'
};

Задача

gulp.task('sass', function () {
    // load post-css plugins
    var processors = [
        mqpacker,
        autoprefixer({
            browsers: ['last 2 version']
        })
    ];
    // start sass task
    return gulp.src(src.scss)
      .pipe(sourcemaps.init()) // init sourcemaps
      .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError)) // compile scss
      .pipe(postcss(processors)) // autoprefix and combine media queries
      .pipe(sourcemaps.write(src.maps)) // write emaps relative to source dir
      .pipe(gulp.dest(src.css)) // pipe to css folder
      .pipe(browserSync.stream()); // send stream to browser-sync task
});