gruntjs 是一個基于nodejs的自動化工具，只要熟悉nodejs或者又一定js經驗就可以熟練應用。
最近很火的前端自動化小工具，基于任務的命令行構建工具 http://gruntjs.com

我們需要一個自動化的工作流程，讓我們更專注于coding，而不是coding外的繁瑣工作。于是Grunt應運而生。可以想像，如果在node環境下，一行命令搞定一個場景，So Cool…

package.json //項目自動化所依賴的相關插件。
Gruntfile.js //項目自動化工作流配置文件，重要

安裝

• 確保已經安裝node和npm
• 然后安裝grunt的客戶端命令行工具 npm install -g grunt-cli, 安裝完之后就有了grunt
  壓縮css js和合并文件需要grunt插件，grunt只是一個平臺，完成各項任務有對應的插件。
• grunt插件十分豐富，其中帶contrib的為官方插件 其他的為第三方插件

安裝grunt插件

• 方式1 在工程目錄中創建一個package.json文件，列出依賴的插件和對應的版本即可
  然后cd到工程目錄下 執行 npm install
• 方式2 使用命令行工具 npm install grunt-contrib-watch --save-dev

創建gruntjs工程文件
gruntjs支持兩種語言創建工程文件： gruntfile.js或者gruntfile.coffee
grunt工程文件遵循node模塊定義方式，主題結構為：

module.exports = function(grunt){grunt.initConfig({clean:{a:['<%=temp%>'] },b:['<%=temp%>']});//獲取工程中需要的插件grunt.loadNpmTasks('grunt-contrib-clean');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-watch');grunt.loadNpmTasks('grunt-contrib-copy');grunt.loadNpmTasks('grunt-contrib-includes');//注冊任務grunt.registerTask('build', ['clean','uglify','cssmin','includes','copy','clean']);//在命令行中執行grunt,就會使用默認任務grunt.registerTask('default',['build']); //一個完整的gruntjs工程文件 module.exports = function(grunt){var rt = 'src-dev/',indexDir = rt + 'index/',tempDir = rt + 'temp/';console.log(grunt.option('keys'));grunt.file.exists(tempDir) && grunt.file.delete(tempDir);grunt.file.markdir(tempDir);grunt.initConfi({pkg: grunt.file.readJSON('package.json');rt: rt,tempDir: tempDir,indexDir = indexDir,clear: { build:['<%=temp%>']},jsdoc:{dist:{src:'<%=index%>doc.js',options:{destination:'<%=rt%>../out/'}}},cssmin:{combine:{files:{'<%=temp%>c.min.css':['<%=rt%>common/reset.css', '<%=index%>c.css']}}},includes:{files:{sr:['<%=rt%>**/*.html'],dest:'<%=temp%>',cwd:'.',flatten:true,options{banner:''}}},watch:{files:['<%=index%>j.js','<%=index%>*.html', '<%=index%>c.css']tasks:['clean','uglify','cssmin','includes','copy','clearn'],options:{ livereload:true}},uglify:{dist:{files:{'<%=temp%>j.js', ['<%=index%>*.js']}}},copy:{main:{files:[{flatten: true,expand: true,filter:'isFile',src:['<%=temp%>index.html'],dest='<%=rt%>../src/'}]}}//獲取工程中需要的插件grunt.loadNpmTasks('grunt-contrib-clean');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-watch');grunt.loadNpmTasks('grunt-contrib-copy');grunt.loadNpmTasks('grunt-contrib-includes');//注冊任務grunt.registerTask('build', ['clean','uglify','cssmin','includes','copy','clean']);//在命令行中執行grunt,就會使用默認任務grunt.registerTask('default',['build']);

總結

以上是生活随笔為你收集整理的grunt学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。