網頁前端自動化工具 – Grunt

Grunt 網站截圖

Grunt 網站截圖



今天為各位介紹的是一個前端工程師所使用的自動化工具「Grunt」,為何我們要使用這個工具呢?其實使用這個工具的原因有很多,因為他的擴充模組(Plugin)也很多,不過今天馬老師從自動最小化(Minify)的角度來介紹這個工具該如何使用。

一般來說前端網頁開發不外乎HTML、CSS、Javascript這三種語法,而在開發完成之後,為了要節省流量,我們可能會把這三個檔案壓縮後再上傳到網站伺服器上,何謂壓縮請參考下圖:

未經壓縮的HTML檔

未經壓縮的HTML檔

經過壓縮的HTML檔

經過壓縮的HTML檔

未經壓縮的CSS檔

未經壓縮的CSS檔

經過壓縮的CSS檔

經過壓縮的CSS檔

未經壓縮的JS檔

未經壓縮的JS檔

經過壓縮的JS檔

經過壓縮的JS檔

從上面的檔案可以觀察出在開發時我們為了閱讀的便利,常常會利用註解、空白…等來輔助,但真正發佈出去這些東西卻不是必要的,甚至在開發的時候我們為了方面會把CSS或JS拆成好幾個檔案,但發佈之後卻希望可以合併,但如果需要人工來做這件事,可想而知會有多麻煩,這個時候Grunt就會發揮效用了,設定好之後只要一個指令,他就可以幫我們做好這些動作,接下來就來看看該如何使用吧。

首先Grunt是一個基於node.js下的應用程序,所以必須先安裝node.js,安裝的部分並不難,從官網下載後直接執行安裝即可。

Node.js 官方網站 截圖

Node.js 官方網站 截圖

接下來可以參考Grunt網站中Getting Started的單元,或是跟著以下(以Windows為案例)的方式進行Grunt的安裝。

  1. 打開「命令提示字元」。
  2. 輸入「npm install -g grunt-cli」。
  3. 接下來就可以準備網頁專案資料夾了,如下圖所示,我的網頁專案資料夾簡單分成兩個:
    • src:所有開發檔案
    • public:發佈至網路上的檔案

      準備專案資料夾

      準備專案資料夾

  4. 這樣準備的目的應該很清楚,就是希望在src資料夾內以自己最習慣、最方便閱讀的方式來開發,而開發完畢之後可以把壓縮的檔案轉至public資料夾,上傳到伺服器上。

有關於網頁內容開發的部分,本篇文章就省略,所以可以看到上面圖檔中我已經準備好了HTML、CSS、JS各一個,直接進入利用Grunt開始做自動最小化的部分。

  1. 使用Grunt時,必須在網站根目錄建立兩個檔案:
    • package.json:Grunt的專案設定檔,其中可以包含專案名稱、作者、版本,所需要使用的Plugin…等,可以參考下面我的檔案。
    • Grunt.js:Grunt的執行腳本,以本案例來說就是要去哪個資料夾,壓縮哪些檔案後存放在哪邊,需在本檔案中指定。
      {
          "name": "gruntTest",
          "version": "0.1.0",
          "author": "Stanley Ma",
          "devDependencies": {
              "grunt": "~0.4.5",
              "grunt-contrib-htmlmin": "~0.4.0",
              "grunt-contrib-cssmin": "~0.13.0",
              "grunt-contrib-uglify": "~0.9.2"
          }
      }

      以上面的package.json檔案來說,定義了專案名稱、作者、版本以及所需要使用的Grunt版本(撰文時Grunt穩定版為0.4.5)和Plugin列表,因為開頭有提到,本案例以最小化的角度來介紹Grunt,所以用到的三個Plugin分別為:

      • grunt-contrib-htmlmin:最小化HTML檔。
      • grunt-contrib-cssmin:最小化CSS檔。
      • grunt-contrib-uglify:最小化JS檔。
  2. 接下來利用Grunt的專案設定檔來安裝所需要的Grunt和各個外掛,利用「命令提示字元」進入網頁專案的根目錄,輸入「npm install」,他就會在專案資料夾中安裝好所有需要的Plugin。

    安裝 Grunt 後的專案資料夾

    安裝 Grunt 後的專案資料夾

  3. 接下來就要開始準備撰寫Grunt.js的執行腳本,大家可以參考我的專案檔案寫法:
    module.exports = function (grunt) {
    
        grunt.initConfig({
            htmlmin: {
                Target: {
                    options: {
                        removeComments: true,
                        collapseWhitespace: true,
                        removeEmptyAttributes: true,
                    },
                    files: {
                        'public/index.html': 'src/index.html',
    
                    }
                }
            },
    
            cssmin: {
                target: {
                    files: {
                        'public/index.css': 'src/index.css'
                    }
                }
            },
    
            uglify: {
                target: {
                    files: {
                        'public/index.js': 'src/index.js'
                    }
                }
            }
    
        });
    
        grunt.loadNpmTasks('grunt-contrib-htmlmin');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-uglify');
    
        grunt.registerTask('default', ['htmlmin', 'cssmin', 'uglify']);
    
    };

    這樣的寫法會讓Grunt把在src裡面的三個檔案,分別壓縮後複製一份到public的資料夾中,確定資料夾和檔案無誤之後,繼續下一步動作。

  4. 利用「命令提示字元」進入網頁專案的根目錄,輸入「grunt」之後,出現以下的畫面表示成功。

    Grunt 執行成功

    Grunt 執行成功

  5. 本案例利用三個Grunt的Plugin完成,分別是:「grunt-contrib-htmlmin」、「grunt-contrib-cssmin」、「grunt-contrib-uglify」,其實這三個外掛都有一些其他的參數,另外也可以進行多檔案的批次轉換以及檔案合併…等等功能,建議有需要的同學可以到Plugin各自的網站上去看看使用方式。

