使用BrowserSync的Gulp

Question

我在试着让我的杯状文件正常工作。

目前，它没有检测到我的html、sass或JS的任何更改。SASS和JS没有编译到资产文件夹--直到我开始使用browserSync.我确实让它检测到了html的变化，但是在我试图提高我的吞咽文件的效率之后，它也不起作用了。

我需要一些有经验的眼睛看看下面我做错了什么..。

package.json

{
  "devDependencies": {
    "gulp": "latest",
    "gulp-util": "latest",
    "gulp-sass": "latest",
    "gulp-uglify": "latest",
    "gulp-concat": "latest",
    "gulp-connect-php": "latest",
    "gulp-rename": "latest",
    "browser-sync": "latest"
    }
}

gulpfile.js

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');

// Change these values
var jsSources = ['assets/scripts/*.js'],
    sassSources = ['assets/sass/*.scss'],
    sassSources = ['**/*.php'],
    outputDir = 'assets',
    virtualHost = 'annual-review-2016.dev';


// Log Errors
gulp.task('log', function() {
  gutil.log('== My Log Task ==')
});

// Manage CSS
gulp.task('sass', function() {
  gulp.src('sassSources')
  .pipe(sass({style: 'expanded'}))
  .pipe(concat('app.css'))
    .on('error', gutil.log)
  .pipe(gulp.dest('outputDir'))
});

// Manage JS
gulp.task('js', function(){
    return gulp.src('jsSources')
        .pipe(concat('app.js'))
        .pipe(uglify())
          .on('error', gutil.log)
        .pipe(gulp.dest('outputDir'));
});


// Live Reload in Browser
gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: 'annual-review-2016.dev'
    });
  });
});


// Watch the Styles and Scripts on Save
gulp.task('watch', function() {
  gulp.watch('sassSources', ['sass']);
  gulp.watch('jsSources', ['js']);
  gulp.watch('phpSources').on('change', function () {
    browserSync.reload();
  });
});


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

Answer 1

1. 您有sassSources的复本声明
2. 您需要删除gulp.dest('outputDir')中的引号，否则gulp将把输出写入/outputDir而不是/assets

对于自动重新加载，您需要将.pipe(browserSync.reload({stream: true}));包含在管道链的底部(例如，在'sass‘任务中的gulp.dest下)。