×ðÁú¿­Ê±¹ÙÍøµÇ¼

Laravel¿ª·¢£ºÔõÑùʹÓÃLaravel MixÓÅ»¯Ç°¶Ë×ÊÔ´ £¿

laravelÊÇÒ»¸öÊ¢ÐеÄphp web¿ò¼Ü £¬ËüÌṩÁËÐí¶àÇ¿Ê¢µÄ¹¦Ð§ £¬°üÀ¨»ùÓÚcomposerµÄÒÀÀµÖÎÀí¡¢artisanÏÂÁîÐй¤¾ß¡¢eloquent ormµÈµÈ¡£¿ÉÊÇ £¬ÔÚ¿ª·¢webÓ¦ÓÃʱ £¬Ç°¶Ë×ÊÔ´µÄÖÎÀíÒ²ÊÇÒ»¸öÖ÷ÒªµÄÎÊÌâ¡£laravel mix¾ÍÊÇÒ»ÖÖÀû±ãÒ×ÓõŤ¾ß £¬Ëü¿ÉÒÔ×ÊÖúÎÒÃÇÓÅ»¯Ç°¶Ë×ÊÔ´µÄ¿ª·¢ºÍ¹¹½¨¡£±¾ÎĽ«ÏÈÈÝÔõÑùʹÓÃlaravel mixÀ´ÖÎÀíÇ°¶Ë×ÊÔ´¡£

×°ÖúÍÉèÖÃLaravel Mix

Laravel MixÊÇÒ»¸ö»ùÓÚWebpackµÄ¹¤¾ß £¬Òò´ËÊ×ÏÈÐèÒªÔÚLaravelÏîÄ¿ÖÐ×°ÖÃWebpack¡ £¿ÉÒÔʹÓÃNPM»òYarnÀ´×°ÖÃWebpack¡£ÔÚʹÓÃÏÂÁîÐй¤¾ß½øÈëÏîÄ¿µÄ¸ùĿ¼ºó £¬Ö´ÐÐÏÂÃæµÄÏÂÁî¼´¿É×°ÖÃWebpack£º

npm install webpack –save-dev

×°ÖÃÍê³Éºó £¬½ÓÏÂÀ´ÐèҪװÖÃLaravel Mix¡£Í¬ÑùʹÓÃÏÂÁîÐй¤¾ß½øÈëÏîÄ¿¸ùĿ¼ºó £¬Ö´ÐÐÒÔÏÂÏÂÁ

npm install laravel-mix –save-dev

×°ÖÃÍê³Éºó £¬¾Í¿ÉÒÔÔÚÏîÄ¿µÄ¸ùĿ¼Ï¿´µ½Ò»¸öн¨µÄÎļþwebpack.mix.js¡£ÔÚÕâ¸öÎļþÖÐ £¬¿ÉÒÔÉèÖÃÔõÑùÓÅ»¯Ç°¶Ë×ÊÔ´¡£

Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»

´¦ÀíCSSºÍJSÎļþ

ÔÚwebpack.mix.jsÎļþÖÐ £¬¿ÉÒÔʹÓÃmix()ÒªÁìÀ´´¦ÀíCSSºÍJSÎļþ¡£ÀýÈç £¬¿ÉÒÔ½«ËùÓÐCSSºÍJSÎļþºÏ²¢ £¬²¢ÌìÉúÒ»¸öͳһµÄCSSÎļþºÍÒ»¸öͳһµÄJSÎļþ£º

mix.styles([

'resources/css/app.css',
'resources/css/custom.css'

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

], ‘public/css/all.css’)

.scripts([

'resources/js/app.js',
'resources/js/custom.js'

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

], ‘public/js/all.js’);

ÉÏÊöÀý×ÓÖÐ £¬Ê¹ÓÃstyles()ÒªÁ콫app.cssºÍcustom.cssÁ½¸öCSSÎļþºÏ²¢ÎªÒ»¸öÃûΪall.cssµÄÎļþ £¬²¢½«Æä´æ´¢ÔÚpublic/cssĿ¼Ï¡£Í¬ÑùµØ £¬Ê¹ÓÃscripts()ÒªÁ콫Á½¸öJSÎļþºÏ²¢ÎªÒ»¸öÃûΪall.jsµÄÎļþ £¬²¢½«Æä´æ´¢ÔÚpublic/jsĿ¼Ï¡ £¿ÉÒÔͨ¹ýÔÚÄ£°åÖÐÒýÈëÕâÁ½¸öÎļþÀ´Ê¹ÓÃËüÃÇ£º

±àÒëSassºÍLessÎļþ

