前端構建工具grunt學習筆記

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

使用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目標

在less這個task里面：

expand: true 開始動態(tài)編譯

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

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

dest: "css/" 生成目標文件的路徑

ext: ".css" 替換所有生成的目標文件的后綴為這個屬性

在watch這個task里面：

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

tasks: ["default"] 表示當上面被監(jiān)聽的文件發(fā)生變化的時候會執(zhí)行這個任務

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

在html文件里面引入less文件

啟動grunt任務

打開命令行窗口，輸入 grunt watch

這條命令就表示啟動grunt的task(watch),因為在task(watch)里面配置了tasks，即表示當監(jiān)聽的文件發(fā)生變化的時候會執(zhí)行default任務

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

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

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

云服務器 GPU云服務器前端構建構建工具 android構建工具自動化構建工具

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/86044.html

Yeoman,bower,Grunt的安裝

摘要：安裝成功的驗證方式中輸入如果輸出版本號就說明沒有問題。這里再提一點，因為國內(nèi)的某些原因，通過安裝工具可能會非常慢，這里需要我們做一點修改，也就是使用淘寶鏡像。最近看視頻學習了前端自動化的一些知識，確實讓我大開眼界。感覺前端越來越神器了。同時跟著視頻自己也嘗試運用了一些工具去構建前端項目，但是中間遇見了很多坑，磕磕絆絆的才實現(xiàn)了一點功能，所以打算記錄一下學習過程中的筆記。首先列舉一下...

AZmake 2019-08-20 16:02 評論0 收藏0
“流式”前端構建工具——gulp.js 簡介

摘要：流式構建改變了底層的流程控制，大大提高了構建工作的效率和性能，給用戶的直觀感覺就是更快。我的看法關于流式構建，短短幾句話無法講清它的來龍去脈，但是在的世界里，確實是至關重要的。 Grunt 一直是前端領域構建工具（任務運行器或許更準確一些，因為前端構建只是此類工具的一部分用途）的王者，然而它也不是毫無缺陷的，近期風頭正勁的 gulp.js 隱隱有取而代之的態(tài)勢。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 評論0 收藏0
gulp和webpack初探

摘要：首先聲明一下，和兩者關系不大，主要是團隊之前一直用構建工具，這幾天業(yè)務上比較清閑，老大讓我學學新的和這些潮流工具，于是草草研究了一天，記一些筆記。最后使用將各個組件打包在一起。首先聲明一下，gulp和webpack兩者關系不大，主要是團隊之前一直用grunt構建工具，這幾天業(yè)務上比較清閑，老大讓我學學新的gulp和webpack這些潮流工具，于是草草研究了一天，記一些筆記。 gulp...

jhhfft 2019-08-19 18:40 評論0 收藏0
webpack學習筆記1

摘要：頭部資源終將占據(jù)統(tǒng)治地位，成為前端項目構建工具的頭部資源。模塊化編程模塊的概念是將程序拆解為離散的功能塊，通常稱這些功能塊為模塊。模塊相對于程序而言，具有更小的體積，單個模塊具有清晰的目的，方便進行開發(fā)測試維護等工作。 webpack作用 webpack可以將前端工程中所有的靜態(tài)資源打包成為一個或者多個js，靜態(tài)資源包括css、圖片等。為什么要使用webpack，沒有打包工具之前，頁...

legendaryedu 2019-08-23 13:46 評論0 收藏0
[ 前端實習日記 ] 構建靜態(tài)頁面基礎架構

以前我們敲靜態(tài)頁面都是寫好html，css, js，然后再去刷新瀏覽器，艾尼馬又不行，有重新寫過再刷新，一個頁面下來按chrl+r的次數(shù)可讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。后來，grunt,gulp等工具應運而生，當然它們不止這個功能，但卻很好地減輕了我們的負擔。這篇文章介紹一些如何使用這些工具使構建頁面變得簡單高效。這只是個人的目前在用的不成熟的方案，更專業(yè)的還請參考...

lidashuang 2019-08-21 10:35 評論0 收藏0