Question

我试图让我的Gulp文件正常工作。

目前它还没有检测到我的任何html，sass或JS变化。 SASS和JS没有编译进资产文件夹 - 这一直有效，直到我开始使用browserSync ...我确实让它检测到了html的变化，但是现在在我尝试创建之后它还没有工作gulpfile更有效率。

我需要一些经验丰富的眼睛来看看我在下面做错了什么......

的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

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

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

使用BrowserSync的Gulp文件监视

1 个答案: