0

sass をクリーンな css (プレフィックス付き、CSS なし、縮小済み) にコンパイルするために gulp をチェーンする最良の方法は何ですか?

次の例ではソースマップを作成しますが、ブラウザーのインスペクターで表示すると、ソース ファイルの間違った行番号を指しています。

var plugins = require('gulp-load-plugins')(),
    bourbon = require('node-bourbon').includePaths,
    neat = require('node-neat').includePaths;
gulp.task('default', function () {
  return gulp.src('src/scss/**/*.scss')
  .pipe(plugins.sourcemaps.init())
  .pipe(plugins.sass({includePaths: bourbon, includePaths: neat}))
  .on('error',plugins.util.log.bind(plugins.util, 'Sass Error'))
  .pipe(plugins.concat('styles.css'))
  .pipe(plugins.uncss({html: ['dist/**/*.html']}))
  .pipe(plugins.autoprefixer())
  .pipe(plugins.cleanCss())
  .pipe(plugins.sourcemaps.write('.'))
  .pipe(gulp.dest('dist/css/'));
 });

この問題を解決するために、以前にソースマップを出力しようとしましたが、「Neat」autoprefixerおよびcleanCss「Burbon」パスに関連するエラーが発生しました。Error: Broken @import declaration of "../neat" Broken @import declaration of "../colors" Broken @import declaration of "../variables" Broken @import declaration of "../grid" Broken @import declaration of "../tables"

4

1 に答える 1

0

cleanCSS の代わりに CSSO を使用してこのタスクを処理しますが、必要なものは何でも使用します。トリッキーな部分はソースマップであり、パスを台無しにすることがあります。

  1. ソースパスを宣言する
  2. ソースマップの初期化
  3. SCSS を CSS にコンパイルする
  4. 適切なプレフィックスのサポートを追加
  5. 生成された CSS ファイルに SourceMap を貼り付け、SCSS ファイルをポイントします。
  6. CSS ファイルを圧縮します (パッケージにコメントを保存するように指示しない限り、おそらくソースマップが削除されます)。
  7. dest パスを宣言する

Gulpfile: SASS タスク

const gulp            = require('gulp'),

      autoprefixer    = require('gulp-autoprefixer'),
      csso            = require('gulp-csso'),
      sass            = require('gulp-sass'),
      sourcemaps      = require('gulp-sourcemaps');


gulp.task('sass', ['sass'], () => {

  return gulp
    .src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write())
    .pipe(csso())
    .pipe(gulp.dest('dist/css'));
});
于 2016-09-05T06:56:19.360 に答える