資訊專欄INFORMATION COLUMN
使用grunt實時編譯less文件 下圖是項目的文件組織
生成package.json文件，通過npm init命令。
安裝你需要的Devdependencies/denpendencies。
npm install grunt --save-dev
npm install load-grunt-tasks --save-dev
npm install time-grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt --save
GruntFile.js配置 "use strict";
module.exports = function(grunt){
require("time-grunt")(grunt);
require("load-grunt-tasks")(grunt);
grunt.initConfig({
less: {
build: {
expand: true,
cwd: "less/",
src: "["*.less"]",
dist: "css/",
ext: ".css"
}
},
watch: {
files: ["less/**/*.less"],
tasks: ["default"]
}
});
grunt.registerTask("default", ["less"]);
}
grunt.initConfig()里面?zhèn)魅雽ο?/p>
每一個字段名代表一個task
task里面的內(nèi)容為target目標(biāo)
在less這個task里面：
expand: true 開始動態(tài)編譯
cwd: "less/" 所有的"src"里指定文件都是相對于這個屬性指定的路徑
src: ["*.less"] 相對與cwd路徑下需要匹配的文件，這個地方是匹配所有的less文件
dest: "css/" 生成目標(biāo)文件的路徑
ext: ".css" 替換所有生成的目標(biāo)文件的后綴為這個屬性
在watch這個task里面：
files:["less/**/*.less"] 表示監(jiān)聽less文件夾下，所有l(wèi)ess文件，以及所有目錄下的less文件
tasks: ["default"] 表示當(dāng)上面被監(jiān)聽的文件發(fā)生變化的時候會執(zhí)行這個任務(wù)
grunt.registerTask("default", ["less"]) //注冊"default"，里面包含"less"任務(wù)
在html文件里面引入less文件啟動grunt任務(wù)
打開命令行窗口，輸入 grunt watch
這條命令就表示啟動grunt的task(watch),因為在task(watch)里面配置了tasks，即表示當(dāng)監(jiān)聽的文件發(fā)生變化的時候會執(zhí)行default任務(wù)
這時候你在index.less文件里面做出的修改命令行都出實時編譯為css，放心刷新瀏覽器就好了
使用編輯器自帶的編譯功能webstorm有自帶的less/sass編譯功能，也可以進行相應(yīng)的配置進行l(wèi)ess文件的實時編譯
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86044.html
摘要：安裝成功的驗證方式中輸入如果輸出版本號就說明沒有問題。這里再提一點，因為國內(nèi)的某些原因，通過安裝工具可能會非常慢，這里需要我們做一點修改，也就是使用淘寶鏡像。 最近看視頻學(xué)習(xí)了前端自動化的一些知識，確實讓我大開眼界。感覺前端越來越神器了。同時跟著視頻自己也嘗試運用了一些工具去構(gòu)建前端項目，但是中間遇見了很多坑，磕磕絆絆的才實現(xiàn)了一點功能，所以打算記錄一下學(xué)習(xí)過程中的筆記。 首先列舉一下...
摘要：流式構(gòu)建改變了底層的流程控制，大大提高了構(gòu)建工作的效率和性能，給用戶的直觀感覺就是更快。我的看法關(guān)于流式構(gòu)建，短短幾句話無法講清它的來龍去脈，但是在的世界里，確實是至關(guān)重要的。 Grunt 一直是前端領(lǐng)域構(gòu)建工具（任務(wù)運行器或許更準(zhǔn)確一些，因為前端構(gòu)建只是此類工具的一部分用途）的王者，然而它也不是毫無缺陷的，近期風(fēng)頭正勁的 gulp.js 隱隱有取而代之的態(tài)勢。那么，究竟是什么使得 g...
摘要：首先聲明一下，和兩者關(guān)系不大，主要是團隊之前一直用構(gòu)建工具，這幾天業(yè)務(wù)上比較清閑，老大讓我學(xué)學(xué)新的和這些潮流工具，于是草草研究了一天，記一些筆記。最后使用將各個組件打包在一起。 首先聲明一下，gulp和webpack兩者關(guān)系不大，主要是團隊之前一直用grunt構(gòu)建工具，這幾天業(yè)務(wù)上比較清閑，老大讓我學(xué)學(xué)新的gulp和webpack這些潮流工具，于是草草研究了一天，記一些筆記。 gulp...
摘要：頭部資源終將占據(jù)統(tǒng)治地位，成為前端項目構(gòu)建工具的頭部資源。模塊化編程模塊的概念是將程序拆解為離散的功能塊，通常稱這些功能塊為模塊。模塊相對于程序而言，具有更小的體積，單個模塊具有清晰的目的，方便進行開發(fā)測試維護等工作。 webpack作用 webpack可以將前端工程中所有的靜態(tài)資源打包成為一個或者多個js，靜態(tài)資源包括css、圖片等。 為什么要使用webpack，沒有打包工具之前，頁...
以前我們敲靜態(tài)頁面都是寫好html，css, js，然后再去刷新瀏覽器，艾尼馬又不行，有重新寫過再刷新，一個頁面下來按chrl+r的次數(shù)可讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。 后來，grunt,gulp等工具應(yīng)運而生，當(dāng)然它們不止這個功能，但卻很好地減輕了我們的負(fù)擔(dān)。這篇文章介紹一些如何使用這些工具使構(gòu)建頁面變得簡單高效。這只是個人的目前在用的不成熟的方案，更專業(yè)的還請參考...
閱讀 3471·2021-11-15 11:39
閱讀 1679·2021-09-22 10:02
閱讀 1366·2021-08-27 16:24
閱讀 3669·2019-08-30 15:52
閱讀 3479·2019-08-29 16:20
閱讀 873·2019-08-28 18:12
閱讀 607·2019-08-26 18:27
閱讀 769·2019-08-26 13:32
