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