11

これらすべての変換でソースマップを生成することは可能ですか?

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

使用したライブラリ:

私はあまりソースマップを生成できないことを知っています。私は運が悪いのでしょうか？

4

2 に答える 2

7

私は今夜​​同じ問題を抱えていましたが、まだクリーンな解決策を見つけようとしています. ただし、何とか機能させることができたので、共有したいと思いました：

注：どちらgulpifも使用していませんminify

gulp-sourcemapsソースマップオプションなしで来るように見えるので、使用してくださいgulp-less（少なくとも現時点では）。

ソースマップを保持するには、に置き換えgulp-concatます。gulp-concat-sourcemap

現在、gulp-concat は gulp-sourcemaps ではサポートされていません ( READMEを参照)。それが修正されるまで、パッチを適用したバージョンを入手してください: 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'));
});
于 2014-07-02T00:43:43.643 に答える
3

Less のバージョン 2 以降、Less コンパイラのプラグインを使用できます。また、gulp-less を使用すると、これらのプラグインを (プログラムで) 使用できます。http ://lesscss.org/usage/#plugins-using-a-plugin-in-codeも参照してください。

gulp-less のドキュメントでは、https: //github.com/plus3network/gulp-less#plugins で clean-css および autoprefix プラグインを使用する方法について説明しています。gulp-minify-css も clean-css のコードを利用していることに注意してください。

また、ソースマップを作成するための gulp-sourcemaps での gulp-less の使用については、https://github.com/plus3network/gulp-less#source-mapsで説明されています。

したがって、次を使用できるはずです。

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

上記は、./public/css/maps に書き込まれた CSS ソースマップを使用して、Less ソースの自動接頭辞および縮小された CSS を生成する必要があります。

別の方法として、Pleeease プラグインの使用を検討することもできます。Pleeease は一度に多くのポストプロセッサを実行できます。http://pleeease.io/docs/#features を参照してください。

于 2015-01-08T00:07:16.103 に答える