Hent browsersync, der kører med Gulp 4 og Valet | WP strande

Få Browsersync i gang med Gulp 4+ og Valet som et lokalt udviklingsmiljø. Med Gulp 4+ har der været nogle kodeopdateringer, der kræver ældre gulp.js filer, der skal opdateres, denne vejledning ser på at få Browsersync til at arbejde med Gulp, hvor det lokale udviklingsværktøj er Valet.

nodejs

Sørg for, at du allerede har det nodejs og NPM installeret, kan du gøre dette via Homebrew eller en direkte installation fra Node. Den aktuelle stabile langtidsversion er 12. Du kan kontrollere din nodeversion med ...

node --v

Gulp

Dernæst får Gulp installeret, hvis du har en eksisterende installation, kontroller dine versioner ...

gulp --v

Du vil se 2 versioner, hvis den sti, du befinder dig i allerede har en npm package.json fil, Gulp 4+ er ændret fra tidligere versioner.

CLI version: 2.2.0
Local version: 4.0.2

Hvis du mangler enten, kan du installere CLI-versionen med ...

npm install --global gulp-cli

Og din lokale pakkeversion skal føjes til et bibliotek, der allerede er med en package.json-fil, hvis ikke kørt npm init og løb derefter ...

npm install --save-dev gulp

Browsersync

Installer browsersync ...

npm install browser-sync --save-dev

package.json

Din package.json fil skal ligne denne ...

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "description",
  "repository": {
    "type": "git",
    "url": "?.git"
  },
  "author": "author",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
  }
}

Lave en gulp.js fil

const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const sitename = 'gulp'; // set your siteName here
const username = 'neilg'; // set your macOS userName here


  function watch() {
    browserSync.init({

       proxy: sitename +'.test',
        // or if site is https comment out above line and uncomment lines below
      	// proxy: 'https://' + sitename + '.test',
        //       host: sitename + '.test',
        //       open: 'external',
        //       port: 8000,
        //       https: {
        //           key:
        //               '/Users/' + username + '/.config/valet/Certificates/' + sitename + '.test.key',
        //           cert:
        //               '/Users/' + username + '/.config/valet/Certificates/' + sitename + '.test.crt',
        // 	      },	
    });

	// Watched files paths
	gulp.watch('./*.php').on('change',browserSync.reload);
	gulp.watch('./js/*.js').on('change', browserSync.reload);
	gulp.watch('./css/*.css').on('change', browserSync.reload);
	gulp.watch('./*css').on('change', browserSync.reload);
}

exports.default = watch;

Angiv variablerne til brugernavn og stednavn, vælg enten http v https til browserindlæsning og opdater de stier, du har brug for.

Kør gulp

Nu fra projektkataloget kan du køre standard gulp-opgaven ...

gulp

Nu genindlæser browsersync alle filændringer.

Bemærk, at serveren er konfigureret som proxy at placere pænt med Valet - hvis du ikke bruger Valet eller en lignende lokal dev, men i stedet en server-app som opsætning, se browsersync-dokumenter.