自動化建構工具Grunt

Grunt

1 .項目建構

了解：

什麼是項目建構？

• 編譯項目中的js、sass、less
• 合并js/css等資源檔案
• 壓縮js/css/html等資源檔案
• JS文法檢查
• 。。。。。

建構工具的作用？

• 簡化項目建構、自動化完成建構

建構工具

Grunt、Gulp、Webpack

2.Grunt

中文首頁

是一套前端自動化建構工具

建立一個簡單的應用grunt_test

• 目錄結構

//全局安裝 grunt-cli
npm install -g grunt-cli

//安裝grunt
npm install grunt --save-dev
           

• 插件分類

grunt團隊貢獻的插件：插件名大都以contribut- 開頭

第三方提供的插件：大都不以contrib- 開頭

常用的插件

grunt-contrib-clean  //清除檔案（打包處理生成的）

grunt-contrib-concat //合并多個檔案的代碼到一個檔案中

grunt-contrib-uglify //壓縮js問件

grunt-contrib-jshint //JavaScript文法錯誤檢查

grunt-contrib-cssmin //壓縮/合并css檔案

grunt-contrib-htmlmin //壓縮html檔案

grunt-contrib-imagemin //壓縮圖檔檔案（無損）

grunt-contrib-copy    //複制檔案、檔案夾

grunt-contrib-watch   //實時監控檔案變化、調用相應的任務重新執行
           

• 使用concat插件

//安裝插件
npm install grunt-contrib-concat --save-dev

//配置任務
grunt.initConfig({
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['./src/js/*.js'],
        dest: './build/js/build.js',
      },
    },
  });

//注冊任務
grunt.loadNpmTasks('grunt-contrib-concat');

//指令
grunt concat
           

• 壓縮js：使用uglify插件

//安裝插件
npm install grunt-contrib-uglify --save-dev

//配置任務
pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },
      build: {
        files: {
          './build/js/build.min.js': ['./build/js/build.js']
        }
      }
    }

//注冊任務
grunt.loadNpmTasks('grunt-contrib-uglify');

//指令
grunt uglify
           

• 預設任務-任務高效

// 注冊grunt的預設任務  grunt執行任務是同步的
  // 預設被執行的任務清單。
  grunt.registerTask('default', ['concat','uglify']);

//指令
grunt
           

• js文法檢查：使用jshint插件

//安裝插件
npm install grunt-contrib-jshint --save-dev

//編碼：.jshintrc 配置檔案
{
  "curly":true,
  "eqeqeq":true,
  "eqnull":true,
  "expr":true,
  "immed":true,
  "newcap":true,
  "noempty":true,
  "noarg":true,
  "regexp":true,
  "browser":true,
  "devel":true,
  "node":true,
  "boss":false,

  // 不能使用未定義的變量
  "undef":true,
  // 語句後面必須有分号
  "asi":false,
  // 預定義不檢查的全局變量
  "predef":["define","BMap","angular","BMAP_STATUS_SUCCESS"]
}

//配置任務
jshint: {
      options: {
        jshintrc: '.jshintrc'   //指定配置檔案
      },
      build: ['Gruntfile.js', 'src/js/*.js']
    }

//注冊任務
grunt.loadNpmTasks('grunt-contrib-jshint');
           

• 使用cssmin插件

// 安裝插件
npm install grunt-contrib-cssmin --save-dev

// 配置任務
cssmin: {
  options: {
    mergeIntoShorthands: false,
    roundingPrecision: -1
  },
  target: {
    files: {
      'output.css': ['foo.css', 'bar.css']
    }
  }
}

// 注冊任務
grunt.loadNpmTasks('grunt-contrib-cssmin');
           

• 使用watch插件（真正實作自動化）

//安裝插件
npm install grunt-contrib-watch --save-dev

//配置任務
watch: {
      scripts: {
        files: ['./src/js/*.js','./src/css/*.css'],
        tasks: ['concat','jshint','uglify','cssmin'],
        options: {spawn: false,},
      },
}
  
//注冊任務
  grunt.loadNpmTasks('grunt-contrib-watch');
  
//預設被執行的任務清單。
 grunt.registerTask('myWatch',['default', 'watch']);