前端構(gòu)建工具grunt學(xué)習(xí)筆記

zone 發(fā)布于2019-08-21 10:42 / 1178人閱讀

使用grunt實(shí)時(shí)編譯less文件 下圖是項(xiàng)目的文件組織

生成package.json文件，通過(guò)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)魅雽?duì)象

每一個(gè)字段名代表一個(gè)task

task里面的內(nèi)容為target目標(biāo)

在less這個(gè)task里面：

expand: true 開(kāi)始動(dòng)態(tài)編譯

cwd: "less/" 所有的"src"里指定文件都是相對(duì)于這個(gè)屬性指定的路徑

src: ["*.less"] 相對(duì)與cwd路徑下需要匹配的文件，這個(gè)地方是匹配所有的less文件

dest: "css/" 生成目標(biāo)文件的路徑

ext: ".css" 替換所有生成的目標(biāo)文件的后綴為這個(gè)屬性

在watch這個(gè)task里面：

files:["less/**/*.less"] 表示監(jiān)聽(tīng)less文件夾下，所有l(wèi)ess文件，以及所有目錄下的less文件

tasks: ["default"] 表示當(dāng)上面被監(jiān)聽(tīng)的文件發(fā)生變化的時(shí)候會(huì)執(zhí)行這個(gè)任務(wù)

grunt.registerTask("default", ["less"]) //注冊(cè)"default"，里面包含"less"任務(wù)

在html文件里面引入less文件

啟動(dòng)grunt任務(wù)

打開(kāi)命令行窗口，輸入 grunt watch

這條命令就表示啟動(dòng)grunt的task(watch),因?yàn)樵?b>task(watch)里面配置了tasks，即表示當(dāng)監(jiān)聽(tīng)的文件發(fā)生變化的時(shí)候會(huì)執(zhí)行default任務(wù)

這時(shí)候你在index.less文件里面做出的修改命令行都出實(shí)時(shí)編譯為css，放心刷新瀏覽器就好了

使用編輯器自帶的編譯功能

webstorm有自帶的less/sass編譯功能，也可以進(jìn)行相應(yīng)的配置進(jìn)行l(wèi)ess文件的實(shí)時(shí)編譯