隨便在什么位置全局安裝grunt

sudo npm install -g grunt-cli

在當前工作目錄輸入

npm init
這樣會在當前目錄生成一個package.json
按照提示填寫一些個人信息，最后yes

在當前工作目錄安裝grunt

npm install grunt --save-dev

--save-dev一定要有，開發環境下的依賴

一些需要用到的插件

• 編譯LESS grunt-assemble-less
• Scss 編譯：grunt-contrib-sass
• 建立本地服務器：grunt-contrib-connect
• 監聽文件變動：grunt-contrib-watch

安裝他們

npm install --save-dev grunt-contrib-sass grunt-contrib-watch grunt-contrib-connect assemble-less

package.json應該如下

  "devDependencies": {
    "assemble-less": "^0.7.0",
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-sass": "^1.0.0",  //可以不用，如果用less的話
    "grunt-contrib-uglify": "^3.0.1",
    "grunt-contrib-watch": "^1.0.0"
  }```


####當前目錄新建一個gruntfile.js

module.exports = function(grunt) {

grunt.initConfig({ //初始化必須有的

pkg: grunt.file.readJSON('package.json'),  //讀取json，看看都有什么包可以用

less: {          //開始less包，sass就換成sass
  development: {      //開發環境，生產環境可以壓縮css，暫時用不到刪掉了
    options: {
      paths: ["assets/css"]   //這是當前默認目錄
    },
    files: {
      "./13.css": "./less/13.less"   //替換相應的路徑和文件名
    }
  }
},  //別忘了逗號
connect: { 
  options: {
    livereload: 35729   //connnet，聲明端口，告訴下面的watch
  }
  server: {
    options: {
      open: true,  //自動幫你打開網頁
      port: 9001,   //在9001端口
      base: './'   //當前根目錄，多個端口可能需要更改
    }
  }
},
watch: {
  options: {
    livereload: true,   //監聽前面聲明的端口
  },
  less: {
    files: ['./less/*.less'],  //如果有任何less文件改變，那么就執行task
    tasks: ['less:development']  //對應的是上面的任務
  },
  files: [   //這是一個[
    '13.css',   //監視這個文件，如果有保存改變，立即刷新咯
    '13.html'
  ]
}

});
grunt.loadNpmTasks('assemble-less'); //加載我們需要的包
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');

grunt.registerTask('lessDev',['less:development']); //注冊任務
grunt.registerTask('watchit',['less:development','connect','watch']);
};

上面注冊好任務，只要輸入grunt lessDev那么就會執行對應的less:development里的任務
輸入grunt watchit 那么就會執行數組里的三個任務