4

次の問題があり、gulpfile の何が問題なのかわかりません。すべてが正常に機能しており、sass ファイルがコンパイルされ、何かを変更するとブラウザーが更新されます。しかし、新しい部分ファイルを追加して _base.scss にインポートすると、browsersync はその部分の変更のみを認識し、sass ファイル全体をコンパイルしてブラウザーをリロードしません。この問題を解決する方法を知っている人はいますか?私は良い解決策を見つけることができませんでした。ありがとう!

ここに私のgulpfile.jsがあります

  /*=============================================>>>>>
= gulpfile - all the gulptasks are here =
===============================================>>>>>*/



/*----------- variables -----------*/

// gulp
var gulp          = require('gulp');
// css stuff
var postcss       = require('gulp-postcss');
var sass          = require('gulp-sass');
var autoprefixer  = require('gulp-autoprefixer');
var sourcemaps    = require('gulp-sourcemaps');
var cssnext       = require('postcss-cssnext');
var lost          = require('lost');
var csswring      = require('csswring');

// javascript
var babel         = require('gulp-babel');

// jade
var jade          = require('gulp-jade-php');

// browser sync
var browserSync   = require('browser-sync').create();
var reload        = browserSync.reload;


/*----------- tasks -----------*/

// style task
gulp.task('styles', function(){
  var processors = [
    autoprefixer,
    cssnext,
    lost,
    csswring
  ];

  return gulp.src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./css/'))
    .pipe(reload({stream: true}));
    ;
});

// javascript task
gulp.task('javascript', function(){
  return gulp.src('./js/*.js')
    .pipe(babel())
    .pipe(gulp.dest('./js/dist/'))
    .pipe(reload({stream: true}));
});


// jade task
gulp.task('jade', function(){
  return gulp.src('./jade/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('./templates/'))
    .pipe(reload({stream: true}));
});


// browser sync
gulp.task('browserSync', function(){
    var files = [
      './scss/**/*.scss',
      './css/style.css',
      './*.php',
      './templates/**/*.php',
      './js/*js',
      './jade/*jade'
    ];
    browserSync.init(
      files, {
      proxy : 'localhost:8888/jobs/heisaplan/',
    });
});

// watching the files for changes
gulp.task('watch', function(){
  gulp.watch('./scss/**/*.scss', ['styles']).on('change', browserSync.reload);
  gulp.watch('./js/*.js', ['javascript']).on('change', browserSync.reload);
  gulp.watch('./jade/**/*.jade', ['jade']).on('change', browserSync.reload);
  gulp.watch('./templates/**/*.php').on('change', browserSync.reload);
  gulp.watch('./*.php').on('change', browserSync.reload);
});

// default gulp task
gulp.task('default', ['watch', 'browserSync', 'styles', 'javascript', 'jade']);
4

0 に答える 0