Pembangunan Laravel: Bagaimana untuk menulis CSS dan JavaScript menggunakan Laravel Mix?

Pembangunan Laravel: Bagaimana untuk menulis CSS dan JavaScript menggunakan Laravel Mix?

Laravel Mix ialah alat binaan terbina dalam rangka kerja Laravel Ia boleh digunakan untuk menulis dan membungkus sumber bahagian hadapan seperti CSS, JavaScript dan imej, serta mengoptimumkan pemuatan automatik dan fungsi kompilasi. , membolehkan pembangun mengurus dan Membina sumber hadapan dengan lebih mudah.

Dalam artikel ini, kita akan mempelajari langkah demi langkah cara menulis CSS dan JavaScript menggunakan Laravel Mix.

Pasang Laravel Mix

Sebelum anda mula menggunakan Laravel Mix untuk menulis CSS dan JavaScript, anda perlu memasang Laravel Mix dalam projek Laravel anda terlebih dahulu. Anda boleh menggunakan arahan berikut:

npm install
npm install laravel-mix --save-dev

Ini akan memasang Laravel Mix dan kebergantungannya.

Menulis CSS

Laravel Mix menyediakan banyak cara mudah untuk menulis CSS. Anda boleh menggunakan pengkompil CSS, seperti Sass atau Less, untuk menjadikan CSS anda lebih mudah dibaca. Selain itu, Laravel Mix menyediakan beberapa kaedah berguna seperti menambahkan awalan CSS secara automatik dan memampatkan serta mengoptimumkan CSS.

Berikut ialah contoh kod untuk menulis CSS menggunakan Laravel Mix:

// 导入Laravel Mix
const mix = require('laravel-mix');
// 编译并打包CSS
mix.sass('resources/sass/app.scss', 'public/css')
// 自动添加CSS前缀
.options({
    postCss: [
        require('autoprefixer')({
            browsers: ['last 3 versions', 'iOS >= 8', 'Safari >= 8']
        })
    ]
})
// 压缩和优化CSS
.minify('public/css/app.css');

Dalam kod di atas, kami telah menggunakan Sass untuk menulis CSS, menyusunnya ke dalam CSS, dan kemudian membungkusnya kepada umum / direktori css. Kami juga menggunakan awalan CSS yang ditambah secara automatik untuk memastikan penampilan yang konsisten merentas penyemak imbas, dan memampatkan serta mengoptimumkan CSS untuk meningkatkan kelajuan pemuatan halaman.

Menulis JavaScript

Laravel Mix juga menyediakan banyak cara mudah untuk menulis JavaScript. Anda boleh menggunakan Babel untuk mentranspile ES6 atau JavaScript yang lebih tinggi untuk memastikan kod anda berjalan dalam pelbagai penyemak imbas. Selain itu, Laravel Mix menyediakan beberapa kaedah berguna seperti memampatkan dan mengoptimumkan JavaScript.

Berikut ialah contoh kod untuk menulis JavaScript menggunakan Laravel Mix:

// 导入Laravel Mix
const mix = require('laravel-mix');
// 编译并打包JavaScript
mix.js('resources/js/app.js', 'public/js')
// 转换ES6或更高版本的JavaScript
.babel('public/js/app.js', 'public/js')
// 压缩和优化JavaScript
.minify('public/js/app.js');

Dalam kod di atas, kami telah menggunakan Babel untuk menukar JavaScript ES6 atau lebih tinggi dan membungkus JavaScript yang disusun Pergi ke umum/ direktori js. Kami juga telah memampatkan dan mengoptimumkan JavaScript untuk meningkatkan kelajuan pemuatan halaman.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Laravel Mix untuk menulis CSS dan JavaScript. Kami belajar cara menulis CSS menggunakan Sass, cara menukar JavaScript menggunakan Babel, dan cara membuat awalan, memampatkan dan mengoptimumkan CSS dan JavaScript secara automatik. Laravel Mix ialah alat yang sangat berkuasa yang membantu kami mengurus dan membina sumber bahagian hadapan dengan lebih mudah. Jika anda sedang membangun dengan Laravel, maka amat disyorkan anda menggunakan Laravel Mix untuk mengurus dan menyusun sumber bahagian hadapan.

Atas ialah kandungan terperinci Pembangunan Laravel: Bagaimana untuk menulis CSS dan JavaScript menggunakan Laravel Mix?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!