これは私の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
ありがとう、私はこれを後で試してみます。では、ブートストラップコンポーネントをどのように編集するのが最適でしょうか?自分のCSSでは通常この要素を上書きしますか? –
@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
良い例はここですhttp://josephfitzsimmons.com/using-only-bootstrap-3s-grid-system-using-less/ – 3rdthemagical