В настоящее время мы все любим наши инструменты сборки, Gulp, Grunt и т. Д. Но на самом деле никто не любит писать / копировать и вставлять 50 строк конфигурации для каждого проекта, верно?
Несмотря на свое название, Laravel Elixir - это инструмент, который позволяет вам довольно быстро начать работу над своим проектом, всего лишь написав пару строк кода.
Позвольте мне показать вам пример.
Требования
Для начала вам понадобится пара зависимостей на вашем компьютере:
- "Узел"
- Нпм
- "Глоток"
Что мы будем делать
Чтобы начать работу с Laravel Elixir, нам нужен пример. Легче всего было бы настроить проект с простым index.html, вашими типичными файлами SaSS и новым приложением VueJS и Browserify. Давай сделаем это!
Настроить проект
Создать проект
Создайте папку для своего проекта и запустите:
npm init
Следуйте инструкциям, и ваш новый проект npm должен быть готов в кратчайшие сроки.
Установить зависимости
Для этого проекта нам понадобится несколько зависимостей:
npm install --save-dev gulp laravel-elixir vue
Подготовить структуру каталогов
В этом проекте мы начнем с очень простой структуры каталогов:
- /my-project
- public/
- resources/
- js/
- app.js
- sass/
- app.scss
- index.html
- gulpfile.js
- package.json
Папка общедоступная будет содержать наши сгенерированные активы после сборки.
Ресурсы будут содержать наши исходные файлы SaSS и JavaScript.
index.html - это наша домашняя страница.
Пример "Hello World"
Домашняя страница
Для нашего файла index.html ничего особенного. Создайте простой файл с тегом h1, который будет использовать такой динамический заголовок:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World Example</title>
</head>
<body>
<h1>{{ title }}</h1>
</body>
</html>
Мы вернемся к этому позже.
Ресурсы SaSS
Для нашей стилизации тоже ничего особенного. Создайте app.scss в каталоге resources / sass / со следующим содержанием:
h1 {
font-size: 2.4em;
font-family: Helvetica, Arial, sans-serif;
}
JavaScript
Для нашего приложения мы собираемся создать базовый экземпляр VueJS в файле app.js в каталоге resources / js /, который будет содержать наш заголовок («Hello world ”) И прикрепите его к основной части нашей HTML-страницы:
import Vue from 'vue';
new Vue({
el: 'body',
data: {
title: 'Hello world'
}
});
Скомпилировать в общедоступные активы
Создайте свой gulpfile.js в корне вашего проекта:
var elixir = require('laravel-elixir');
elixir.config.assetsPath = 'resources/';
elixir( function(mix) {
mix.sass('app.scss');
mix.browserify('app.js');
});
Это все, что вам нужно, чтобы скомпилировать SaSS с автопрефиксом и связать свой javascript с помощью browserify и babel. Удивительно, не правда ли?
Первая строка довольно знакома, просто объявляется переменная и импортируется эликсир laravel.
Второй - обновить путь к ресурсам по умолчанию на resources /, поскольку Laravel Elixir по умолчанию использует resources / assets /.
Затем мы используем функцию elixir, передающую анонимную функцию, которая получает параметр «mix».
Затем мы вызовем метод «sass» с именем нашего основного файла SaSS в качестве аргумента и метод «browserify» с именем нашего основного файла JavaScript в качестве параметра.
Все сделано!
Вы также можете связать эти методы, например:
elixir( function(mix) {
mix.sass('app.scss').browserify('app.js');
});
Используйте наши активы на нашей домашней странице
Все созданные ресурсы по умолчанию будут помещены в каталог public / в корне вашего проекта. Вы также можете изменить этот путь, если хотите.
Вот сгенерированные активы для этого примера:
- my-project/
- public/
- css/
- app.css
- app.css.map
- js/
- app.js
- app.js.map
Теперь вам просто нужно импортировать эти файлы в файл index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World Example</title>
<link rel="stylesheet" href="public/css/app.css">
</head>
<body>
<h1>{{ title }}</h1>
<script src="public/js/app.js"></script>
</body>
</html>
И вам хорошо!
