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.


    Không có nhận xét nào