前端建構工具Grunt的使用

Grunt和所有grunt插件都是基于nodejs來運作的。使用前需安裝node.js。

第一步：全局安裝Grunt。

npm install -g grunt-cli
           

第二步：建立項目

在【package.json】檔案中添加一些東西

{
  "name": "project",
  "version": "0.1.0",
  "devDependencies": {
  }
}
           

第三步：在項目中安裝grunt及grunt插件

npm install grunt --save-dev
           

npm install grunt-contrib-jshint --save-dev
           

grunt插件添加成功後可在【package.json】中檢視

【Gruntflie.js】檔案中添加配置

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加載包含 "uglify" 任務的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

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

};
           

第四步： 運作

在指令行中運作 grunt 指令，uglify任務将被執行，并在相應目錄中輸出結果

第五步：實作自動化

grunt插件安裝配置完成後，每次執行都需要運作 grunt 指令。可以同過安裝 watch 插件，來對相應的任務進行實時監測。

安裝成功後在【Gruntflie.js】檔案中添加配置

watch:{
            build:{
                files:['src/js/*.js','src/css/*.css'],
                tasks:['jshint','csslint','cssmin','concat','uglify'],
                options:{
                    spawn:false,
                },
            },
        },
           

grunt.loadNpmTasks('grunt-contrib-watch');
 
    grunt.registerTask('default',['csslint','cssmin','jshint','concat','uglify','watch']);
           

當運作 grunt 指令後，watch 開始監聽，自動執行相應的任務。不需要每次修改檔案後都運作 grunt 指令。