使用Gulp,Stylus和Browser-sync进行本地预处理

时间:2017-07-06 15:11:52

标签: gulp mamp browser-sync gulp-stylus

我正在尝试为Windows上的客户端设置CSS预处理和浏览器同步。 Prepros似乎是垃圾,他不能使用codeKit,因为它只是Mac。

我向他提供了这些资源:https://webdesign.tutsplus.com/tutorials/supercharge-your-local-wordpress-development--cms-28303https://browsersync.io/docs/gulp

预处理效果很好,但必须手动刷新浏览器以查看CSS更改。

你能发现这段代码中的错误吗? MAMP也参与其中......所以它可能是别的东西。我正在尝试不同的配置以进行故障排除。

// gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var stylus = require('gulp-stylus');

gulp.task('setup-server', function() {
  var files = [
    './style.css',
    './*.php',
  ];
  browserSync.init(files, {
    proxy: 'https://website-name.dev',
  });
});

gulp.task('compile-stylus', function () {
  return gulp.src('stylus/*.styl')
    .pipe( stylus({
      // options
    }))
    .pipe( gulp.dest('./') ) // root of theme
    .pipe( browserSync.stream() )
  ;
});

gulp.task('default', ['setup-server', 'compile-stylus'], function() {
  gulp.watch('stylus/**/*.styl', ['compile-stylus']);
});


文件结构

project-root
  gulpfile.js
  /stylus
    /partials
    style.styl

1 个答案:

答案 0 :(得分:0)

尝试以下更改:

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

并在任务结束时进行以下更改:

gulp.task('compile-stylus', function () {
  return gulp.src('stylus/*.styl')
    .pipe( stylus({
      // options
    }))
    .pipe( gulp.dest('./') ) // root of theme
    .pipe( browserSync.reload({stream: true}));
});

我认为你的意思是你的文件夹结构中的gulpfile.js不是gruntfile.js。