Gulp sourcemap với ít/concat/autoprefixer/minifycss?

Question

Có thể tạo một sourcemap với tất cả các phép biến đổi này không?

gulp.task('styles', function() { 
    return gulp.src(source.styles) 
     .pipe(plumber()) 
     .pipe(gulpif(/\.less$/, plumber().pipe(less({ 
      strictMath: true, 
      strictUnits: true, 
     })))) 
     .pipe(concat('bundle.css')) 
     .pipe(prefixer(['last 2 versions', '> 1%', 'ie 9'], {cascade: false})) 
     .pipe(minifyCss()) 
     .pipe(gulp.dest('public/css')); 
}); 

Libraries sử dụng:

• gulp-less
• gulp-if
• gulp-concat
• gulp-autoprefixer
• gulp-minify-css

Tôi biết less có thể tạo ra sourcemaps, nuốt chửng-concat Tôi không nghĩ hỗ trợ họ, autoprefixer có nghĩa vụ phải bảo vệ họ, và giảm bớt-css/clean-css dường như không thực hiện bất kỳ đề cập đến bản đồ nguồn. Tôi có may mắn không?

Answer 1

Tôi đã gặp vấn đề tương tự tối nay và tôi vẫn đang tìm cách tìm ra giải pháp sạch. Tuy nhiên, tôi chỉ quản lý để có được một cái gì đó làm việc vì vậy tôi nghĩ tôi sẽ chia sẻ:

Lưu ý: Tôi đang sử dụng không phải gulpif cũng không minify

Sử dụng gulp-sourcemaps từ gulp-less dường như đến mà không có tùy chọn bản đồ nguồn (ít nhất là cho khoảnh khắc).

Thay thế gulp-concat bằng gulp-concat-sourcemap để giữ nguyên các bản đồ nguồn.

Gulp-concat hiện không được hỗ trợ bởi gulp-sourcemaps (xem README). Cho đến khi đó được cố định có một phiên bản vá để lấy ở đây: https://github.com/floridoo/gulp-concat/tree/sourcemap_pipe2

gulp.task('less', function() { 
    gulp.src(sources.less) 
    .pipe(sourcemaps.init()) 
    .pipe(less()) 
    .pipe(prefix({ map: true })) 
    .pipe(concat('build.css')) 
    .pipe(sourcemaps.write() 
    .pipe(gulp.dest(dirs.build + 'assets/css')); 
}); 

Answer 2

Kể từ phiên bản 2 của Ít bạn có thể sử dụng plug-in cho trình biên dịch ít. Ngoài ra gulp-less cho phép bạn sử dụng các plugin này (có lập trình), hãy xem thêm http://lesscss.org/usage/#plugins-using-a-plugin-in-code

Tài liệu về gulp-less mô tả cách sử dụng plugin clean-css và autoprefix tại https://github.com/plus3network/gulp-less#plugins. Lưu ý rằng gulp-minify-css đang tận dụng mã của clean-css.

Ngoài ra việc sử dụng ngụm-less với ngụm-sourcemaps để tạo sourcemaps đã được mô tả ở https://github.com/plus3network/gulp-less#source-maps

Vì vậy, bạn sẽ có thể sử dụng:

var LessPluginCleanCSS = require("less-plugin-clean-css"), 
    cleancss = new LessPluginCleanCSS({advanced: true}); 

var LessPluginAutoPrefix = require('less-plugin-autoprefix'), 
    autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]}); 


gulp.src('./less/**/*.less') 
    .pipe(sourcemaps.init()) 
    .pipe(less({ 
    plugins: [autoprefix, cleancss] 
    })) 
    .pipe(sourcemaps.write('./maps')) 
    .pipe(gulp.dest('./public/css')); 

Trên đây nên tạo ra autoprefixed và minified CSS của nguồn Ít bạn, với sourcemaps CSS ghi vào ./public/css/maps

Hoặc bạn có thể cân nhắc sử dụng Pleeease plugin Pleeease có thể chạy nhiều postprocessors một lần, xem http://pleeease.io/docs/#features