grunt笔记，监控less或sass变化自动刷新页面

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