Question

我在尝试让LiveReload使用Gulp Connect插件时遇到问题。

以下是我的gulpfile.js

我的html文件与gulpfile.js在同一目录中，并且所有sass文件都从同一文件夹（smacss）和/sass/modules/*.scss中的其他部分文件导入/sass/styles.scss

帮助表示赞赏

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');

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

// keeps gulp from crashing for scss errors
gulp.task('sass', function () {
  return gulp.src('./sass/*.scss')
      .pipe(sass({ errLogToConsole: true }))
      .pipe(gulp.dest('./css'));
});

gulp.task('livereload', function (){
  gulp.src('.')
  .pipe(connect.reload());
});

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

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

Answer 1

不确定您的根路径是否在此处运行。您可以尝试root: '/'或仅gulp.watch吗？

gulp.src和gulp.src('./*')可能需要文件路径而不是目录路径。您可以尝试gulp.watch('./*')和const Modal = Ractive.extend({ template: ` <div class="modal"> <div class="modal__header">{{yield header }}</div> <div class="modal__body">{{yield body }}</div> <div class="modal__footer">{{yield footer }}</div> </div> ` })吗？

Answer 2

这最终为我工作：

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var sourcemaps = require('gulp-sourcemaps');
    var prefix = require('gulp-autoprefixer');
    // POST CSS
    var postcss = require('gulp-postcss');
    var cssnext = require('postcss-cssnext');
    var connect = require('gulp-connect');




    gulp.task('myStyles', function () {
    var processors = [
    cssnext()
    ];

    gulp.src('sass/*.scss')

    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(sass().on('error', sass.logError))    
    .pipe(sourcemaps.write('.', {
    includeContent: false,
    sourceRoot: '../sass'
    }))
    .pipe(gulp.dest('css'))
    .pipe(connect.reload());
    });

    gulp.task('connect', function() {
    connect.server({
    livereload: true
    });
    });

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

    gulp.task('default', ['watchMyStyles', 'connect']);
    gulp.task('server', [ 'connect']);

Gulp Live Reload不工作

2 个答案: