Hướng dẫn sử dụng Laravel Elixir Laravel Mix. Laravel đã rất tinh ý trong việc chú trọng đến sử lý các tập tin stylesheets hay javascript Frontend. Như chúng ta đã biết thì từ khi Laravel ra phiên bản 5.0 đến 5.3 Laravel cung cấp cho chúng ta một package kèm theo mỗi project có tên là Laravel Elixir.
Nhưng khi đến các phiên bản về sau Laravel Elixir đã không còn và thay đổi bằng Laravel Mix. Vậy có đều gì khác biệt giữa 2 package này?. Hãy cùng Codevivu.com tìm hiểu cũng như cách sử dụng như thế nào nhé.
1. Laravel Elixir, Laravel Mix là gì ?
Laravel Elixir hay Laravel Mix là một gói package javascript chức năng cơ bản chỉ là một trình biên dịch. Nó biên dịch đều gì ?.
Cả 2 có chức năng biên dịch các tập tin stylesheets hay javascript ở các định dạng khác nhau như: Sass, Less, Stylus, babel, coffee, Coppy files hay directories, Compress hay Combine giữa các file lại với nhau.
2. Sự khác biệt giữa Laravel Elixir và Laravel Mix ?
Khi nói đến sự giống nhau ở trên chắc chắn cả 2 sẽ có sự khác biệt đôi chúc. Và sự khác biệt này sẽ không ảnh hưởng quá nhiều. Về cơ bản sự khác biệt này nằm ở chổ.
– Laravel Elixir: Sẽ thực thi trong qua Gulp trên nền Nodejs và các kết nói cũng như config file thực thi sẽ được dùng tại gulpfile.js files này đều có tại mỗi project sau khi chúng ta cài đặt và cùng cấp với root.
– Laravel Mix: Không giống như Laravel Elixir, Gulp sẽ không còn sự có mặt trong vấn đề này. Nó sẽ được nạp thẳng vào Nodejs và chạy thông qua npm (Node Package Management).
Việc config file đầu vào cũng sẽ thay đổi đôi chúc webpack.mix.js sẽ đảm nhận vai trò đó và nó cũng sẽ là file mặt định cùng cắp root khi chúng ta cài đặt project.
3. Hướng dẫn sữ dụng Laravel Elixir, Laravel Mix
Vì Laravel Elixir hay Laravel Mix chạy trên nên Nodejs nên đầu tiên chúng ta sẽ cài đặt Nodejs. Để cài Nodejs chúng vào trang chủ : https://nodejs.org . Các bạn download đúng với phiên bản hệ đều hành mình đang dùng là được.
Sau khi cài đặt xong Nodejs để kiểm tra xem Nodejs có thực sự chạy tốt trên hệ đều hành của chúng ta hay không chúng ta sẽ kiễm tra như sau:
node -v
// v8.2.1
Sau khi mọi thứ chạy tốt trên máy của chúng ta. Tiếp theo chúng ta sẽ tiếp tục cài đặt Node Module. làm thế nào cài đặt được Node Module ? Các bạn hãy để ý trong project Laravel của chúng ta sẽ có một file tên là package.json cùng cắp với root.
//package.json Laravel 5.1
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"laravel-elixir": "^4.0.0",
"bootstrap-sass": "^3.0.0",
"laravel-elixir-browserify-official": "^0.1.3"
}
}
//package.json Laravel 5.4
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
}
}
File này chứa các thông tin về các gói pacakge javascript cần thiết và trong đó có Laravel Elixir hay Laravel Mix tùy vào phiên bản Laravel bạn đang sử dụng. Duy chuyển đến thư mục project và chạy command sau:
npm install
4. Config Laravel Elixir, Laravel Mix
Sau khi cài xong mọi thứ. chúng ta bắt đầu cài đặt task cho Laravel Elixir hay Laravel Mix củ thề như sau:
– Laravel Elixir: Mọi task thực thi sẽ được config tại gulpfile.js như mình có nói ở trên và mặt định Laravel cung cắp cho chúng ta một file mặt định là gulpfile.js:
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
Như các bạn đã thấy tại file này Laravel đã viết sẳn cho chúng ta một task là biên dịch file Sass. Cú pháp khá đơn giản phải không nào và chúng ta cũng sẽ có những cú pháp tương tự như với stylesheets javascript:
// Thao tác với Less
elixir(function(mix) {
mix.less('app.less');
});
// Thao tác với stylesheets combine stylesheets
elixir(function(mix) {
mix.styles([
'normalize.css',
'main.css'
]);
});
Trường hợp chúng ta có nhiều file stylesheets như Sass, Less chúng ta cũng có thể biên dịch cùng lúc nhiều files bằng cách truyền vào một mảng các phẩn tử là file cần biên dịch như sau:
// Thao tác với nhiều files
elixir(function(mix) {
mix.less([
file_1.less,
file_2.less,
...
])
});
Trường hợp thao tác với script thì như thế nào. cú pháp cũng tương tự như trên:
// Thao tác với javascript coffee script
elixir(function(mix) {
mix.coffee(['app.coffee', 'controllers.coffee']);
});
// Thao tác với javascript babel script
elixir(function(mix) {
mix.babel(['order.js', 'product.js']);
});
// Thao tác với javascript combine script
elixir(function(mix) {
mix.scripts([
'jquery.js',
'app.js'
]);
});
Trường hợp chúng ta muốn thay đổi đường dẫn hay tên file ouput mặt định của laravel Elixir thành một đường dẫn khác. Mặt định Laravel Elixir sẽ có ouput public/css nếu chúng ta thao tác với stylesheets và public/js nếu chúng ta thao tác với scripts. Cú pháp thay đổi như sau:
// Thao tác với stylesheets
elixir(function(mix) {
mix.<stylesheets-type>('file-stylesheets', 'your-path')
});
// Thao tác với stylesheets
elixir(function(mix) {
mix.<script-type>('file-script', 'your-path')
});
Trường hợp copy files hay thư mục chúng ta có cú pháp như sau:
elixir(function(mix) {
mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});
elixir(function(mix) {
mix.copy('vendor/package/views', 'resources/views');
});
– Laravel Mix: Cũng giống như Laravel Elixir ở phiên bản Laravel 5.4 sẽ thay thế bởi Laravel Mix cơ bản config sẽ không thay đổi nhiều về cú pháp chúng ta sẽ config task tại file webpack.mix.js. Đây là file mặt định sau khi cài đặt xong Laravel project 5.4
// webpack.mix.js
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
5.Run task Laravel Elixir Laravel Mix
Việc sử dụng khá đơn giản với Laravel Elixir và Laravel Mix.
– Đối với Laravel Elixir ở môi trường local chúng ta sẽ chạy bằng cách gõ gulp trong command line. Đối với môi trường product chúng ta chạy lện : gulp –production
– Đối với Laravel Mix ở môi trường local chúng ta sẽ chạy bằng cách gõ npm run dev trong command line. Đối với môi trường product chúng ta chạy lện : npm run production
– Một lổi xẩy ra với phiên bản Laravel Mix khi chạy npm run moi-truong là cross-env không được tìm thấy. trường hợp này chúng ta sẽ giải quyết như sau. Các bạn hãy mở file package.json bằng editor các bạn tìm cross-env và thay thế bằng node_modules/cross-env/dist/bin/cross-env.js.
Ở phiên bản Laravel Mix sẽ có khá nhiều thay đổi về method biên dịch. Nó sẽ vẫn giữ các method củ như là: less, sass, styles,… Nhưng với các script như babel, coffee script sẽ được biên dịch bởi method mix.scripts().
Về cú pháp sẽ khá gióng như Laravel Elixir mình sẽ không nói nhiều về nó vì sẽ làm bài viết lặp đi lặp lại. Hy vọng bài viết này sẽ giúp các bạn hiểu rõ hơn về Laravel Elixir hay Laravel Mix. Mọi gớp ý hay thắc mắt các bạn có thể comment bên dưới để chúng ta cùng tiện trao đổi nhé !.
