Ketahui cara menggunakan rangka kerja Gulp dengan Laravel Elixir

Laravel Elixir ialah set alat automasi bahagian hadapan yang popular berdasarkan Gulp, yang memudahkan banyak tugasan yang memerlukan kerja manual sebelum ini. Tetapi reka bentuk API Laravel Elixir yang elegan tidak bermakna pembangun tidak perlu memahami penggunaan Gulp sama sekali. Sebaliknya, memahami penggunaan Gulp dapat lebih memahami prinsip kerja Laravel Elixir dan meningkatkan kecekapan pembangunan.

Artikel ini akan memperkenalkan cara menggunakan Gulp dalam rangka kerja Laravel Elixir untuk membantu pembangun menguasai penggunaan Laravel Elixir dengan lebih baik.

1. Pasang Gulp

Untuk menggunakan Gulp, anda perlu terlebih dahulu memasang kebergantungan Gulp dalam direktori akar projek. Buka terminal dan jalankan arahan berikut:

npm install --global gulp
npm install --save-dev gulp

2. Cipta fail Gulpfile.js

Laravel Elixir menggunakan fail bernama Gulpfile.js untuk mengurus tugas. Pemalam yang digunakan oleh Gulp boleh ditambahkan pada fail Gulpfile.js.

Buka terminal dan pergi ke direktori akar projek. Cipta fail Gulpfile.js menggunakan arahan berikut:

touch Gulpfile.js

3. Tambah tugas dalam Gulpfile.js

Contoh berikut menunjukkan cara mentakrifkan tugas dalam fail Gulpfile.js untuk memampatkan fail CSS:

rreee

Menggunakan kod di atas, Semua fail .css akan ditemui dalam folder awam/css dan dimampatkan ke dalam fail .min.css dalam folder awam/build/css.

4. Menjalankan Tugas

Tugas dijalankan dalam pelari tugas Laravel Elixir. Masukkan arahan berikut dalam terminal untuk menjalankan tugas yang ditentukan:

var elixir = require('laravel-elixir');
var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');

elixir(function(mix) {
    mix.task('minifyCss', function(){
        gulp.src('public/css/*.css')
            .pipe(minifyCss())
            .pipe(gulp.dest('public/build/css'));
    });
});

Sebagai contoh, untuk menjalankan tugas dalam contoh sebelumnya, anda boleh menggunakan arahan berikut:

gulp [taskName]

Apabila menggunakan rangka kerja Laravel Elixir, anda boleh menjalankan tugas terus dengan arahan berikut:

gulp minifyCss

Arahan di atas akan menjalankan tugas lalai. Untuk menentukan tugas tertentu, anda perlu menggunakan arahan berikut:

gulp

Di mana, pilihan --production akan mendayakan mod pengeluaran untuk membina kod semasa dikeluarkan.

Kesimpulan

Melalui langkah di atas, kami belajar cara menggunakan Gulp dalam rangka kerja Laravel Elixir. Walaupun Laravel Elixir memudahkan penggunaan Gulp, memahami cara menggunakan Gulp dapat menguasai penggunaan Laravel Elixir dengan lebih baik dan mencapai automasi bahagian hadapan yang lebih cekap.

Atas ialah kandungan terperinci Ketahui cara menggunakan rangka kerja Gulp dengan Laravel Elixir. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!