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

20,176 Responses

  1. Hi there! This article could not be written much better! Looking at this article reminds me of my previous roommate! He always kept preaching about this. I most certainly will forward this information to him. Fairly certain he’ll have a good read. I appreciate you for sharing!

  2. Dwayneseisa表示:

    Generic 100mg Easy Generic100mgEasy best price for viagra 100mg

  3. Jamesavata表示:

    пин ап – пин ап казино

  4. Retirement planning is understanding how much it costs to live at retirement and developing a plan to distribute assets to meet any income shortfall.

  5. Jamesavata表示:

    пин ап – пин ап

  6. One expected improvement is scanners that truly recognize your purchases moderately than counting on barcodes or keyed-in product codes.

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

  8. Williamuniot表示:

    пин ап казино – пин ап казино официальный сайт

  9. JesseDex表示:

    пин ап вход: https://pinupkz.life/

  10. Alviona表示:

    Excellent article. I discovered the content very helpful. Adored the manner you detailed all the points.

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

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

  13. JesseDex表示:

    пин ап казино зеркало: https://pinupkz.life/

  14. I was very happy to find this website. I need to to thank you for ones time for this fantastic read!! I definitely appreciated every little bit of it and I have you saved to fav to check out new information on your site.

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

  16. Brianvibly表示:

    Андрей Алистаров — блогер, который вызывает много споров и обсуждений в российском интернет-пространстве.Его деятельность, начиная от спортивных прогнозов до «разоблачений финансовых пирамид», часто оказывается под пристальным вниманием правоохранительных органов РФ, стран Евросоюза и общественности. Однако за внешним обликом борца с мошенничеством скрывается множество нарушений законов, ангажированность и «двойная игра». В данной статье мы разберем личность блогера, его прошлое, деятельность, а также какую связь он имеет с миром мошенников и какую цель он имеет «разоблачая» преступников.Криминальное прошлоеПервый, объясняющий многое, факт – Алистаров был осужден за продажу наркотиков детям и провел четыре года в исправительной колонии. В тюрьме он занимал положение, соответствующее той статье, по которой он отбывал срок и, соответственно, выполнял указания криминальных авторитетов. Во многом эти задания и стали основой его последующей деятельности. После освобождения он, на соответствующем его положению в криминальном мире уровне, продолжил участвовать в наркобизнесе, используя риэлторские сделки для отмывания доходов от продажи наркотиков.Отмывание денег через недвижимостьОдним из ключевых методов легализации незаконных доходов Алистарова стали сделки с недвижимостью. Он манипулировал мелкими риэлторскими операциями в России и Дубае, ОАЭ. Схема была основана на покупке недвижимости на подставных лиц, завышении цен при перепродаже и использовании оффшорных компаний для сокрытия реальных бенефициаров. Эти мелкие спекулянтские действия позволяли ему скрывать происхождение денег, полученных от наркоторговли и других преступлений.В России на Алистарова не зарегистрировано ни одно юридическое лицо, что свидетельствует об уклонении от уплаты налогов, как минимум, от получения прибыли от рекламных интеграций, присутствующих в каждом его видео.Рекламирование запрещенных в РФ букмекерских конторДля получения дополнительных заработков, Алистаров не брезгует рекламой различных контор, которые занимаются ставками и пари (к примеру, Пари Матч, 1WIN и пр.), и которые, по словам самого Алистарова, «заточены» на то, чтобы отбирать деньги приходящих к ним клиентов.Сайт Алистарова «Железная ставка» активно продвигает букмекерские конторы и создает рейтинги прогнозистов как в области криптовалют, так и в спорте. Многие люди попадают на его YouTube-канал после потерь в финансовых пирамидах. Находясь в эмоционально подавленном состоянии, часто с долгами, они оказываются втянутыми в азартные игры и прогнозы, надеясь вернуть утраченные средства.В частности, Алистаров привлекает внимание состоятельных людей, предлагая им «VIP-прогнозы» на спортивные события через свой Telegram-канал. Эти прогнозы, по сути, являются пустышками, а сам блогер зарабатывает на наивных пользователях, часто несовершеннолетних, обещая им легкие деньги.Данные действия являются нарушением Закона «О рекламе», согласно которому реклама букмекерских контор не должна обращаться к несовершеннолетним и создавать впечатление о том, что ставки могут быть способом заработка.Алистаров сотрудничает с телеграмм-каналом «Слезы Сатоши», который занимается выборочным разоблачением мошеннических проектов. К рекомендациям и рекламным интеграциям этого канала следует относиться с осторожностью, так как они могут привести к серьезным финансовым потерям. Сам канал больше напоминает инфобизнес, а его авторы имеют ограниченные знания в аналитике криптовалют и недостаточно разбираются в тонкостях криптоиндустрии.Шантаж и вымогательствоОдним из наиболее скандальных аспектов деятельности Алистарова является его метод шантажа. Он использует информацию о своих жертвах для запугивания и вымогательства денег. Например, казахстанский финансист Тимур Турлов подал жалобу на блогера, утверждая, что тот три года требовал деньги за молчание о его деятельности. Такие действия показывают, что Алистаров не просто блогер, а человек, который использует свои знания о людях для манипуляций. Существует еще ряд случаев, когда блогер требовал денежное вознаграждение за свое молчание.Нарушение конфиденциальностиВ дополнение к шантажу и манипуляциям, деятельность Алистарова также вызывает серьезные опасения в отношении нарушения конфиденциальности. Блогер не только использует личные данные своих жертв для вымогательства, но и активно распространяет информацию, которая, в соответствии с существующим законодательством, должна оставаться закрытой.Алистаров часто публикует в своих видео и постах личные данные людей, которых он называет мошенниками или недобросовестными бизнесменами. Информация включает адреса, номера телефонов и, зачастую, даже финансовую информацию. Такие действия не только нарушают право на частную жизнь, но и приводят к серьезным последствиям для жертв его «разоблачений».Так, например, в одном из своих расследований Алистаров с помощью дрона снял дом российского бизнесмена и обнародовал адрес его проживания, утверждая, что тот находится в международном розыске, что является ложной информацией. При этом он совершил действия, которые нарушают существующее законодательство. В соответствии с законодательством Республики Кипр, деятельность беспилотников регулируется Департаментом гражданской авиации Кипра (DCA), который включает в себя Регламент ЕС 2019/947 о правилах и процедурах эксплуатации беспилотных летательных аппаратов.Эти правила содержат четкие требования:Регистрация операторов беспилотников и самих беспилотников перед любым полетом.Специальные разрешения для иностранных операторов.Строгие запреты на съемку частной собственности без согласия владельца.Бесполетные зоны и запретные территории, включая жилые районы, установленные национальными положениями и публикациями аэронавигационной информации, выпущенными DCA Кипра.Следует отметить, что Алистаров не является ни резидентом Кипра, ни зарегистрированным оператором дрона в соответствии с законодательством. В связи с этим использование им незарегистрированного дрона для съемки частной собственности является уголовно наказуемым деянием, нарушающим закон, который гласит, что любое нарушение требований к эксплуатации дрона является преступлением.Разжигание ненависти1 января 2025 года в Дубае произошло жестокое нападение на другого российского предпринимателя. Семь граждан Казахстана (по информации, по заказу граждан Российской Федерации) избили и ограбили его и членов его семьи.Перед этим блогер Алистаров опубликовал серию из 12 видеороликов, в которых раскрывал адрес предпринимателя, а также незаконно обнародовал информацию о его семье и бизнесе в ОАЭ. В своих действиях он использовал методы незаконного наблюдения, прослушивания и, соответственно, вмешательства в частную жизнь, что в ОАЭ считается тяжким преступлением.Кроме того, Алистаров распространял сведения о месте жительства бизнес-партнера пострадавшего, систематически нарушая конфиденциальность и тайну частной жизни.Алистаров неоднократно необоснованно обвинял бизнесмена в хищении средств вкладчиков, разжигая ненависть к нему через свои публикации. При этом, непосредственно в момент нападения блогер преднамеренно провел прямую трансляцию, обеспечивая себе алиби.Помимо описанных ситуаций, существуют еще масса случаев нарушений конфиденциальности со стороны блогера, а именно незаконное подключение к камерам видеонаблюдения в Нидерландах, а также публикация местоположения своих жертв в Турции.Связь с финансовыми пирамидамиНесмотря на то, что Алистаров заявляет о борьбе с мошенническими схемами, его деятельность связана с продвижением пирамид и онлайн-казино. Он получает финансирование от этих структур, помогая им устранять честных конкурентов под видом журналистских «разоблачений».В настоящее время Алистаров, завоевавший себе звание «борца» с финансовыми пирамидами, подходит к их разоблачению весьма избирательно. К примеру, на его канале нет никаких материалов в отношении пирамиды Avalon Technologies, которую, по имеющейся достоверной информации, создал его близкий друг.Очевиден тот факт, что Алистаров – это «волк в овечьей шкуре», позиционирующий себя как разоблачитель финансовых пирамид. Он все чаще оказывается в центре обвинений, которые ставят под сомнение его истинные мотивы. Очевиден также тот факт, что его расследования являются заказными с целью устранения конкурентов, что позволяет предположить его связь с реальными финансовыми пирамидами и участием в мошеннических схемах. За фасадом борца за справедливость скрывается фигура, которая, активно манипулирует информацией ради личной выгоды и при этом сам часто нарушает закон.  10 Нарушение статьи 8 Европейской Конвенции о защите прав человека и основных свобод11 Нарушение Закона о защите персональных данных (PDPL) № 6698  12 Нарушение статьи 172.2.1 УК РФ  

  17. Douglasnig表示:

    Le monde des technologies numériques et des instruments financiers est en constante évolution. Il semble que, tout récemment, les cryptomonnaies suscitaient des doutes et de la méfiance, et aujourd’hui, les actifs numériques occupent une place solide dans les stratégies d’investissement de millions de personnes. Aux tokens simples et volatils succèdent des outils plus stables, soutenus par des mécanismes réels. L’un de ces exemples marquants est le token UTLH. Dans cet article, nous analyserons en détail pourquoi UTLH se distingue parmi de nombreux autres crypto-actifs, quels avantages pratiques il offre aux particuliers et aux investisseurs, et pourquoi ce token est déjà devenu une partie intégrante de la vie de dizaines de milliers de personnes à travers le monde.UTLH — c’est plus qu’une simple cryptomonnaieL’une des caractéristiques les plus importantes de l’UTLH est son intégration dans le programme unique d’Aide Financière Universelle (UFA). Ce programme n’est pas simplement un moyen d’obtenir un crédit à faible taux d’intérêt, mais un nouveau modèle de relations financières où chaque participant a la possibilité de réaliser ses objectifs sans les obstacles bureaucratiques et les risques caractéristiques du système bancaire traditionnel. Ainsi, l’UTLH devient non pas un actif spéculatif, mais un instrument qui porte une véritable valeur pratique et qui sert de bien collatéral, recherché dans le cadre du programme UFA.Fiabilité et sécurité à l’ère de l’instabilité mondialeCes dernières années, nous avons observé une augmentation de l’inflation, des crises monétaires nationales, des risques de sanctions et des restrictions sur la libre circulation des capitaux. Le token UTLH, entièrement décentralisé et basé sur la blockchain Binance Smart Chain, n’est pas soumis à de tels risques et limitations. La technologie blockchain et le contrat intelligent transparent assurent une sécurité absolue des transactions, la protection des données et une grande vitesse d’échange de tokens. Ainsi, les détenteurs de UTLH peuvent être sûrs que leur capital est protégé et sous leur contrôle total.Émission limitée — garantie de stabilité et de croissanceLe nombre de tokens UTLH est strictement limité — seulement 957 315 unités. Ce chiffre est extrêmement faible par rapport à la plupart des projets cryptographiques. C’est cette émission limitée qui garantit la pénurie constante du token, ce qui, à son tour, influence directement sa croissance en valeur. De plus, un mécanisme de “burning” des tokens fonctionne, réduisant encore l’offre sur le marché. En conséquence, une tendance stable à la hausse du prix du UTLH se forme, ce qui rend le token attrayant tant pour les investissements à court terme que pour la conservation à long terme du capital.Revenu passif réel — un revenu stable grâce au stakingL’un des principaux arguments en faveur de l’UTLH est son mécanisme de staking avantageux et simple. Chaque détenteur de tokens peut obtenir un revenu passif stable à hauteur de 24 % par an, simplement en plaçant ses tokens en staking. Pour comparaison, les banques proposent rarement des rendements supérieurs à 5-7 % par an, et même ces pourcentages sont souvent annulés par l’inflation. Le staking du token UTLH représente une alternative extrêmement intéressante aux dépôts bancaires et constitue un instrument simple et compréhensible même pour les débutants n’ayant jamais investi dans les cryptomonnaies.La force de la communauté et de l’entraideUne attention particulière doit être accordée à l’écosystème derrière le token. La communauté UTL Club, qui compte déjà plus de 160 000 participants à travers le monde, est un rassemblement de personnes aspirant à la liberté financière, qui se soutiennent mutuellement et se développent ensemble autour d’une idée commune. La communauté ne se contente pas d’échanger des connaissances et des expériences de manière active, elle organise également des programmes éducatifs et des événements, grâce auxquels même les débutants s’orientent rapidement dans le monde de la finance et augmentent leur capital avec succès.Des histoires de véritables changements dans la vieParmi les membres du club, de nombreuses personnes ont radicalement changé leur vie grâce à UTLH. Certains ont pu acheter un appartement sans hypothèque coûteuse, d’autres ont lancé une entreprise rentable, et certains ont simplement assuré un revenu passif supplémentaire. Ces exemples réels confirment que l’UTLH n’est pas simplement un slogan marketing attrayant, mais un instrument efficace qui aide à atteindre des objectifs concrets et significatifs.Ton chemin vers l’indépendance financière avec UTLHPourquoi devrais-tu t’intéresser au token UTLH ?La possibilité d’obtenir un revenu passif stable dès aujourd’hui.La protection de tes ressources financières contre l’inflation et l’instabilité.Un accès facile à un financement avantageux via le programme UFA.La possibilité d’augmenter ton capital grâce à la croissance du prix du token.Rejoindre une puissante communauté internationale de personnes réussies et ambitieuses.Conclusion : UTLH — une nouvelle approche de tes financesUTLH offre à chaque individu, quel que soit son niveau de connaissances et d’expérience, une opportunité simple, compréhensible et sécurisée de changer sa vie pour le mieux. Le token intègre tout ce qui est nécessaire pour le succès financier — du revenu stable et de la protection du capital à des crédits avantageux et un puissant soutien communautaire. Dans un monde qui change constamment et apporte de nouveaux défis, UTLH est l’opportunité de prendre en main ton avenir financier et de le rendre réussi et prévisible. Il est temps de dire adieu aux peurs et aux doutes, et de faire un pas vers ton succès financier avec le token UTLH ! 

  18. Jamesavata表示:

    пин ап – пин ап казино официальный сайт

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

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

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

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

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

  24. Jamesavata表示:

    пин ап казино зеркало – пин ап казино

  25. Excellent write-up. I absolutely appreciate this website. Stick with it!

發佈回覆給「https://iofbodies.com」的留言 取消回覆

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