ngụm-sass autoprefix sourcemap

Question

Cuối tuần này tôi bắt đầu chơi đùa với ngụm. Tôi muốn thiết lập một nhiệm vụ mà có thể

• biên dịch file sass tôi
  • Tiếp tục làm việc nếu tôi phạm sai lầm trong file sass
  • làm việc với sass Bootstrap
• tạo sourcemaps
• trình duyệt append tiền tố
• tiêm css biên soạn wihtout tải lại trình duyệt
• nhanh (1-2 s top trong dev env)

tôi có hầu hết các bước nhưng tiền tố trình duyệt đã cho tôi một thời gian khó khăn Dưới đây là những gì tôi có cho đến nay

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']); 
}); 

Vấn đề là autoprefixer mang lại cho tôi một lỗi và messes lên sourcemaps

các lỗi tôi nhận được: "nuốt chửng-sourcemap-ghi: không tìm thấy tập tin nguồn: C: \ WEB \ skilldrill_v1 \ skilldrill \ sass \ app.css"

Vì vậy, đối với một số lý do nó cố gắng tìm các tệp css trong thư mục sass

[Chỉnh sửa]
Tôi đã xác định được sự cố nhưng chưa thể giải quyết được. Đường ống này hoạt động: gulp-autoprefixer -> làm một số thứ -> tiền tố tác vụ -> vinyl-sourcemaps-áp dụng

Trên dòng thứ 35 của gulp-autoprefixer \ index.js: applySourceMap (tệp, res.map .toString()); Từ thời điểm này, vinyl-sourmaps-apply hiểu rằng tập tin hiện tại (trong trường hợp của tôi app.css) cũng trở thành một nguồn.

Dưới đây là các vấn đề: a) nó cho rằng tệp css nằm trong cùng thư mục như được chỉ định trong gulp.src() thường không đúng b) nó không hoạt động chỉ với các dòng được thêm vào trình tự động sửa lỗi, nhưng thêm tham chiếu vào mỗi dòng đơn

Bạn có ý tưởng nào dựa trên thông tin này không? Tôi bắt đầu đào trong gulp-concat xử lý một vấn đề tương tự đúng cách.

Answer 1

Tôi đã gặp vấn đề tương tự với autoprefixer và sourcemaps. Tôi đã thay đổi quy trình làm việc của mình để tạo ra các sourcemaps sau khi biên dịch sass, sau đó tải vào các gulp-sourcemaps một lần nữa khi tôi chạy autoprefixer, và cuối cùng tạo các bản sourcemaps được cập nhật.

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

Và sau đó chỉ xem tệp css để chèn kiểu.

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

Answer 2

@ philipb3 CẢM ƠN !! Đã dành phần tốt hơn trong 2 ngày cố gắng tìm ra lý do tại sao autoprefixer và gulp-sourcemaps không hoạt động tốt với nhau, sau đó khi tôi khắc phục sự cố đó, trình duyệt đồng bộ hóa sẽ tải lại hoàn toàn, nhưng không tiêm css mới tạo. Điều này dường như đã giải quyết được vấn đề.

Đối với những người đang bối rối như tôi lúc đầu từ lời giải thích, đây là một mẫu của nhiệm vụ sass của tôi trong tập tin gulp của tôi với ý kiến ​​về những gì đang xảy ra.

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

Edit: Vì vậy, cuối cùng điều này cũng bắt đầu để phá vỡ một lần nữa khi tôi bắt đầu thêm một số nhiệm vụ hơn và plugin để ngụm xây dựng của tôi. Tôi không hoàn toàn chắc chắn rằng nó cần thiết để tải sourcemaps hai lần. Tôi đã xây dựng lại tập tin gulp của tôi, bắt đầu với gulp-sass và gulp-sourcemaps và điều này dường như làm việc cho tôi ngay cả sau khi cấu hình các nhiệm vụ khác sau. Hy vọng một trong hai giải pháp này sẽ làm việc cho một người nào đó.

Plugins liên quan:

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'); 

Nếu bạn đang sử dụng trình duyệt đồng bộ: (cũng thiết lập đồng hồ/phục vụ nhiệm vụ)

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

Nguồn: thay đổi một cách phù hợp

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' 
}; 

Tác vụ

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