随便在什么位置全局安装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 那么就会执行数组里的三个任务