1

我使用 browsersync 的 gulp 设置似乎在检测 SCSS 文件的更改方面存在问题。它非常适合带有重新加载和检测的 SLIM。吞咽没有错误。唯一的问题是 browsersync 无法检测 SCSS 文件中的更改并重新加载或注入更改。

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    slim = require('gulp-slim'),
    autoprefix = require('gulp-autoprefixer'),
    notify = require('gulp-notify'),
    bower = require('gulp-bower'),
    image = require('gulp-image'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    browserSync = require('browser-sync').create();

var config = {
    sassPath: './source/sass',
    slimPath: './source/slim',
    bowerDir: './bower_components',
    jsPath: './source/js'
}

gulp.task('bower', function() {
    return bower()
      .pipe(gulp.dest(config.bowerDir))
});

gulp.task('js', function() {
    return gulp.src('./source/js/**/*.js')
      .pipe(concat('script.js'))
      .pipe(gulp.dest('./dist/js'));
});

gulp.task('icons', function() {
    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
      .pipe(gulp.dest('./dist/fonts'));
});

gulp.task('image', function () {
    gulp.src('./source/images/*')
      .pipe(image())
      .pipe(gulp.dest('./dist/images'));
} );

gulp.task('css', function() {
    return sass('./source/scss/**/*.scss', {
            style: 'compressed',
            loadPath: [
              './source/scss',
              config.bowerDir + '/bootstrap/scss',
              config.bowerDir + '/font-awesome/scss',
            ]
    }).on("error", notify.onError(function (error) {
            return "Error: " + error.message;
          }))
      .pipe(gulp.dest('./dist/css'))
      .pipe(browserSync.stream());
});

gulp.task('html', function() {
    gulp.src('./source/slim/**/*.slim')
      .pipe(slim({
        pretty: true
      }))
      .pipe(gulp.dest('./dist/'));
});

gulp.task('serve', ['css', 'html', 'js'], function() {
  browserSync.init({
    injectChanges: true,
    server: "./dist"
  });
  gulp.watch(config.sassPath + '/**/*.scss', ['css']);
  gulp.watch(config.slimPath + '/**/*.slim', ['html']).on('change', browserSync.reload);;
});



gulp.task('default', ['bower','js', 'icons', 'css', 'html', 'image', 'serve']);
gulp.task('build',['bower', 'js', 'icons', 'css', 'html', 'image'] );

4

1 回答 1

0

这可能不是您正在寻找的答案，但它是我一直在使用的解决方法，因为我遇到了类似的问题，使用browserSync.stream()不连续触发。

'use strict';

var gulp        = require('gulp'),
    browserSync = require('browser-sync').create();

gulp.task('serve',function(){
    browserSync.init({
        server: {
            baseDir: './dev/'
        },
        files: ['./dev/**/*.html',
                './dev/css/**/*.css',
                './dev/js/**/*.js',
                './dev/img/**/*.*'],
        notify: false
    });
});

如您所见，这使用了 browserSyncs 自己的 watch 任务，而不是在整个构建过程中通过管道传输它，这可以通过使 service 任务轻松抽象并拉入另一个项目来具有自己的优势。

希望这可以帮助。

于 2016-06-09T05:47:47.860 回答