>  기사  >  PHP 프레임워크  >  라라벨 엘릭서란 무엇인가요?

라라벨 엘릭서란 무엇인가요?

青灯夜游
青灯夜游원래의
2022-02-14 14:57:322200검색

Laravel Elixir는 Gulp를 통합하고 Laravel 프로젝트에서 Less, Sass, CoffeeScript를 컴파일하고 기타 일상적인 작업을 처리하기 위한 간단한 솔루션을 제공하는 API입니다. 이를 통해 위의 지루한 작업을 작성하는 시간을 줄이고 프로그래밍 효율성을 효과적으로 향상시킵니다.

라라벨 엘릭서란 무엇인가요?

이 튜토리얼의 운영 환경: Windows 7 시스템, Laravel 버전 8.5, Dell G3 컴퓨터.

Laravel의 목적은 PHP 개발을 쉽고 즐겁게 만드는 것입니다. 따라서 Laravel 5부터는 LaravelElixir라는 새로운 API가 제공됩니다. 이 API는 Gulp를 통합하여 Laravel 프로젝트에서 Less, Sass, CoffeeScript를 컴파일하고 기타 많은 일상 작업을 처리하기 위한 간단한 솔루션을 제공함으로써 위의 지루한 작업을 작성하는 시간을 줄이고 프로그래밍 효율성을 효과적으로 향상시킵니다.

Laravel Elixir는 Laravel 애플리케이션에서 기본 Gulp 작업을 정의할 수 있는 간단하고 부드러운 API를 제공합니다. Elixir는 많은 일반적인 CSS 및 JavaScript 전처리기를 지원하며 테스트 도구도 포함하고 있습니다. 연쇄 호출을 사용하면 Elixir를 사용하여 개발 프로세스를 원활하게 정의할 수 있습니다. 예:

elixir(function(mix) {
    mix.sass('app.scss')
       .coffee('app.coffee');
});

Gulp를 시작하고 리소스 파일을 컴파일하는 것에 대해 혼란스러워했다면 Laravel Elixir와 사랑에 빠지게 될 것입니다. 하지만 Laravel Elixir를 사용하면 선호하는 자동화 개발 프로세스 도구를 자유롭게 사용할 수 있습니다.

설치 및 구성

Install Node

Elixir를 사용하기 전에 먼저 Node.js가 컴퓨터에 설치되어 있는지 확인해야 합니다.

node -v

기본적으로 Laravel Homestead에는 필요한 모든 것이 포함되어 있습니다. 그러나 Vagrant를 사용하지 않는 경우에는 Node의 다운로드 페이지(http://nodejs.org/download/)를 탐색하여 설치할 수 있습니다. [관련 권장 사항: laravel 비디오 튜토리얼]

Gulp

다음으로 Gulp(http://gulpjs.com)의 NPM 확장 패키지를 전역적으로 설치해야 합니다.

npm install --global gulp

Laravel Elixir

마지막 단계는 Elixir 설치입니다! 새로 설치된 모든 Laravel 코드의 루트 디렉터리에는 package.json이라는 파일이 있습니다. PHP 대신 Node의 종속성 확장 패키지를 정의한다는 점을 제외하면 composer.json 파일과 비슷하다고 생각하세요. 다음 명령을 사용하여 종속 확장 패키지를 설치할 수 있습니다. package.json 的文件。想像它就如同你的 composer.json 文件,只不过它定义的是 Node 的依赖扩展包,而不是 PHP 的。你可以使用以下的命令安装依赖扩展包:

npm install

如果你是在 Windows 系统上或在 Windows 主机系统上运行 VM 进行开发,你需要在运行 npm install 命令时将 --no-bin-links 开启:

npm install --no-bin-links

运行 Elixir

Elixir 是创建于 Gulp 之上,所以要运行你的 Elixir 任务,只需要在命令行运行 gulp 命令。在命令增加 --production 标示会告知 Elixir 压缩你的 CSS 及 JavaScript 文件:

// 运行所有任务...
gulp

// 运行所有任务并压缩所有 CSS 及 JavaScript...
gulp --production

监控资源文件修改

因为每次修改你的资源文件之后在命令行运行 gulp 命令会相当不便,因此你可以使用 gulp watch 命令。此命令会在你的命令行运行并监控资源文件的任何修改。当发生修改时,新文件将会自动被编译:

gulp watch

使用样式

项目根目录的 gulpfile.js 包含你所有的 Elixir 任务。Elixir 任务可以被链式调用起来,以定义你的资源文件该如何进行编译。

Less

要将 Less 编译为 CSS,你可以使用 less 方法。less 方法会假设你的 Less 文件被保存在 resources/assets/less 文件夹中。默认情况下,此例子的任务会将编译后的 CSS 放置于 public/css/app.css

elixir(function(mix) {
    mix.less('app.less');
});

你可能会想合并多个 Less 文件至单个 CSS 文件。同样的,生成的 CSS 会被放置于 public/css/app.css

elixir(function(mix) {
    mix.less([
        'app.less',
        'controllers.less'
    ]);
});

如果你想自定义编译后的 CSS 输出位置,可以传递第二个参数至 less

elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets');
});

// 指定输出的文件名称...
elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets/style.css');
});
Windows 시스템에서 개발하거나 Windows 호스트 시스템에서 VM을 실행하는 경우 npm install 명령을 실행해야 합니다. . --no-bin-links 활성화: 🎜🎜
elixir(function(mix) {
    mix.sass('app.scss');
});
🎜

🎜 Elixir 실행🎜

最新的五个Laravel视频教程

위 내용은 라라벨 엘릭서란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.