Laravel¿ª·¢£ºÔõÑùʹÓÃLaravel Mix±àдCSSºÍJavaScript£¿
laravel¿ª·¢£ºÔõÑùʹÓÃlaravel mix±àдcssºÍjavascript£¿
Laravel MixÊÇLaravel¿ò¼ÜÄÚÖõÄÒ»¿î¹¹½¨¹¤¾ß£¬¿ÉÓÃÓÚ±àдºÍ´ò°üCSS¡¢JavaScript¡¢Í¼Æ¬µÈÇ°¶Ë×ÊÔ´£¬ÒÔ¼°ÓÅ»¯×Ô¶¯¼ÓÔغͱàÒëµÈ¹¦Ð§£¬Ê¹¿ª·¢Ö°Ô±Äܹ»¸üÇáËɵØÖÎÀíºÍ¹¹½¨Ç°¶Ë×ÊÔ´¡£
ÔÚ±¾ÎÄÖУ¬ÎÒÃǽ«Ò»²½²½Ñ§Ï°ÔõÑùʹÓÃLaravel Mix±àдCSSºÍJavaScript¡£
×°ÖÃLaravel Mix
ÔÚ×îÏÈʹÓÃLaravel Mix±àдCSSºÍJavaScript֮ǰ£¬Ê×ÏÈÐèÒªÔÚLaravelÏîÄ¿ÖÐ×°ÖÃLaravel Mix¡£Äú¿ÉÒÔʹÓÃÒÔÏÂÏÂÁ
Á¬Ã¦Ñ§Ï°¡°JavaÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
npm install npm install laravel-mix --save-dev
µÇ¼ºó¸´ÖÆ
Õ⽫װÖÃLaravel Mix¼°ÆäÒÀÀµÏî¡£
±àдCSS
Laravel MixÌṩÁËÐí¶àÀû±ãµÄÒªÁìÀ´±àдCSS¡£Äú¿ÉÒÔʹÓÃCSSµÄ±àÒëÆ÷£¬ÀýÈçSass»òLess£¬À´Ê¹CSS¸ü¾ß¿É¶ÁÐÔ¡£±ðµÄ£¬Laravel Mix»¹ÌṩÁËһЩÓÐÓõÄÒªÁ죬ÀýÈç×Ô¶¯Ìí¼ÓCSSǰ׺ÒÔ¼°Ñ¹ËõºÍÓÅ»¯CSS¡£
ÒÔÏÂÊÇʹÓÃLaravel Mix±àдCSSµÄʾÀý´úÂ룺
// µ¼Èë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');
µÇ¼ºó¸´ÖÆ
ÔÚÉÏÃæµÄ´úÂëÖУ¬ÎÒÃÇʹÓÃÁËSass±àдCSS£¬²¢½«Æä±àÒëΪCSS£¬È»ºó½«Æä´ò°üµ½public/cssĿ¼ÖС£ÎÒÃÇ»¹Ê¹ÓÃÁË×Ô¶¯Ìí¼ÓCSSǰ׺À´È·±£CSSÔÚÖÖÖÖä¯ÀÀÆ÷ÉϾßÓÐÒ»ÖµÄÍâ¹Û£¬²¢Ñ¹ËõºÍÓÅ»¯ÁËCSSÒÔÌá¸ßÒ³Ãæ¼ÓÔØËÙÂÊ¡£
±àдJavaScript
Laravel Mix»¹ÌṩÁËÐí¶àÀû±ãµÄÒªÁìÀ´±àдJavaScript¡£Äú¿ÉÒÔʹÓÃBabelÀ´×ª»»ES6»ò¸ü¸ß°æ±¾µÄJavaScript£¬ÒÔÈ·±£´úÂë¿ÉÔÚÖÖÖÖä¯ÀÀÆ÷ÖÐÔËÐС£±ðµÄ£¬Laravel Mix»¹ÌṩÁËһЩÓÐÓõÄÒªÁ죬ÀýÈçѹËõºÍÓÅ»¯JavaScript¡£
ÒÔÏÂÊÇʹÓÃLaravel Mix±àдJavaScriptµÄʾÀý´úÂ룺
// µ¼Èë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');
µÇ¼ºó¸´ÖÆ
ÔÚÉÏÃæµÄ´úÂëÖУ¬ÎÒÃÇʹÓÃÁËBabelÀ´×ª»»ES6»ò¸ü¸ß°æ±¾µÄJavaScript£¬²¢½«±àÒëµÄJavaScript´ò°üµ½public/jsĿ¼ÖС£ÎÒÃÇ»¹Ñ¹ËõºÍÓÅ»¯ÁËJavaScriptÒÔÌá¸ßÒ³Ãæ¼ÓÔØËÙÂÊ¡£
×ܽá
±¾ÎÄÏÈÈÝÁËÔõÑùʹÓÃLaravel Mix±àдCSSºÍJavaScript¡£ÎÒÃÇѧϰÁËÔõÑùʹÓÃSass±àдCSS£¬ÔõÑùʹÓÃBabelת»»JavaScript£¬²¢ÔõÑù×Ô¶¯Ìí¼ÓCSSǰ׺¡¢Ñ¹ËõºÍÓÅ»¯CSSºÍJavaScript¡£Laravel MixÊÇÒ»¸öºÜÊÇÇ¿Ê¢µÄ¹¤¾ß£¬Ëü¿ÉÒÔ×ÊÖúÎÒÃǸüÇáËɵØÖÎÀíºÍ¹¹½¨Ç°¶Ë×ÊÔ´¡£ÈôÊÇÄúÕýÔÚʹÓÃLaravel¾ÙÐпª·¢£¬ÄÇôǿÁÒ½¨ÒéÄúʹÓÃLaravel MixÀ´ÖÎÀíºÍ±àÒëÇ°¶Ë×ÊÔ´¡£
ÒÔÉϾÍÊÇLaravel¿ª·¢£ºÔõÑùʹÓÃLaravel Mix±àдCSSºÍJavaScript£¿µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