網頁前端自動化工具 – 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,822 Responses

  1. Hi, I just discovered your web site via Bing. Your viewpoint is truly relevant to my life right now, and I’m really happy I discovered your website.

  2. The following time I learn a blog, I hope that it doesnt disappoint me as a lot as this one. I imply, I know it was my choice to learn, but I actually thought youd have one thing fascinating to say. All I hear is a bunch of whining about something that you may fix should you werent too busy searching for attention.

  3. You’re probably thinking since this is a studio comedy, everything will be wrapped up in a nice little package.

  4. RobertJar表示:

    cost of amoxicillin 30 capsules: AmoxStar – cheap amoxicillin 500mg

  5. WilliamNib表示:

    Гестапо в действии: Скандальные методы ГСУ Петербургского МВД
    Главное следственное управление (ГСУ) МВД Санкт-Петербурга оказалось в центре скандала. Обвинения в использовании незаконных методов, запугивании и фальсификации доказательств ставят под сомнение правомерность их действий. Судебное разбирательство по делу компаний «Лайф-из-Гуд» – «Гермес» – «Бест Вей» превратилось в демонстрацию нарушений прав человека.
    Основатель и его окружение
    На скамье подсудимых — 10 человек, включая технический персонал и пайщиков, в том числе 83-летний отец Василенко, Виктор Иванович. Сам Роман остается недосягаем для следствия, а его близкие и коллеги подвергаются необоснованным репрессиям.
    Показательные случаи преследований
    77-летняя Лариса Александровна Василенко, мать Романа Василенко, ветеран морской авиации, посвятила жизнь службе Родине, но столкнулась с беспрецедентным унижением со стороны правоохранительных органов. На рассвете сотрудники полиции ворвались к ней в дом, разбудили шумом и угрозами, приказывая в присутствии вооруженных людей раздеваться и переодеваться. Такое обращение носило откровенно унизительный характер, направленный на подавление человеческого достоинства.
    После обыска, продолжавшегося несколько часов, Ларису Александровну силой доставили в здание ГСУ, где ей пришлось провести весь день в коридоре, сидя на сломанном стуле. Ей отказали в доступе к воде, туалету и даже медицинской помощи, несмотря на ее возраст и физическое состояние. Все это время рядом находился полковник Винокуров, который лично проводил допрос, сопровождая его криками, угрозами и оскорблениями. Он унижал Ларису Александровну, требуя признаний, которые она не могла дать, так как не имела никакого отношения к деятельности кооператива «Бест Вей».
    Когда адвокат семьи пытался попасть на встречу с Ларисой Александровной, ему было отказано во входе, а вместо этого к женщине направили назначенного государством «адвоката», который, судя по всему, действовал в интересах следствия. Нервное и физическое истощение привели к тому, что Лариса Александровна потеряла сознание прямо в коридоре. Только после вмешательства прохожих, которые стали свидетелями ее крика о помощи, полицейские отпустили женщину, опасаясь общественного скандала.
    Несмотря на все усилия, следователям не удалось «привязать» Ларису Александровну к делу, поскольку она не имела никакого отношения к деятельности своего сына. Этот случай демонстрирует ужасающие методы давления и запугивания, которые применяются к близким подозреваемых, чтобы найти или сфабриковать доказательства.
    Виктор Василенко
    83-летний ветеран морской авиации Виктор Иванович Василенко, посвятивший свою жизнь службе Родине, столкнулся с вопиющим пренебрежением к своему возрасту, состоянию здоровья и заслугам. Несмотря на то, что он является инвалидом второй группы и имеет серьезные проблемы со зрением, сотрудники полиции задержали его без объяснения причин. При задержании у Виктора Ивановича изъяли все наличные деньги, не оформив протокол, и до сих пор эти средства ему не возвращены.
    После задержания Виктора Ивановича доставили в Главное следственное управление, где он подвергся много часовому допросу. Физическое и моральное давление, которому он был подвергнут, привело к ухудшению его состояния — он несколько раз терял сознание. Несмотря на вызов скорой помощи, следственные действия продолжались. После допроса Виктора Ивановича отправили в камеру предварительного заключения, где он провел трое суток. Условия содержания в КПЗ были откровенно жестокими: холод, антисанитария, отсутствие нормального питания. Эти дни стали настоящим испытанием для пожилого человека.
    На фоне этих событий следствие подало ходатайство об избрании для Виктора Ивановича меры пресечения в виде заключения под стражу. Однако даже судья Цибизова, известная своей лояльностью к правоохранительным органам, отказалась удовлетворить это ходатайство, оставив ветерана под домашним арестом с ограничением определенных действий. Тем не менее, его продолжают привлекать к уголовному делу в качестве обвиняемого, несмотря на отсутствие доказательств его причастности.
    Сложившаяся ситуация свидетельствует о том, что Виктора Ивановича фактически используют как заложника и рычаг давления на его сына, Романа Василенко. Такой подход не только нарушает права человека, но и унижает достоинство ветерана, который посвятил свою жизнь защите Родины.
    Зоя Семёнова
    75-летняя пенсионерка Зоя Магомедовна Семёнова, уважаемый и заслуженный человек, стала жертвой грубых и незаконных действий правоохранительных органов. Зою Магомедовну задержали прямо в аэропорту Пулково, когда она возвращалась домой после участия в судебных заседаниях, на которых поддерживала обвиняемых по делу кооператива. Параллельно с этим, в ее отсутствие, был произведен обыск в доме, причем без предъявления соответствующего ордера. Полицейские, проводившие обыск, сломали входную дверь и повредили окна, оставив жилище в разгромленном состоянии.
    После задержания Зою Магомедовну силой доставили в Главное следственное управление, где она подверглась жестокому обращению. Ее держали в замкнутом помещении в течение всего дня без возможности попить воды, воспользоваться туалетом или получить медицинскую помощь, несмотря на её преклонный возраст и наличие серьезных проблем со здоровьем. Давление в этот день у Зои Магомедовны поднялось до критического уровня (свыше 200), но просьбы о вызове врача игнорировались.
    На допросе следователи прибегли к тактике «доброго и злого полицейского». Следователь Мальцев грубо кричал на Зою Магомедовну, угрожая посадить её в подвал и лишить свободы. Его коллега, следователь Сапетова, в роли «доброго» следователя, пыталась склонить её к сотрудничеству, обещая свободу в обмен на подпись под заранее заготовленными протоколами. Зоя Магомедовна находилась в таком стрессе, что физически не могла читать документы, которые ей предлагали подписать, но Сапетова отказалась зачитывать их вслух.
    На судебных заседаниях выяснилось, что протокол допроса содержал ложные сведения, которые Зоя Магомедовна никогда не произносила. Более того, она заявила, что вообще не могла использовать предложенные формулировки, поскольку они противоречили её взглядам и фактам. Несмотря на это, прокуратура продолжает использовать этот документ как доказательство вины других фигурантов дела.
    Этот случай демонстрирует циничное пренебрежение к правам пожилых граждан, которые становятся жертвами грубого давления и манипуляций со стороны правоохранительных органов.
    Евгений Иорданиди
    66-летний офицер в отставке Евгений Иорданиди, человек с безупречной военной карьерой и наградами за службу, стал жертвой откровенно репрессивных действий правоохранительных органов. В ходе обыска в его доме сотрудники полиции грубо обращались с ним, нарушая не только его права, но и элементарные нормы человеческого достоинства. Во время допроса в ГСУ Евгения подвергли как физическому, так и моральному давлению. Следователи использовали запугивания и манипуляции, вынуждая его дать ложные показания против себя и других. Под воздействием этих методов он подписал документы, содержание которых не имел возможности тщательно изучить. Позже, уже в суде, Евгений отказался от своих показаний, заявив, что они были выбиты у него под угрозами.
    Дмитрий Выдрин
    Дмитрий Выдрин, водитель и консультант по продажам продуктов компании «Гермес», оказался в схожей ситуации. Его задержали и доставили в ГСУ, где под угрозой немедленного заключения в СИЗО следователи вынудили его оговорить не только себя, но и других фигурантов дела. Дмитрий надеялся, что такой шаг позволит ему избежать более строгой меры пресечения, однако позднее он осознал масштабы манипуляций и заявил о готовности отказаться от своих показаний как полученных под давлением и в результате морального воздействия.
    Шамиль Фахруллин
    Пенсионер Шамиль Зиннатович Фахруллин, который был клиентом компании «Гермес», также подвергся репрессивным действиям следователей. Во время жесткого допроса, сопровождавшегося угрозами и запугиваниями, его вынудили написать заявление, в котором он выступал в качестве потерпевшего. Вскоре после допроса, перенесшего на фоне сильнейшего психологического давления, Шамиль Зиннатович скончался. По словам адвокатов, его смерть, вызванная инфарктом, напрямую связана с перенесенной в ГСУ травмой, что подчеркивает цинизм и жестокость методов, применяемых в данном уголовном деле.
    Массовая фальсификация показаний
    Многочисленные свидетели в суде заявили, что их показания сфальсифицированы. Один из ключевых свидетелей обвинения, Алексей Комаров, не смог повторить «свои» показания, сославшись на провалы в памяти. Это подтверждает массовую фабрикацию доказательств со стороны следователей.
    Ущерб военным и ветеранам
    Кооператив «Бест Вей», созданный для решения жилищных проблем военных, стал объектом атаки МВД. Члены кооператива — ветераны и участники СВО — лишены средств, собранных на квартиры. Такое отношение МВД и прокуратуры к военным пенсионерам дискредитирует престиж армии в условиях вооруженного конфликта.
    Призыв к справедливости
    Незаконные действия следователей, запугивание граждан и использование методов, напоминающих репрессивные практики прошлого, требуют серьезного общественного и правового осуждения. Системное нарушение прав человека со стороны МВД и прокуратуры подрывает доверие к государственным институтам. Защитники закона и правосудия должны добиться привлечения виновных к ответственности в рамках закона.

  6. DanielAbice表示:

    http://amoxstar.com/# generic amoxicillin over the counter

  7. Prodamus – промокод на подключение http://www.kryto.ukrbb.net/viewtopic.php?f=2&t=1431=43 .

  8. промокод на продамус скидка подключение [url=http://vip.mybb.rocks/viewtopic.php?id=8484#p22318/]промокод на продамус скидка подключение[/url] .

  9. KennethPah表示:

    cheap clomid without rx clomidonpharm clomid no prescription

  10. SamuelBix表示:

    how can i get clomid without insurance: clomid on pharm – cheap clomid without prescription

  11. SamuelBix表示:

    prednisone 10mg for sale: PredniBest – prednisone online for sale

  12. If the rating is tied after ten blitz video games, a single sudden-loss of life “Armageddon game” will determine the champion.

  13. SamuelBix表示:

    cost cheap clomid without dr prescription: clomidonpharm – get generic clomid without prescription

  14. KennethPah表示:

    generic prednisone 10mg PredniBest price of prednisone 5mg

  15. DanielAbice表示:

    http://prednibest.com/# prednisone 40 mg rx

  16. Imitation rings studded with multicoloured beads, pearls, and stones are equally fashionable.

  17. DanielAbice表示:

    https://prednibest.com/# prednisone 7.5 mg

  18. Timsothyabela表示:

    Do you have a spam issue on this website; I also am a blogger, and I was curious about your situation; we have developed some nice practices and we are looking to exchange solutions with others, why not shoot me an e-mail if interested.

    https://kmural.ru/news_importer/inc/aktualnue_promokodu_bukmekerskoy_kontoru_fonbet.html

發佈留言

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