BrowserSync trong Laravel Valet

Đối với người dùng Mac không có nhu cầu tạo các trang web cục bộ với các phiên bản PHP khác nhau, Laravel Valet có lẽ là môi trường phát triển localhost nhẹ nhất, nhanh nhất và tốt nhất để thiết lập WordPress (hoặc bất kỳ trang web tĩnh / động nào khác) tính đến ngày hôm nay.

Một vài lý do tại sao tôi yêu Valet:

  • Nhẹ, siêu nhanh, cho cảm giác nguyên bản như thể là một phần của hệ điều hành
  • Các trang web luôn hoạt động không có gì để bắt đầu / dừng lại
  • Khả năng nhóm các trang web thành các thư mục
  • SSL tích hợp tự động cho mọi trang web
  • wp-cli-valet-command - “Lệnh này sẽ tạo ra một bản cài đặt WordPress mới - hoàn chỉnh với cơ sở dữ liệu và https sẵn sàng để sử dụng trong trình duyệt của bạn nhanh hơn bạn có thể mặc quần vào.”
  • Tự động hóa tùy chỉnh. Ví dụ: cài đặt WordPress với chủ đề yêu thích của tôi, cài đặt Genesis, gỡ bỏ các plugin mặc định, cài đặt và kích hoạt All-in-One WP Migration và hơn thế nữa, nhờ WP-CLI và shell scripting.

và bây giờ, chúng tôi có thể thêm một nữa vào danh sách: Tự động xem các thay đổi được thực hiện đối với tệp trong trình duyệt.

Hướng dẫn này cung cấp các bước thiết lập BrowserSync để hoạt động với các trang web Valet bằng Gulp.

Sau khi bạn đã làm theo điều này, việc chạy một gulp lệnh duy nhất trong thiết bị đầu cuối sẽ khởi chạy URL trang web của bạn trong một tab mới trong trình duyệt mặc định của bạn và tự động tải lại bất cứ khi nào bạn thực hiện bất kỳ thay đổi PHP và JS nào.

Các thay đổi CSS sẽ được đưa vào mà không cần làm mới trình duyệt.

Phần thưởng: Mở URL bên ngoài được tạo trong các thiết bị khác như máy tính bảng và điện thoại di động trên cùng một mạng với máy Mac của bạn và mọi thứ sẽ hoạt động đồng bộ - tải lại, chèn và cuộn.

Bước 0: Điều kiện tiên quyết

  1. Cài đặt Node.
  2. Cài đặt Gulp CLI trên toàn cầu.
npm install gulp-cli -g

Bước 1: Cấu hình dự án

Tạo một tệp có tên trong thư mục dự án (trong trường hợp của tôi, đây là thư mục chủ đề đang hoạt động) có:package.json

{
    "name": "wp-browsersync",
    "version": "1.0.0",
    "description": "Description of your project",
    "main": "gulpfile.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Your Name",
    "license": "GPL-2.0"
}

Bước 2: Cài đặt Gulp và BrowserSync cục bộ

Điều hướng đến thư mục dự án trong thiết bị đầu cuối và chạy

npm install browser-sync gulp --save-dev

Thao tác này sẽ tạo một tệp, thư mục và thêm phần vào .package-lock.json node_modules devDependencies package.json

Bước 3: Tệp cấu hình Gulp

Tạo một tệp có tên như sau:gulpfile.js

// Require our dependencies.
var browserSync = require( 'browser-sync' ).create();
var gulp = require( 'gulp' );

var siteName = 'genesis-sample'; // set your siteName here
var userName = 'sridharkatakam'; // set your macOS userName here

// Set assets paths.
var paths = {
    php: [ '*.php', '**/*.php' ],
    scripts: [ 'js/*.js' ],
    styles: [ '*.css', 'css/*.css' ]
};

/**
 * Reload browser after PHP & JS file changes and inject CSS changes.
 *
 * https://browsersync.io/docs/gulp
 */
gulp.task( 'default', function() {
    browserSync.init({
        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'
        }
    });

    gulp.watch( paths.php ).on( 'change', browserSync.reload );
    gulp.watch( paths.scripts ).on( 'change', browserSync.reload );

    gulp.watch( paths.styles, function() {
        gulp.src( paths.styles ).pipe( browserSync.stream() );
    });
});

Thay thế bằng tên của trang web địa phương của bạn.genesis-sample

Thay thế sridharkatakam bằng tên người dùng macOS của bạn.

Bước 4: Phép thuật!

Chạy

gulp

Một URL như https: //genesis-sample.test: 8000 sẽ tự động được khởi chạy trong tab mới trong trình duyệt của bạn nếu mọi thứ diễn ra tốt đẹp.

Để truy cập trang web trong các thiết bị khác trên cùng một mạng, bạn cần thay thế tên trang web bằng IP của máy tính của mình (có thể lấy từ ứng dụng Tiện ích Mạng tích hợp sẵn) trong URL Bên ngoài được tạo.

Ví dụ: thay vì .https://192.168.86.47:8000 https://genesis-sample.test:8000

Bỏ qua cảnh báo bảo mật của trình duyệt và tiếp tục.

Đó là nó!

Nếu dự án của bạn thuộc quyền kiểm soát phiên bản Git, hãy đảm bảo rằng dự án node_modules được thêm vào ..gitignore