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

Laravel¿ª·¢£ºÔõÑùʹÓÃLaravel Mix´¦ÀíCSSºÍJavaScript£¿

laravel mixÊÇlaravel webÓ¦ÓóÌÐò¿ª·¢¿ò¼ÜµÄÒ»²¿·Ö£¬ËüÌṩÁ˼ò»¯cssºÍjavascriptµÄ´¦Àí·½·¨¡£laravel mix»ùÓÚwebpack£¬²¢ÌṩͳһµÄapi£¬ÉÁ¿ª·¢Õß¿ÉÒÔÇáËɵش¦Àícss£¬javascriptºÍÆäËü×ʲú¡£

±¾ÎĽ«ÏÈÈÝLaravel MixµÄ»ù´¡ÖªÊ¶£¬²¢Í¨¹ýʾÀýչʾÔõÑùʹÓÃLaravel Mix´¦ÀíCSSºÍJavaScript¡£

×°ÖÃLaravel Mix

×°ÖÃLaravel Mix֮ǰ£¬ÎÒÃDZØÐè×°ÖÃNode.jsºÍnpm¡£×°ÖÃÍê³ÉÖ®ºó£¬Ê¹ÓÃnpm×°ÖÃLaravel MixºÍÏà¹ØÒÀÀµ¡£

ÎÒÃÇ¿ÉÒÔÔÚLaravelÓ¦ÓóÌÐòµÄ¸ùĿ¼Ï£¬Ê¹ÓÃÒÔÏÂÏÂÁîÀ´×°ÖÃLaravel Mix£º

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

npm install laravel-mix --save-dev

µÇ¼ºó¸´ÖÆ

×°ÖÃÍê³ÉÖ®ºó£¬ÎÒÃÇ¿ÉÒÔÔÚpackage.jsonÎļþÖп´µ½Laravel MixºÍÏà¹ØÒÀÀµµÄ°æ±¾ÐÅÏ¢¡£±ðµÄ£¬ÎÒÃÇ»¹¿ÉÒÔÔÚnode_modules/laravel-mixĿ¼ÖÐÕÒµ½Laravel MixµÄÔ´´úÂë¡£

ÉèÖÃLaravel Mix

Laravel Mix±»Éè¼ÆΪÒ×ÓÚʹÓõŤ¾ß¡£Laravel MixµÄĬÈÏÉèÖÃÎļþΪwebpack.mix.js£¬ÎÒÃÇ¿ÉÒÔÔÚ¸ÃÎļþÖбàд¼òÆӵĴúÂëÀ´±àÒëÎÒÃǵÄCSSºÍJavaScript¡£

ÒÔÏÂÊÇÒ»¸öʹÓÃLaravel Mix±àÒëCSSµÄʾÀý£º

const mix = require('laravel-mix');

mix.styles([
    'resources/css/app.css',
    'resources/css/extra.css'
], 'public/css/all.css');

µÇ¼ºó¸´ÖÆ

Õâ¸öʾÀý×öÁËʲô£¿

Ê×ÏÈ£¬ÎÒÃÇÐèҪʹÓÃrequireº¯ÊýÒýÈëLaravel Mix¡£È»ºó£¬ÎÒÃÇʹÓÃmix³£Á¿À´Å²ÓÃLaravel Mix API¡£mix.styles()ÒªÁì±àÒëCSSÎļþ£¬²¢½«ÆäÊä³öµ½public/css/all.css¡£

ÎÒÃÇ¿ÉÒÔÖ¸¶¨¶à¸öCSSÎļþ£¬²¢½«ÆäºÏ²¢³ÉÒ»¸öÎļþ¡£ÎÒÃÇ»¹¿ÉÒÔʹÓÃmix.sass()ÒªÁìÀ´±àÒëSassÎļþ£¬Ê¹ÓÃmix.less()ÒªÁìÀ´±àÒëLessÎļþ£¬µÈµÈ¡£

ÒÔÏÂÊÇÒ»¸öʹÓÃLaravel Mix±àÒëJavaScriptµÄʾÀý£º

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/extra.js', 'public/js');

µÇ¼ºó¸´ÖÆ

´ËʾÀý´Óresources/js/app.jsºÍresources/js/extra.js±àÒëJavaScriptÎļþ£¬²¢½«ÆäÊä³öµ½public/jsĿ¼¡£

ÎÒÃÇ»¹¿ÉÒÔʹÓÃmix.react()ÒªÁìÀ´±àÒëReactJSÎļþ£¬Ê¹ÓÃmix.vue()ÒªÁìÀ´±àÒëVue.jsÎļþ£¬µÈµÈ¡£

