gruntjs開發執行個體

gruntjs開發執行個體
Grunt是基於Node.js的項目構建工具。它可以自動運行你所設定的任務，如編譯less，sass，壓縮js，合拼檔案等等。 （一）安裝nodejs環境，Grunt 0.4.x要求Node.js的版本>=0.8.0，如果你已安裝了nodejs，命令列中運行node -v查看你的Node.js版本，如果版本號碼不夠，重新安裝覆蓋舊版本。     （二）如果你的公司是用代理上網，先命令列 npm set proxy=ip地址 ，然後命令列 npm install -g grunt-cli 將grunt植入到你的系統裡面，這樣就允許你從任意目錄來運行它(定位到任意目錄運行grunt命令)，安裝grunt-cli並不等於安裝了grunt任務運行器！Grunt CLI的工作很簡單：在Gruntfile所在目錄調用運行已經安裝好的相應版本的Grunt。這就意味著可以在同一台機器上同時安裝多個版本的Grunt   （三）gruntjs的運行是依靠著package.json和Gruntfile.js這兩個檔案配置，在你的項目根目錄建立此 2 個檔案，格式如下: 　　（1）package.json  在此檔案寫入你項目所依賴的Grunt版本和Grunt外掛程式，例子：    "name": "pcauto",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.5",    "grunt-contrib-less": "~0.11.4",　　"grunt-contrib-watch": "~0.6.0"  }} 　　name ：項目的名稱，version：項目的版本號碼（這些都是隨意的），devDependencies：設定grunt版本號碼與各外掛程式 （名城：版本號碼，可以在官網查看相關的名稱與版本號碼），更多外掛程式查看 　　（2）在此項目根目錄 shift + 右鍵 -> 在此處開啟命令列，npm install 　　     　　在根目錄自動產生一個 node_modules的檔案夾，裡面就是你需要的grunt外掛程式，到這步 grunt版本與外掛程式都安裝好了，下一步就是配置Gruntfile.js 　　（3）配置工作流程Gruntfile.js  module.exports = function(grunt) {   // Project configuration.  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    less: {            dev: {          files:{            'css/index.css':'less/index.less',            'css/page.css':'less/page.less'          }      }    },    watch:{      less:{          files:['less/*.less'],          tasks:['less']      }    }  });   // 載入包含 "uglify" 任務的外掛程式。  grunt.loadNpmTasks('grunt-contrib-less');  grunt.loadNpmTasks('grunt-contrib-watch');   // 預設被執行的工作清單。  grunt.registerTask('default', ['less','watch']); }; 　　【1】pkg: grunt.file.readJSON('package.json')  就是把在剛配置好的json資料匯入到Grunt配置中 　　【2】外掛程式調用配置 less: {            dev: {          files:{            'css/index.css':'less/index.less',            'css/page.css':'less/page.less'          }      }} 　　　手動設定：調用配置，less 中，指定了名為dev（自訂，必需）的任務，然後執行多檔案處理，格式為 files:{'xxxx輸出的css檔案路徑與檔案名稱':'xxx你所編寫的less檔案','xxxx':'xxxxx'} 　　自動匹配模式  less: {      dev: {        files: [{          expand: true,          cwd: 'less/',          src: ['*.less'],          dest: 'css/',          ext: '.css'        }]      }}　 更詳細的配置 　　　　　為了避免每次編譯都要運行一個命令列，這裡有個很好的外掛程式 watch，它能即時監控（如例子中在watch任務中監控less檔案夾下的所有less檔案，一旦代碼有發生改變，就自動執行less編譯任務，就不需要每次運行 grunt命令列。註：開始只需要運行一次 grunt命令列，然後視窗不要關閉，保持開啟的狀態，如。） 　　【3】載入任務外掛程式   grunt.loadNpmTasks('grunt-contrib-less');  grunt.loadNpmTasks('grunt-contrib-watch'); 　　【4】定義被執行的工作清單   grunt.registerTask('default', ['less','watch']);   (預設任務，如果你的名稱是 grunt.registerTask('yong', ['less','watch'])，那麼在下一步中運行命令列就是grunt yong)  　　到這裡，已經全部都配置好，下一步就是運行 （四）在此項目根目錄 shift + 右鍵 -> 在此處開啟命令列，grunt 　　 　　在之前的時代，編譯less，壓縮檔，與合拼檔案，都需要藉助不同的工具逐個逐個任務執行完成，效率很低，如今有了 Grunt，一切都自動化。   貼上一個配置例子，僅供參考： package.json  {  "name": "pcauto",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.5",    "grunt-contrib-less": "~1.0.0",    "grunt-contrib-uglify": "~0.7.0",    "grunt-contrib-imagemin":"~0.9.0",    "grunt-contrib-cssmin": "~0.7.0",    "grunt-contrib-watch": "~0.6.0"  }}   Gruntfile.js  module.exports = function(grunt) {   // Project configuration.  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    //less編譯為css    less: {      dev: {        files: [{          expand: true,          cwd: 'src/less/',          src: ['*.less'],          dest: 'src/css/',          ext: '.css'        }]      }    },    //css檔案壓縮    cssmin:{      dev:{       files: [{          expand: true,          cwd: 'src/css/',          src: ['*.css', '!*.min.css'],          dest: 'css/',          ext: '.min.css'        }]      }    },    //壓縮js檔案    uglify:{      options: {        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd hh:mm") %> */\n'      },      dev:{        files:[{          expand:true,          cwd:'src/js/',          src:'*.js',          dest:'js/',          ext: '.min.js'        }]      }    },    //圖片壓縮    imagemin:{      dev:{        files:[{         expand: true,                            cwd: 'src/image/',                             src: ['*.{png,jpg}'],             dest: 'image/'                          }]      }    },    //即時監控任務    watch:{      less:{          files:['src/less/*.less'],          tasks:['less']      },      uglify:{          files:['src/js/*.js'],          tasks:['uglify']      },      cssmin:{          files:['src/css/*.css'],          tasks:['cssmin']      },      imagemin:{          files:['src/image/*.{png,jpg}'],          tasks:['imagemin']      }    }  });   // 載入包含 "uglify" 任務的外掛程式。  grunt.loadNpmTasks('grunt-contrib-less');  grunt.loadNpmTasks('grunt-contrib-watch');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-cssmin');  grunt.loadNpmTasks('grunt-contrib-imagemin');   // 預設被執行的工作清單。  grunt.registerTask('default', ['less','cssmin','uglify','imagemin','watch']); };