2016-08-11 29 views
1

これは私のgulpfile.jsですが、2つの問題があります。Gulp - すべてのSassファイルをコンパイルせず、Sassエラーで停止します

1)Sassからのすべてのエラー(たとえば、設定する前に変数を保存しています)では、ウォッチャーが停止してもう一度起動する必要があります。これを修正することは可能ですか?
2)Sassコンパイルでファイルがすべて変更されない。ここで何が悪いですか?

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
// var imagemin = require('gulp-imagemin'); 
var rename = require("gulp-rename"); 
var runSequence = require('run-sequence'); 
var browserSync = require('browser-sync').create(); 

/** 
* ********************** 
* Developer Taks 
* ********************** 
*/ 
gulp.task('browserSync', function() { 
    browserSync.init({ 
     server: { 
      baseDir: 'public' 
     }, 
    }) 
}); 

/* 
* Bootstrap Sass 
* * * * * * * * * * * 
*/ 
gulp.task('bootstrap-sass', function(){ 
    return gulp.src('dev/sass/bootstrap.scss') 
     .pipe(sass()) 
     .pipe(rename('bootstrap.min.css')) 
     .pipe(gulp.dest('public/assets/plugins/bootstrap/css')) 
     .on('error', swallowError) 
     .pipe(browserSync.reload({ 
      stream: true 
     })) 
}); 

/* 
* Kopiowanie Bootstrap JS 
* * * * * * * * * * * 
*/ 
gulp.task('copy-boostrap-js', function() { 
    gulp.src('dev/js/bootstrap.js') 
    .pipe(rename('bootstrap.min.js')) 
    .pipe(gulp.dest('public/assets/plugins/bootstrap/js')); 
}); 

/* 
* Główny Sass 
* * * * * * * * * * * 
*/ 
gulp.task('global-sass', function(){ 
    return gulp.src('dev/sass/**/*.scss') 
     .pipe(sass()) 
     .pipe(gulp.dest('public/assets/css')) 
     .on('error', swallowError) 
     .pipe(browserSync.reload({ 
      stream: true 
     })) 
}); 

/** 
* ********************** 
* Production Taks 
* ********************** 
*/ 

/* 
* Kopiowanie FullPage 
* * * * * * * * * * * 
*/ 
gulp.task('copy-fullpage', function() { 
    gulp.src('dev/components/fullpage.js/dist/jquery.fullpage.min.css') 
    .pipe(rename('fullpage.min.css')) 
    .pipe(gulp.dest('public/assets/plugins/fullpage/css')); 

    gulp.src('dev/components/fullpage.js/dist/jquery.fullpage.min.js') 
    .pipe(rename('fullpage.min.js')) 
    .pipe(gulp.dest('public/assets/plugins/fullpage/js')); 
}); 

/* 
* Kopiowanie Swiper 
* * * * * * * * * * * 
*/ 
gulp.task('copy-swiper', function() { 
    gulp.src('dev/components/Swiper/dist/css/swiper.min.css') 
    .pipe(gulp.dest('public/assets/plugins/swiper/css')); 

    gulp.src('dev/components/Swiper/dist/js/swiper.min.js') 
    .pipe(gulp.dest('public/assets/plugins/swiper/js')); 
}); 

/** 
* ================================================================================== 
* ================================================================================== 
*/ 

/** 
* Watch developer tasks 
*  gulp watch 
*/     // 
gulp.task('watch', [ 'bootstrap-sass', 'global-sass', 'copy-boostrap-js' ], function() { 
    /* Bootstrap */ 
    gulp.watch('dev/js/bootstrap.js', [ 'copy-boostrap-js' ]); 
    gulp.watch('dev/sass/bootstrap.scss', [ 'bootstrap-sass' ]); 
    /* Main Sass */ 
    gulp.watch('dev/sass/**/*.scss', [ 'global-sass' ]); 
    gulp.watch('public/*.html', browserSync.reload); 
}); 