附帶一提,一開始就有提到關於Grunt自動化的Plugin非常多,本文僅用到了三個,這裡有Plugin的列表,對這方面有興趣的同學們也歡迎到網站上看更多相關的自動化功能。

You may also like...

13,691 Responses

  1. Если вы искали где отремонтировать сломаную технику, обратите внимание – сервис центр в казани

  2. Если вы искали где отремонтировать сломаную технику, обратите внимание – выездной ремонт бытовой техники в нижнем новгороде

  3. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт техники в казани

  4. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: сервисные центры в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  5. RobertMef表示:

    reputable indian online pharmacy: pharmacy website india – indian pharmacy paypal

  6. ArthurKib表示:

    http://pharmbig24.com/# buspirone online pharmacy

  7. Josephfub表示:

    indian pharmacy paypal india pharmacy reputable indian pharmacies

  8. MauriceGueda表示:

    mexican mail order pharmacies: mexico drug stores pharmacies – buying prescription drugs in mexico online

  9. Hi, I do believe this is a great website. I stumbledupon it 😉 I will come back once again since i have book marked it. Money and freedom is the greatest way to change, may you be rich and continue to help other people.

  10. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт цифровой техники красноярск

  11. Отличный сайт! Всем рекомендую!Slivkursov

  12. RobertMef表示:

    best online pharmacies in mexico: buying prescription drugs in mexico online – medicine in mexico pharmacies

  13. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники

  14. Josephfub表示:

    buying from online mexican pharmacy mexican drugstore online mexico drug stores pharmacies

  15. Wnngonert表示:

    Information from school and other outside sources is also useful.
    Do not bactrim dosage 800/160 .
    I actually am having problems just recently dozing off very quickly, no I don’t have narcolepsy but its almost like that but a slow doze I can feel it coming but its scary.

  16. MauriceGueda表示:

    safe online pharmacy reviews: world best pharmacy online store reviews – target pharmacy celexa

  17. ArthurKib表示:

    https://indianpharmacy.company/# best india pharmacy

  18. DouglasHoapy表示:

    Fonbet промокод при регистрации https://nashinervy.ru/pags/aktualnuy_promokod_fonbet_pri_registracii.html
    Промокод Fonbet при регистрации предоставляет новым пользователям приветственные бонусы. Например, промокод ‘GIFT200’ активирует бесплатные ставки или другие награды. Ввод этого промокода в специальное поле при регистрации помогает новым игрокам успешно начать игру и увеличить свои шансы на выигрыш.

  19. Профессиональный сервисный центр по ремонту планшетов в Москве.
    Мы предлагаем: сколько стоит починка планшета
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  20. Профессиональный сервисный центр по ремонту планшетов в Москве.
    Мы предлагаем: стоимость замены экрана на планшете
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  21. DouglasHoapy表示:

    Промокод на фрибет Фонбет https://autoritm-service.ru/inc/pages/aktualnuy_promokod_fonbet_pri_registracii.html
    Фрибет – это бесплатная ставка, которую можно получить, используя промокод на Фонбет. Например, промокод ‘GIFT200’ предоставляет новым пользователям бесплатные ставки при регистрации. Эти промокоды позволяют сделать ставку без использования собственных средств, что увеличивает шансы на выигрыш и делает игру более интересной и выгодной.

  22. Профессиональный сервисный центр по ремонту видео техники а именно видеокамер.
    Мы предлагаем: ремонт цифровых видеокамер
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  23. RobertMef表示:

    mexico drug stores pharmacies: mexico pharmacies prescription drugs – п»їbest mexican online pharmacies

  24. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры в новосибирске
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  25. Eugenesmivy表示:

    Drought-hit Danube River reveals scuttled German World War II ships
    гей член
    The wrecks of explosives-laden Nazi ships sunk in the Danube River during World War II have emerged near Serbia’s river port town of Prahovo, after a drought in July and August that saw the river’s water level drop.

    Four vessels dating from before 1950 have also come to light in Hungary’s Danube-Drava National Park near Mohacs, where the Danube’s water level stood at only 1.5 meters (4.9 feet) on Tuesday, the lingering effect of severe heat waves and persistent drought in July and August.

    The vessels revealed in Prahovo were among hundreds scuttled along the Danube by Nazi Germany’s Black Sea fleet in 1944 as they retreated from advancing Soviet forces, destroying the ships themselves. The wrecks can hamper river traffic during low water levels.
    Strewn across the riverbed, some of the ships still have turrets, command bridges, broken masts and twisted hulls, while others lie mostly submerged under sandbanks.

    Endre Sztellik, a guard at the Danube-Drava national park, said of one of the ships, “we still don’t know what this is exactly. What is visible and an unfortunate fact is that the wreck is diminishing as people are interested in it and parts of it are going missing.”
    The Danube stood at 1.17 meters (3.8 feet) in Budapest on Tuesday, which compares with an all-time record low of around 0.4 meters (1.3 feet) registered in October 2018. During floods, the Danube rises well above 6 meters (19.7 feet).

    “Eastern Europe is experiencing critical drought conditions that are affecting crops and vegetation,” the European climate service Copernicus said on its website in its latest drought report, published earlier this month.

  26. VictorTax表示:

    Remember when Lady Gaga ‘bled’ onstage during her shocking performance at the 2009 VMAs?
    гей порно большой

    Singing about the perils of fame, being dragged out from beneath a fallen chandelier then bleeding to death in front of a roomful of celebrities: Lady Gaga was not shy about making her debut at the MTV Video Music Awards.

    The year was 2009 — many will remember it as the year rapper Ye (formerly Kanye West) stage-crashed 19-year-old Taylor Swift and suggested her award for Best Female Video should have gone to Beyonce instead. But never one to be overshadowed, Lady Gaga, then 23, made some pop culture history of her own that night.

    Her rendition of “Paparazzi” — lamenting both unrequited love and the sinister effects of hounding tabloids — has gone down in the mists of Gaga legend; not least because a lack of high-quality footage means fans must resort to watching grainy screen-recorded versions circulated on social media.
    Over the limited number of pixels, Gaga can be seen at the start of the performance in an all-white ensemble: a bejeweled, asymmetric lace bodysuit and matching cape, thigh-high boots, a feathered Keko Hainswheeler headpiece and strings of glinting pearls. As she staggered back from her piano at the song’s crescendo, however, an audible gasp swept the room as thick blood suddenly appeared to be pouring from her abdomen.

    “I’m your biggest fan, I’ll follow you until you love me,” Gaga wailed desperately, her once-pristine outfit now daubed in scarlet. She ended the number suspended above the stage, ‘dead,’ as more blood dripped from her eyes.

    “(It) gives me chills every time I watch it,” Olivia Rodrigo told MTV in 2021. “I think Lady Gaga is the best performer of our generation.” The “Drivers License” singer appeared to take notes. At this year’s Grammy Awards, she began to ‘bleed’ from clenched fists while performing her hit “vampire,” spreading fake blood across her arms and neck as the song progressed.

  27. Если вы искали где отремонтировать сломаную технику, обратите внимание – профи тех сервис краснодар

  28. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт техники в краснодаре

  29. DamianGed表示:

    Offre speciale 1xBet Obtenez un bonus sportif supplementaire de 200% jusqu’a 130 €/$ avec le 1xbet телеграмм промокод, en plus du bonus de bienvenue standard de 1950$ et de 150 tours gratuits au casino. Profitez de cette opportunite pour jouer et gagner de l’argent grace aux paris sportifs. Chez nous, tout le monde peut devenir gagnant !

  30. Josephfub表示:

    meijers pharmacy buspirone online pharmacy pharmacy rx coupons

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。