Laravel Mix»¹¿ÉÒÔ±àÒëSassºÍLessÎļþ¡£ÀýÈç £¬¿ÉÒÔͨ¹ýÒÔÏÂÏÂÁSassÎļþ±àÒë³ÉCSSÎļþ£º

mix.sass(‘resources/sass/app.scss’, ‘public/css’);

Õ⽫±àÒëapp.scssÎļþ²¢½«Æä´æ´¢ÔÚpublic/cssĿ¼Ï¡£Í¬ÑùµØ £¬»¹¿ÉÒÔʹÓÃless()ÒªÁì±àÒëLessÎļþ¡£

´¦ÀíͼƬºÍ×ÖÌåÎļþ

Laravel Mix»¹¿ÉÒÔ´¦ÀíͼƬºÍ×ÖÌåÎļþ¡£ÀýÈç £¬¿ÉÒÔʹÓÃcopy()ÒªÁ콫ËùÓÐimagesĿ¼ÏµÄͼƬ¸´ÖƵ½publicĿ¼Ï£º

mix.copy(‘resources/images’, ‘public/images’);

ͬÑùµØ £¬Ê¹ÓÃcopy()ÒªÁ컹¿ÉÒÔ¸´ÖÆ×ÖÌåÎļþµ½publicĿ¼Ï¡£

¼àÌýÎļþת±ä

ÔÚ¿ª·¢WebÓ¦ÓÃʱ £¬¾­³£ÐèÒªÐÞ¸ÄÇ°¶Ë´úÂë¡£Laravel Mix¿ÉÒÔÔÚÎļþÐ޸ĺóʵʱÖØбàÒëºÍ´ò°üËùÓÐÎļþ¡£ÀýÈç £¬¿ÉÒÔʹÓÃÒÔÏÂÏÂÁî¶ÔËùÓÐÎļþ¾ÙÐмàÊÓ£º

mix.styles([

'resources/css/app.css',
'resources/css/custom.css'

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

], ‘public/css/all.css’)

.scripts([

'resources/js/app.js',
'resources/js/custom.js'

µÇ¼ºó¸´ÖÆ µÇ¼ºó¸´ÖÆ

], ‘public/js/all.js’)

.version()

.sourceMaps()

.browserSync(‘http://example.dev’);

ÆäÖÐ £¬version()ÒªÁì¿ÉÒÔÔÚÎļþÃûºóÌí¼ÓhashÖµ £¬ÒÔ±ãÔÚÎļþ¸üкóÇ¿ÖÆä¯ÀÀÖØÊÓмÓÔØÎļþ¡£sourceMaps()ÒªÁì¿ÉÒÔÆôÓÃSource mapsÀ´Àû±ãµ÷ÊÔ¡£browserSync()ÒªÁì¿ÉÒÔÔÚ¶à¸ö×°±¸ÉÏͬ²½ä¯ÀÀÆ÷ £¬ÒÔÀû±ãÔÚ²î±ð×°±¸ÉϲâÊÔÓ¦ÓóÌÐò¡£

×ܽá

Laravel MixÊÇÒ»¸öÀû±ãÒ×ÓõŤ¾ß £¬¿ÉÒÔ×ÊÖúÎÒÃÇÓÅ»¯Ç°¶Ë×ÊÔ´µÄ¿ª·¢ºÍ¹¹½¨¡£ÔÚwebpack.mix.jsÎļþÖÐ £¬¿ÉÒÔÉèÖÃÈçÄÇÀïÖÃCSS¡¢JS¡¢Sass¡¢Less¡¢Í¼Æ¬ºÍ×ÖÌåÎļþ £¬»¹¿ÉÒÔÆôÓüàÌýÎļþת±äµÄ¹¦Ð§¡£Ê¹ÓÃLaravel Mix¿ÉÒÔÈÃÎÒÃÇÔ½·¢¸ßЧµØÖÎÀíÇ°¶Ë×ÊÔ´¡£

ÒÔÉϾÍÊÇLaravel¿ª·¢£ºÔõÑùʹÓÃLaravel MixÓÅ»¯Ç°¶Ë×ÊÔ´ £¿µÄÏêϸÄÚÈÝ £¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí £¬°æȨÕùÒéÓë±¾Õ¾ÎÞ¹Ø £¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±¹ÙÍøµÇ¼ÂËÓÍ»úÍø¹Ù·½Ì¬¶È £¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ £¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢ £¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢ £¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼ʵʱÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎå £¬9:30-18:30 £¬½ÚãåÈÕÐÝÏ¢

QR code
ÍøÕ¾µØͼ