Локальная веб-среда с использованием gulp, Browser-syn c и Laravel Valet - PullRequest
Новая
       9

Локальная веб-среда с использованием gulp, Browser-syn c и Laravel Valet

0 голосов
/ 21 февраля 2020

У меня есть 2 части к этим вопросам.

Я все еще сталкиваюсь с gulp и пытаюсь настроить свою веб-среду так, чтобы она была максимально эффективной.

Часть 1:

У нас есть файл gulpfile. js работает должным образом, поэтому при внесении изменений в веб-файл наш браузер обновляется. У нас также есть Laravel Valet, но они не работают вместе.

Когда Gulp работает, URL нашего браузера: http://localhost: 3000 / Когда Laravel Valet работает, URL нашего браузера - company.test

Как и следовало ожидать, если мы обновим файл 'http://localhost: 3000 / ' refreshes, 'company.test' не.

Мы немного отредактировали наш файл gulpfile. js, который теперь частично работает. Наш URL теперь https://company.test: 3000 / , но если мы редактируем файл, браузер не обновляет sh.

Я не могу решить эту проблему?

Вот наш gulpfile. js

// --------------------------------------------
// Gulp Loader
// --------------------------------------------

const {
    src,
    dest,
    task,
    watch,
    series,
    parallel
} = require('gulp');

// --------------------------------------------
// Dependencies
// --------------------------------------------

const domain = 'company.test'; // <== edit this one
const homedir = require('os').homedir();

// HTML plugins
let htmlmin = require('gulp-htmlmin');

// CSS / SASS plugins
let sass = require('gulp-sass');
let autoprefixer = require('gulp-autoprefixer');
let minifycss = require('gulp-clean-css');

// JSS / plugins
let uglify = require('gulp-uglify');

// Utility plugins
let concat = require('gulp-concat');
let del = require('del');
let plumber = require('gulp-plumber');
let sourcemaps = require('gulp-sourcemaps');
let rename = require('gulp-rename');
let fileinclude = require('gulp-file-include');

// Browser plugins
let browserSync = require('browser-sync').create();

// Images plugins
let imagemin = require('gulp-imagemin');
let embedSvg = require('gulp-embed-svg');

// --------------------------------------------
// Project Variables
// --------------------------------------------

let styleSrc = 'source/styles/**/*.scss';
let styleDest = 'build/styles/';

let imageSrc = 'source/imgs/';
let imageDest = 'build/imgs/';

let vendorSrc = 'source/scripts/vendors/';
let vendorDest = 'build/scripts/';
let scriptSrc = 'source/scripts/*.js';
let scriptDest = 'build/scripts/';

let htmlSrc = 'source/';
let htmlDest = 'build/';

// --------------------------------------------
// Tasks
// --------------------------------------------

// HTML
function html(done) {
    src('source/*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: 'source/'
        }))
        .pipe(embedSvg({ root: './source/images/', selectors: '.inline-svg' }))
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: {compress: {drop_console: true}},
            processConditionalComments: true,
            removeComments: true,
            removeEmptyAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            processScripts: ['application/ld+json'],
        }))
        .pipe(dest('build/'));
    done();
};

// CSS
function css(done) {
    src('source/styles/*.scss')
        .pipe(plumber())
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(rename({
            basename: 'main',
            suffix: '.min'
        }))

        .pipe(dest('build/styles'));
    done();
};

// JS
function js(done) {
    src([
        'source/scripts/*.js',
        'source/scripts/vendors/*.js'
    ])
    .pipe(rename({
            basename: 'main',
            suffix: '.min'
    }))
    .pipe(plumber())
    .pipe(uglify())
    .pipe(dest('build/scripts'));
    done();
};

// IMAGES
function img(done) {
    src('source/images/*')
        .pipe(imagemin())
        .pipe(dest('build/images'));
    done();
};

// FONTS
function fonts(done) {
    src('source/fonts/*')
        .pipe(dest('build/fonts'));
    done();
};

// --------------------------------------------
// Watch for changes
// --------------------------------------------

function watcher() {

    // Serve files from the root of this project
    browserSync.init({
        proxy: 'https://' + domain,
      host: domain,
      open: 'external',
      https: {
        key: homedir + '/.config/valet/Certificates/' + domain + '.key',
        cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
      },
        notify: false
    });

    watch(htmlSrc, series(html));
    watch(styleSrc, series(css));
    watch(scriptSrc, series(js)); 
    watch(imageSrc, series(img));
    watch(imageSrc, series(fonts));
    watch(['build/*.html', 'build/includes/*.html', 'build/styles/*.css', 'build/scripts/*.js', 'build/images/', 'build/fonts/']).on('change', browserSync.reload);

};


// use default task to launch Browsersync and watch JS files
var build = parallel(html, css, js, img, fonts, watcher);
task('default', build);

Часть 2

Поскольку мы делаем больше, чем просто сеть, наша файловая структура настроена следующим образом:

~ Документы> КЛИЕНТЫ> КОМПАНИЯ> [ПРОЕКТЫ]> ИМЯ ПРОЕКТА, т.е. ВЕБ-САЙТ> 5-ВЕБ-САЙТ

Тогда у нас есть как файлы сборки, так и исходные файлы.

В идеале мы я действительно хотел, чтобы папка со всеми нашими клиентскими сборками находилась в одной папке, но мне очень трудно понять, как это сделать.

