Gulp + PHP + SCSS + browserSync

时间:2017-07-09 06:22:30

标签: css sass gulp-browser-sync

如何在浏览器中更新css文件如livereload,但有php文件触发完全重载?我的gulpfile中的其他所有内容都正常工作,但在gulp.dest之后似乎没有发生任何事情。没有错误,我的控制台中的输出是:

Starting 'sass'...
Finished 'sass' after 26 ms
write ./\main.css

gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    browserSync = require('browser-sync').create(),
    php = require('gulp-connect-php'),
    sourcemaps = require('gulp-sourcemaps');

var paths = {
    base: './**/',
    webroot: './public_html/',
    lib: './public_html/lib/'
};

paths.scssPath = paths.lib + 'scss/**/';
paths.scssMain = paths.scssPath + 'main.scss';
paths.scssAll = paths.scssPath + '*.scss';
paths.phpAll = paths.webroot + '**/*.php';
paths.css = paths.webroot + 'css/';
paths.cssAll = paths.css + '**/*.css';

gulp.task('php', function() {
  php.server({ base: 'public_html', port: 8010, keepalive: true });
});

gulp.task('browser-sync', ['php'], function() {
  browserSync.init({
    proxy: 'localhost:8000/',
    port: 8080,
    open: true,
    notify: false
  });
});

gulp.task('sass', function () {
  return sass(paths.scssMain)
    .on('error', function(err) {
      console.error('Error!', err.message);
    })
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.css))
    .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('default', ['sass', 'browser-sync'], function() {
  gulp.watch(paths.scssAll, ['sass']);
  gulp.watch([paths.phpAll], browserSync.reload);
});

0 个答案:

没有答案