Блог

У меня есть небольшой список .scss того, что будет преобразовано в css с помощью gulp-sass. Процесс преобразования выполняется очень быстро, менее чем за 5 мс.

Но перезагрузка файлов css с помощью gulp-connect плагина занимает некоторое время, 3s а иногда даже вообще не работает, и мне приходится снова сохранять .scss файл, чтобы увидеть результат в браузере. Проверено с расширением / без Livereload расширения для Chrome.

Почему?

Моя задача Sass:

 gulp.task('sass', function() {
    gulp.src(['source/sass/*.scss'])
    .pipe(sass({
        outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('source/assets/css'))
    .pipe(connect.reload());
});
  

Моя задача наблюдения:

 gulp.task('watch', function () {
  gulp.watch(['source/sass/**/*.scss'], ['sass']);
});
  

Моя задача подключения:

 gulp.task('connectDev', function() {
  connect.server({
    root: 'source',
    port: 8001,
    livereload: true
  });
});
  

И задача по умолчанию:

 gulp.task('default', ['sass', 'connectDev', 'watch']);
  

Я не знаю точно, что произошло, но путем добавления .on( 'error', gutil.log ) after reload() и sass() проблема решена.

 gulp.task('sass', function() {
    gulp.src(['source/sass/*.scss'])
    .pipe(sass({
        outputStyle: 'expanded'
    })).on( 'error', gutil.log )
    .pipe(gulp.dest('source/assets/css'))
    .pipe(connect.reload()).on( 'error', gutil.log );
});
  

Возможно, это каким-то образом вызывает перезагрузку.

Также разделение .pipe(connect.reload()) вызвало задержку и сбой. вот так:

 gulp.task('sass', function() {
    gulp.src(['source/sass/*.scss'])
    .pipe(sass({
        outputStyle: 'expanded'
    })).on( 'error', gutil.log )
    .pipe(gulp.dest('source/assets/css'))
    .pipe(connect.reload()).on( 'error', gutil.log );
});

gulp.src('source/assets/**/*.css')
.pipe(connect.reload()).on( 'error', gutil.log );
  

Вот простое и проверенное решение для загрузки файлов, основанное на connect сервере connect-livereload и gulp-livereload плагинах, которые работают очень быстро для меня:

 
var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');

var config = {
    rootDir: __dirname,
    servingPort: 8080,

    // the files you want to watch for changes for live reload
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js', '!karma.conf.js', '!protractor.conf.js']
}

// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);

gulp.task('watch', ['connect'], function () {
  gulpLivereload.listen();
  gulp.watch(config.filesToWatch, function(file) {
    gulp.src(file.path)
      .pipe(gulpLivereload());
  });
});

gulp.task('serve', ['connect'], function () {
  return opn('http://localhost:'   config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});