什么是構(gòu)建工具？前端最常用的構(gòu)建工具是啥？
3
0
0
ringa_lee
就是把你寫(xiě)的前端代碼，做一定的自動(dòng)化處理變成易于發(fā)布的代碼。
早期grunt比較流行，之后流行g(shù)ulp，再到后來(lái)的webpack。這些工具都可以自定義構(gòu)建流程。
前端構(gòu)建，這里要推薦下 coolie 了，示意如下：
3
586
<!doctype html>
<link rel="stylesheet" href="path/to/style.css">
<style>
body {
background: url('path/to/abc.png');
}
</style>
<img src="path/to/abc.png">
<p style="backrgound: url('path/to/abc.png')"></p>
<!--coolie-->
<script src="path/to/a.js"></script>
<script src="path/to/b.js"></script>
<!--/coolie-->
<script coolie src="path/to/coolie.js"
data-config="coolie-config.js"
data-main="main.js"></script>+
// main.js
alert('Hello' + require('world'));coolie 構(gòu)建之后：
<!doctype html>
<link rel="stylesheet" href="/static/css/xxxxxxx.css">
<style>
body {
background: url('/gnstatic/res/xxxxxxxx.png');
}
</style>
<img src="/static/res/xxxxxxxx.png">
<p style="backrgound: url('/gnstatic/res/xxxxxxxx.png')"></p>
<script src="/static/js/xxxxxxxx.js"></script>
<script coolie src="/static/js/yyyyyyyyy.js"
data-config="/static/js/zzzzzzzzz.js"
data-main="aaaaaaaaa.js"></script>// aaaaaaaaa.js
define("0",["1"],function(r,e,m){alert("Hello"+r("1"));});
define("1",[],function(r,e,m){m.exports="world"});微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)
收藏
