Grunt的初級應用

時間 2019-11-22

標籤 grunt 初級應用欄目 Node.js 简体版

原文原文鏈接

Grunt是什麼呢?css

Grunt是JavaScript世界的構建工具.爲何要用構建工具?一句話:自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。html

爲何要使用Grunt?web

Grunt生態系統很是龐大，而且一直在增加。因爲擁有數量龐大的插件可供選擇，所以，你能夠利用Grunt自動完成任何事，而且花費最少的代價。若是找不到你所須要的插件，那就本身動手創造一個Grunt插件，而後將其發佈到npm上吧。npm

Grunt和 Grunt 插件是經過 npm 安裝並管理的，npm是 Node.js 的包管理器。svg

Grunt 0.4.x 必須配合Node.js >= 0.8.0版本使用。；奇數版本號的 Node.js 被認爲是不穩定的開發版。grunt

在安裝 Grunt 前，請確保當前環境中所安裝的 npm 已是最新版本，執行 npm update -g npm 指令進行升級（在某些系統中可能須要 sudo 指令）。工具

若是你已經安裝了 Grunt，如今須要參考一些文檔手冊，那就請看一看 Gruntfile實例和如何配置任務吧。單元測試

在繼續學習前，你須要先將Grunt命令行（CLI）安裝到全局環境中。安裝時可能須要使用sudo（針對OSX、*nix、BSD等系統中）權限或者做爲管理員（對於Windows環境）來執行如下命令。學習

npm install -g grunt-cli測試

上述命令執行完後，grunt 命令就被加入到你的系統路徑中了，之後就能夠在任何目錄下執行此命令了。

注意，安裝grunt-cli並不等於安裝了 Grunt！Grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，容許你在同一個系統上同時安裝多個版本的 Grunt。

下面咱們來看看具體的代碼吧:

建立一個grunt的方法

module.exports=function(grunt){

引入你要幹嘛的一個插件
　　grunt.loadNpmTasks('grunt-contrib-uglify');
　　grunt.loadNpmTasks('grunt-contrib-cssmin');
　　grunt.loadNpmTasks('grunt-contrib-concat');
　　grunt.loadNpmTasks('grunt-contrib-htmlmin');
　　grunt.loadNpmTasks('grunt-contrib-imagemin');
　　grunt.loadNpmTasks('grunt-contrib-jshint');
　　grunt.loadNpmTasks('grunt-contrib-watch');
　grunt.initConfig({
　　uglify:{
　　　　yasuo:{
　　　　　　options:{
　　　　　　　　mangle:false
　　　　　　},
　　　　　　expand:true,
　　　　　　cwd:"development/abc",
　　　　　　src:'*.js',
　　　　　　dest:'a'
　　　　}
　　},

　　cssmin:{
　　　　yasuo1:{
　　　　　　expand:true,
　　　　　　cwd:'development/abc',
　　　　　　src:'*.css',
　　　　　　dest:'a'
　　　　}
　　},
　　concat:{
　　　　hebing:{
　　　　src:"dest1/*.min.css",
　　　　dest: "dest4/he.css"
　　　　}
　　},
　　htmlmin: {
　　　　options: {
　　　　　　removeComments: true,//清除html中註釋的部分
　　　　　　removeCommentsFromCDATA: true,
　　　　　　collapseWhitespace: true,//清空空格
　　　　　　collapseBooleanAttributes: true,//省略布爾值屬性的值
　　　　　　removeAttributeQuotes: true,
　　　　　　removeRedundantAttributes: true,//清空全部的空屬性
　　　　　　removeEmptyAttributes: true,//清除全部LINK標籤上的type屬性
　　　　　　removeOptionalTags: true //是否清除<html></html>和<body></body>標籤
　　　　},
　　　　yasuo2: {
　　　　　　expand: true,
　　　　　　cwd: 'development/abc',
　　　　　　src: '*.html',
　　　　　　dest: 'a',
　　　　　　rename:function(dest2,html){
　　　　　　return dest2+'/'+html.replace('.html','.min.html');
　　　　}
　　}
},
　　　　imagemin:{
　　　　　　options:{
　　　　　　　　optimizationLevel: 3 //定義 PNG 圖片優化水平
　　　　　　},
　　　　　　yasuo3: {
　　　　　　　　expand: true,
　　　　　　　　cwd: 'development/images',
　　　　　　　　src: '*.{png,jpg,jpeg,gif,webp,svg}',
　　　　　　　　dest: 'dest3'
　　　　　　　　}
　　　　　　},
　　　　jshint:{
　　　　　　jiance:[
　　　　　　　　'src/*.js'
　　　　　　　　],
　　　　　　},
　　　　watch:{
　　　　　　jiant:{
　　　　　　　　files:['src/*.js','css/*.css','html/*.html','img/*.{png,jpg,jpeg,gif,webp,svg}','src/*.js'],
　　　　　　　　tasks:['uglify','cssmin','concat','htmlmin','imagemin','jshint']
　　　　　　}
　　　　}

　　})
　　grunt.registerTask("default",['uglify','cssmin','concat','htmlmin','imagemin','jshint','watch']);
}