隨便在什么位置全局安裝grunt
sudo npm install -g grunt-cli
在當(dāng)前工作目錄輸入
npm init
這樣會在當(dāng)前目錄生成一個package.json
按照提示填寫一些個人信息，最后yes
在當(dāng)前工作目錄安裝grunt
npm install grunt --save-dev
--save-dev一定要有挑格，開發(fā)環(huán)境下的依賴
一些需要用到的插件
- 編譯LESS grunt-assemble-less
- Scss 編譯：grunt-contrib-sass
- 建立本地服務(wù)器：grunt-contrib-connect
- 監(jiān)聽文件變動：grunt-contrib-watch
安裝他們
npm install --save-dev grunt-contrib-sass grunt-contrib-watch grunt-contrib-connect assemble-less
package.json應(yīng)該如下
"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"
}```
####當(dāng)前目錄新建一個gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({ //初始化必須有的
pkg: grunt.file.readJSON('package.json'), //讀取json，看看都有什么包可以用
less: { //開始less包漱挚，sass就換成sass
development: { //開發(fā)環(huán)境，生產(chǎn)環(huán)境可以壓縮css渺氧，暫時用不到刪掉了
options: {
paths: ["assets/css"] //這是當(dāng)前默認目錄
},
files: {
"./13.css": "./less/13.less" //替換相應(yīng)的路徑和文件名
}
}
}, //別忘了逗號
connect: {
options: {
livereload: 35729 //connnet旨涝，聲明端口，告訴下面的watch
}
server: {
options: {
open: true, //自動幫你打開網(wǎng)頁
port: 9001, //在9001端口
base: './' //當(dāng)前根目錄侣背，多個端口可能需要更改
}
}
},
watch: {
options: {
livereload: true, //監(jiān)聽前面聲明的端口
},
less: {
files: ['./less/*.less'], //如果有任何less文件改變白华，那么就執(zhí)行task
tasks: ['less:development'] //對應(yīng)的是上面的任務(wù)
},
files: [ //這是一個[
'13.css', //監(jiān)視這個文件，如果有保存改變贩耐，立即刷新咯
'13.html'
]
}
});
grunt.loadNpmTasks('assemble-less'); //加載我們需要的包
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('lessDev',['less:development']); //注冊任務(wù)
grunt.registerTask('watchit',['less:development','connect','watch']);
};
上面注冊好任務(wù)弧腥，只要輸入grunt lessDev那么就會執(zhí)行對應(yīng)的less:development里的任務(wù)
輸入grunt watchit 那么就會執(zhí)行數(shù)組里的三個任務(wù)