2

This script works and refreshes my page, and runs all the tasks I have set up, but it gives me "You tried to start BrowserSync twice" in my terminal every time it runs.

As far as I've researched, the cause should be the browserSync.reload I've added in the gulp.watch task, but when I remove it, it gives me "TypeError: Cannot call a class as a function." When I look on Github to find other examples for setting up BrowserSync they are all written slightly different so I can't get a real grasp on the syntax.

It's not a critical error, but it is a pesky alert.

var gulp = require('gulp');
var sass = require('gulp-sass');
var php = require('gulp-connect-php');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');


gulp.task('sass', function() {
    return gulp.src('assets/css/*.scss')
        .pipe(sass())
        .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('assets/css/'));
});

gulp.task('image-min', function () {
    gulp.src('assets/images/src/*')
        .pipe(imagemin())
        .pipe(gulp.dest('assets/images/dist/'))
});

gulp.task('php', function() {
    php.server({ base: '../drive4innovative.com', port: 8080, keepalive: true});
});

gulp.task('browser-sync',['php'], function() {
    browserSync({
        proxy: 'localhost/drive4innovative.com/',
        port: 8080,
        open: true,
        notify: false
    });
});

    gulp.task('watch', ['browser-sync', 'sass', 'image-min'], function() {
    gulp.watch('assets/css/*.scss', [sass]);
    gulp.watch('**/*.php', browserSync.reload);
    gulp.watch('*.js', browserSync.reload);
});
Andrew Myers
  • 2,754
  • 5
  • 32
  • 40
CALEBUNGA
  • 29
  • 3
  • Unrelated note: In your `watch` task, there should be quotes around `sass` in order to reference the `sass` task. Without that, it's going to be pointing to `gulp-sass`. – Andrew Myers May 02 '18 at 18:01
  • Check out [this other question](https://stackoverflow.com/questions/42281597/gulp-connect-php-browsersync-gulp-connect-address-in-use-issue). Your issue could be with the way you start the server, not with `gulp.watch`. – Andrew Myers May 03 '18 at 12:35
  • I would try var browserSync = require('browser-sync').create(); and browserSync.init({ in your task and see if that helps - especially the .init – Mark May 04 '18 at 04:39

0 Answers0