ÏñCSSÒ»Ñù£¬ÎÒÃÇ¿ÉÒÔÔÚmix.js()ÒªÁìÖнç˵¶à¸öJavaScriptÎļþ£¬½«ËüÃǺϲ¢µ½Ò»¸öJSÎļþÖС£

ÏÂÃæÊÇÒ»¸öÔÚLaravel MixÖн»Ö¯ÒýÓÃJavaScriptºÍCSSÎļþµÄʾÀý£º

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .styles([
        'public/css/app.css',
        'public/css/extra.css'
    ], 'public/css/all.css')
   .scripts([
        'public/js/app.js',
        'public/js/extra.js'
    ], 'public/js/all.js');

µÇ¼ºó¸´ÖÆ

ÔÚ´ËʾÀýÖУ¬ÎÒÃÇÊ×ÏÈʹÓÃmix.js()ÒªÁì±àÒëJavaScriptÎļþ¡£È»ºó£¬ÎÒÃÇʹÓÃmix.sass()ÒªÁì±àÒëSassÎļþ£¬½«ÆäÊä³öµ½public/cssĿ¼¡£

½ÓÏÂÀ´£¬ÎÒÃÇʹÓÃmix.styles()ÒªÁ콫public/css/app.cssºÍpublic/css/extra.cssºÏ²¢µ½Ò»¸öCSSÎļþÖУ¬²¢½«ÆäÊä³öµ½public/css/all.css¡£

×îºó£¬ÎÒÃÇʹÓÃmix.scripts()ÒªÁ콫public/js/app.jsºÍpublic/js/extra.jsºÏ²¢µ½Ò»¸öJSÎļþÖУ¬²¢½«ÆäÊä³öµ½public/js/all.jsÖС£

ÐèҪעÖصÄÊÇ£¬ÎÒÃÇÓ¦¸Ã¾¡¿ÉÄܵؽ«CSSºÍJavaScriptÎļþÍÑÀëÖÎÀí¡£ÕâÑù£¬ÎÒÃÇ¿ÉÒÔ¸üÇáËɵØÖÎÀíÎÒÃǵÄAssets£¨×ÊÔ´£©²¢¾ÙÐÐ΢µ÷£¬¶øÎÞÐèÓ°ÏìÆäËüAssets¡£

±àÒëAssets

ÔÚwebpack.mix.jsÎļþÖбàд´úÂëÖ®ºó£¬ÎÒÃÇ¿ÉÒÔʹÓÃÒÔÏÂÏÂÁîÀ´±àÒëAssets£º

npm run dev

µÇ¼ºó¸´ÖÆ

ÉÏÊöÏÂÁÔËÐÐWebpack£¬²¢½«±àÒëºóµÄCSSºÍJavaScriptÎļþÊä³öµ½public/cssºÍpublic/jsĿ¼¡£

ÈôÊÇÎÒÃÇÒªÔÚ±àÒëAssetsʱ¾ÙÐÐÉú²úģʽ¹¹½¨£¬¿ÉÒÔʹÓÃÒÔÏÂÏÂÁ

npm run production

µÇ¼ºó¸´ÖÆ

´ËÏÂÁÓÅ»¯AssetsÎļþµÄ¾Þϸ£¬²¢É¾³ýδʹÓõÄAssets¡£

½áÂÛ

ÔÚ±¾ÎÄÖУ¬ÎÒÃÇÏÈÈÝÁËLaravel MixµÄ»ù´¡ÖªÊ¶¡£ÎÒÃÇÏàʶÁËÔõÑùʹÓÃLaravel Mix¼ò»¯CSSºÍJavaScriptÎļþµÄ´¦Àí¡£Ê¹ÓÃLaravel Mix£¬ÎÒÃÇ¿ÉÒÔÇáËɵرàÒëÎÒÃǵÄCSSºÍJavaScriptÎļþ£¬²¢ÇÒ¿ÉÒÔ¸üºÃµØÖÎÀíºÍÓÅ»¯ÎÒÃǵÄAssets¡£

ÐÒÔ˵ÄÊÇ£¬Laravel MixÄÚÖÃÓÚLaravel WebÓ¦ÓóÌÐòÖС£ÕâʹµÃÎÒÃÇ¿ÉÒÔ¸üÇáËɵØʹÓÃLaravel Mix£¬¶øÎÞÐèµ£ÐĹ¹½¨¹ÜµÀµÄÖØ´óÐÔ¡£

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

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

Ïà¹ØÐÂÎÅ

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

18523999891

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

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

QR code
ÍøÕ¾µØͼ