gruntjs開發實例

Grunt是基於Node.js的項目構建工具。它能夠自動運行你所設定的任務,如編譯less,sass,壓縮js,合拼文件等等。css

(一)安裝nodejs環境,Grunt 0.4.x要求Node.js的版本>=0.8.0,若是你已安裝了nodejs,命令行中運行node -v查看你的Node.js版本,若是版本號不夠,從新安裝覆蓋舊版本。
node

 

(二)若是你的公司是用代理上網,先命令行 npm set proxy=http://ip地址 ,而後命令行 npm install -g grunt-cli 將grunt植入到你的系統裏面,這樣就容許你從任意目錄來運行它(定位到任意目錄運行grunt命令),安裝grunt-cli並不等於安裝了grunt任務運行器!Grunt CLI的工做很簡單:在Gruntfile所在目錄調用運行已經安裝好的相應版本的Grunt。這就意味着能夠在同一臺機器上同時安裝多個版本的Gruntgit

 

(三)gruntjs的運行是依靠着package.jsonGruntfile.js這兩個文件配置,在你的項目根目錄新建此 2 個文件,格式以下:github

  (1)package.json  在此文件寫入你項目所依賴的Grunt版本和Grunt插件,例子:npm

{
  "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版本號與各插件 (名城:版本號,能夠在官網查看相關的名稱與版本號),更多插件查看json

  (2)在此項目根目錄 shift + 右鍵 -> 在此處打開命令行,npm installsass

  

  在根目錄自動生成一個 node_modules的文件夾,裏面就是你須要的grunt插件,到這步 grunt版本與插件都安裝好了,下一步就是配置Gruntfile.jsless

  (3)配置工做流Gruntfile.jsgrunt

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,一切都自動化。

 

(五)注意事項:

  (1)使用uglify壓縮的js文件是utf-8編碼的,若是你的頁面是gb2312,若是你的js代碼有輸出中文如:document.getElementById('demo').innerHTML = '中文';那麼頁面就出現亂碼

     解決:插件提供參數:ASCIIOnly:true,將中文文字轉爲ASCII碼,而後js文件裏面的代碼輸出就是  document.getElementById("demo").innerHTML="\u4e2d\u6587";

uglify:{
      options: {
        ASCIIOnly:true
      }
}

  (2)使用cssmin,默認狀況下,會把css_hack,如ie6的屬性去掉;

             解決:

cssmin: { 
    options : { 
        compatibility : 'ie8', //設置兼容模式 
        noAdvanced : true //取消高級特性 
    }
}

 

(六)經常使用插件 

grunt-spritesmith //圖片合拼與生成代碼片斷
grunt-contrib-watch //實時監聽文件,執行任務
grunt-contrib-cssmin //樣式合拼與壓縮
grunt-contrib-uglify //腳步合拼與壓縮

 

貼上一個配置例子,僅供參考:

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']);

};
相關文章
相關標籤/搜索