/** 
* Execute production tasks 
*  gulp build 
*/ 
gulp.task('build', function() { 
    runSequence(
     [ 'copy-fullpage', 'copy-swiper' ] 
    ) 
}); 


function swallowError (error) { 

    // If you want details of the error in the console 
    console.log(error.toString()) 

    this.emit('end') 
} 

EDIT:私のプロジェクトのファイル:https://mega.nz/#!W9Jm3ZKJ!oeGu9sTtLUKZ3bs4L0zv3ysFaOGs7ARIckGJZ0tRMzQ

答えて

1

あなたはSCSSを構築し、ファイルを見るために2つのタスクが必要です。

Build scss:あなたが必要

gulp.task('style:build', function() { 
    gulp.src(path.src.style) 
     .pipe(sass({errLogToConsole: true})) 
     .pipe(cssmin()) 
     .pipe(gulp.dest(path.build.css)); 
}); 

文字列 - {errLogToConsole: true} - 代わりに仕事を終えコンソールに表示するエラー。

ウォッチtaskpath.watch.style'src/style/**/*.scss'ある

gulp.task('watch', function() { 
    watch([path.watch.style], function (event, cb) { 
     gulp.start('style:build'); 
    }); 
}); 

- あなたがここにあなたのソースフォルダへのパスを記述する必要があります。

ウォッチタスクには依存性がありませんので、[ 'bootstrap-sass', 'global-sass', 'copy-boostrap-js' ]を削除してください。


P.S. gulp.watch('dev/sass/bootstrap.scss', [ 'bootstrap-sass' ]);を削除します。フレームワークファイルで何も変更してはいけません。悪い習慣です。

ブートストラップブロックをカスタマイズするには、ブートストラップvariablesを無効にすることができます(すべてのボタンにfont-weight: bold;がある場合は、$btn-font-weight変数を上書きする必要があります)。
まず、デフォルトの変数を持つファイルをインポートします。次に、独自の変数でファイルをインポートします。最後に、必要なブロック、たとえばnavbarやgreedをインポートします。

あなたは、メインのSCSSファイルには、次のようになります。ジョセフ・フィッツシモンズarticleで見つかった

@import "../bootstrap/scss/variables.scss"; 
@import "variables.scss"; // Put your custom variables in here 

@import "../bootstrap/scss/mixins.scss"; 

// Add navbar and greed from bootstrap 
@import "../bootstrap/scss/navbar.scss"; 
@import "../bootstrap/scss/grid.scss"; 

// Add custom files here 
@import 'custom.scss'; 
@import 'header.scss'; 

メインファイルのサンプル。

+0

ありがとう、私はこれを後で試してみます。では、ブートストラップコンポーネントをどのように編集するのが最適でしょうか?自分のCSSでは通常この要素を上書きしますか? –

+0

@Vertisan Bootsrapには多くの変数があります。 https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss変更することができます。たとえば、ブートスラップファイルをインポートした後、変数を上書きしてファイルをインポートしてから、プロジェクトに本当に必要なブートスラップブロックとコンポーネントをインポートします。 メインのscssファイルは次のようになります: '@import" bootstrap "; @import "my-custom-variables"; @import "ブートストラップグリッド"; @import "bootstrap-button"; @import "my-other-styles"; '。 – 3rdthemagical

+0

良い例はここですhttp://josephfitzsimmons.com/using-only-bootstrap-3s-grid-system-using-less/ – 3rdthemagical

0

gulp-plumberを使用してエラーをキャッチできます。あなただけの私の画像を見れば、私はクリスタルクリアなあなたは意志として説明しています

Here's an article that covers it

1

を実行している時計を維持するためにhandleError機能にthis.emit('end');を追加します。

また、あなたは

コンソールでハッピープログラミングをSCSS/SASSエラーを取得します!

enter image description here

は私がガルプ + ブラウザ同期 + 一気-SASS

これだけパッケージ

を使用しました
関連する問題