grunt學習筆記

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

咱們須要一個自動化的工做流程，讓咱們更專一於coding，而不是coding外的繁瑣工做。因而Grunt應運而生。能夠想像，若是在node環境下，一行命令搞定一個場景，So Cool…

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

1. 安裝
   • 確保已經安裝node和npm
   • 而後安裝grunt的客戶端命令行工具 npm install -g grunt-cli, 安裝完以後就有了grunt
     壓縮css js和合並文件須要grunt插件，grunt只是一個平臺，完成各項任務有對應的插件。
   • grunt插件十分豐富，其中帶contrib的爲官方插件 其餘的爲第三方插件
2. 安裝grunt插件
   • 方式1 在工程目錄中建立一個package.json文件，列出依賴的插件和對應的版本便可
     而後cd到工程目錄下 執行 npm install
   • 方式2 使用命令行工具 npm install grunt-contrib-watch --save-dev

3. 建立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']);