т.е. наша исходная папка будет: ~ Documents> CLIENTS> COMPANY > [ПРОЕКТЫ]> ВЕБ-САЙТ> 5-ВЕБ-САЙТ> source

Наша папка builds будет выглядеть так: ~ Sites / builds / company

Таким образом, нам нужно только парковать laravel в этой одной папке и, надеюсь, это должно облегчить, когда мы начнем использовать репозиторий git.

Дело в том, что я не могу понять, как сделать глоток файл. js указать на папку сборки ~ Sites / builds

ОБНОВЛЕНИЕ

Итак, я поиграл с файлом gulpfile. js и мне удалось чтобы получить папку сборки для сохранения в моем домашнем каталоге.

Браузер обновляется при использовании: http://localhost: 3000 / , но не при использовании https://company.test.

Вот мой обновленный gulpfile: 

// --------------------------------------------
// Gulp Loader
// --------------------------------------------

const {
    src,
    dest,
    task,
    watch,
    series,
    parallel
} = require('gulp');

// --------------------------------------------
// Dependencies
// --------------------------------------------

const domain = 'company.test'; // <== edit this one
const homedir = require('os').homedir();

// HTML plugins
let htmlmin = require('gulp-htmlmin');

// CSS / SASS plugins
let sass = require('gulp-sass');
let autoprefixer = require('gulp-autoprefixer');
let minifycss = require('gulp-clean-css');

// JSS / plugins
let uglify = require('gulp-uglify');

// Utility plugins
let concat = require('gulp-concat');
let del = require('del');
let plumber = require('gulp-plumber');
let sourcemaps = require('gulp-sourcemaps');
let rename = require('gulp-rename');
let fileinclude = require('gulp-file-include');

// Browser plugins
let browserSync = require('browser-sync').create();

// Images plugins
let imagemin = require('gulp-imagemin');
let embedSvg = require('gulp-embed-svg');

// --------------------------------------------
// Project Variables
// --------------------------------------------

let styleSrc = 'source/styles/**/*.scss';
let styleDest = homedir +'/build/efectiv/styles/';

let imageSrc = 'source/imgs/';
let imageDest = homedir +'/build/efectiv/imgs/';

let vendorSrc = 'source/scripts/vendors/';
let vendorDest = homedir +'/build/efectiv/scripts/';
let scriptSrc = 'source/scripts/*.js';
let scriptDest = homedir +'/build/efectiv/scripts/';

let htmlSrc = 'source/';
let htmlDest = homedir +'/build/efectiv/';

// --------------------------------------------
// Tasks
// --------------------------------------------

// HTML
function html(done) {
    src('source/*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: 'source/'
        }))
        .pipe(embedSvg({ root: './source/images/', selectors: '.inline-svg' }))
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: {compress: {drop_console: true}},
            processConditionalComments: true,
            removeComments: true,
            removeEmptyAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            processScripts: ['application/ld+json'],
        }))
        .pipe(dest(homedir +'/build/efectiv/'));
    done();
};

// CSS
function css(done) {
    src('source/styles/*.scss')
        .pipe(plumber())
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(rename({
            basename: 'main',
            suffix: '.min'
        }))

        .pipe(dest(homedir +'/build/efectiv/styles'));
    done();
};

// JS
function js(done) {
    src([
        'source/scripts/*.js',
        'source/scripts/vendors/*.js'
    ])
    .pipe(rename({
            basename: 'main',
            suffix: '.min'
    }))
    .pipe(plumber())
    .pipe(uglify())
    .pipe(dest(homedir +'/build/efectiv/scripts'));
    done();
};

// IMAGES
function img(done) {
    src('source/images/*')
        .pipe(imagemin())
        .pipe(dest(homedir +'/build/efectiv/images'));
    done();
};

// FONTS
function fonts(done) {
    src('source/fonts/*')
        .pipe(dest(homedir +'/build/efectiv/fonts'));
    done();
};

// --------------------------------------------
// Watch for changes
// --------------------------------------------

function watcher() {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: homedir +'/build/efectiv'
        },
        notify: false
    });

    watch(htmlSrc, series(html));
    watch(styleSrc, series(css));
    watch(scriptSrc, series(js)); 
    watch(imageSrc, series(img));
    watch(imageSrc, series(fonts));
    watch([homedir + '/build/efectiv/*.html', homedir + '/build/efectiv/includes/*.html', homedir + '/build/efectiv/styles/*.css', homedir + '/build/efectiv/scripts/*.js', homedir + '/build/efectiv/images/', homedir + '/build/efectiv/fonts/']).on('change', browserSync.reload);

};


// use default task to launch Browsersync and watch JS files
var build = parallel(html, css, js, img, fonts, watcher);
task('default', build);

Я знаю, что это до этого раздела: 

function watcher() {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: homedir +'/build/efectiv'
        },
        notify: false
    });

    watch(htmlSrc, series(html));
    watch(styleSrc, series(css));
    watch(scriptSrc, series(js)); 
    watch(imageSrc, series(img));
    watch(imageSrc, series(fonts));
    watch([homedir + '/build/efectiv/*.html', homedir + '/build/efectiv/includes/*.html', homedir + '/build/efectiv/styles/*.css', homedir + '/build/efectiv/scripts/*.js', homedir + '/build/efectiv/images/', homedir + '/build/efectiv/fonts/']).on('change', browserSync.reload);

};
...