Grunt 的簡單使用

我們建立乙個檔案，然後初始化 package.json，新增 grunt 模組

yarn init -y

yarn add grunt -d

module.exports = grunt => )

}

yarn grunt foo // 輸出 hello grunt

grunt.registertask('default', '任務描述', () => )

yarn grunt // 輸出 default task

grunt.registertask('default', ['foo', 'bar'])

grunt.registertask('async-task', function() , 1000)

})

grunt.registertask('bad', () => )

如果我們有多個任務，序列執行，那麼失敗的任務之後的任務都不會被執行

grunt.registertask('bad', () => )

grunt.registertask('foo', () => )
grunt.registertask('bar', () => )
grunt.registertask('default', ['foo', 'bad', 'bar'])

除了 registertask 處理任務的方法，grunt 還有乙個 initconfig 初始化配置選項的 api

grunt.initconfig(

})grunt.registertask('foo', () => )

yarn grunt foo // 輸出 123

grunt.initconfig(,

css: 
},js: '2'
}})// 多目標模式，可以讓我們根據配置形成多個子任務
grunt.registermultitask('build', function() , data: $`)
})

grunt 的常見的外掛程式使用

grunt 提供的強大的外掛程式，這些外掛程式內部都封裝了一些通用的任務，下面我們來看看怎麼使用它們

yarn add grunt-contrib-clean

grunt.initconfig(

})grunt.loadnpmtasks('grunt-contrib-clean')

yarn grunt clean

yarn add grunt-sass sass -d

const sass = require('sass')

module.exports = grunt => ,
main: }},
})grunt.loadnpmtasks('grunt-sass')
}

yarn grunt sass

yarn grunt grunt-babel @babel/core @babel/preset-env -d

yarn add load-grunt-tasks -d

const sass = require('sass')

const loadgrunttasks = require('load-grunt-tasks')
module.exports = grunt => ,
main: }},
babel: ,
main: }},
})// grunt.loadnpmtasks('grunt-sass')
loadgrunttasks(grunt) // 自動載入所有的 grunt 外掛程式的中的任務
}

yarn grunt babel

yarn add grunt-contrib-watch -d

const sass = require('sass')

const loadgrunttasks = require('load-grunt-tasks')
module.exports = grunt => ,
main: }},
babel: ,
main: }},
watch: ,
css: }})
// grunt.loadnpmtasks('grunt-sass')
loadgrunttasks(grunt) // 自動載入所有的 grunt 外掛程式的中的任務
grunt.registertask('default', ['sass', 'babel', 'watch'])
}

yarn grunt

上面就是 grunt 的基本使用，其實我們對於 grunt 只需要了解就可以了，不需要在這上面消耗太多的精力，因為現在基本沒有使用 grunt 的專案了，除非一些"史前"的專案。當然我們如果你了解 grunt 的話，對於你學習 gulp 是有一定幫助的，因為它們之間的語法會有一些相似的地方。

前端自動化 grunt的簡單使用

現在前端自動化已經是家常便飯，各種工具也是層出不窮，grunt gulp webpack是應用最廣的三種工具，雖然grunt看似已垂垂老矣，但是以前寫的很多專案一直用的就是grunt，溫故方能知新，這裡把grunt的基本操作再記錄一下。開始使用grunt很簡單，在專案的根目錄中新增兩份檔案 pack...

生成環境中grunt的壓縮使用

1.package.json dependencies devdependencies keywords kxll mweb author cheonghu license isc 2.gruntfile.js module.exports function grunt src pkg.mweb t...

Grunt環境搭建和簡單壓縮嘗試

當然了，得先安裝nodejs的npm管理 node v 顯示node版本 npm v 顯示npm包管理工具 安裝grunt構建工具，先全域性安裝後進入專案安裝grunt npm install g grunt cli npm install g grunt 3 問題 進入專案目錄檢視grunt的安裝...