今天在做nodejs练习的时候，因为是用的笔记本，刷新需要用FN + F5键才行，这特么太闹心了，于是想是不是可以自动刷新页面呢？于是乎查了查资料，昨天弄了大半天总是不执行，因为nodejs也是刚接触，还不是特别熟悉，摸索了一上午，终于实现了，分享一下过程，希望对大家有帮助。
废话说完，正文开始：
因为自己也是二把刀，不敢说太多，只是把自己的一些想法说在这里，如有错误，请大家指正，共同进步
相关内容
React + Less + swig + grunt + livereload + nodemon
推荐一个npm package的网站，内容很详细：
npm Package介绍
grunt也不多介绍了，直接贴网站吧：跳转
代码如下：
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
nodemon: {
dev: {
script: './server.js',
options: {
args: ['dev'],
nodeArgs: ['--debug'],
ignore: ['README.md', 'node_modules/**', '.idea'],
ext: 'html,js',
watch: ['./views','./app','./routes'],
delay: 1000,
env: {
PORT: '3000'
},
cwd: __dirname
}
}
},
/* js处理 begin */
//brower 自动化将jsx文件转换成js文件
browserify:{
options: {
transform: [ require('grunt-react').browserify ]
}
},
//react 配置react对应的jsx的文件路径和生成路径以及后缀名
react: {
options:{
es6module:true
},
dynamic_mappings: {
files: [
{
expand: true,
cwd: 'src/jsx',
src: ['*.jsx'],
dest: 'build/js',
ext: '.min.js'
}
]
}
},
//babel 主要引入es6
babel: {
options: {
sourceMap: true,
presets: ['babel-preset-es2015']
},
dist: {
files: [{
expand:true,
cwd:'build/js',
src:['*.js'],
dest:'build/js'
}]
}
},
//压缩js
uglify:{
prod:{
options:{
mangle: {
except: ['require', 'exports', 'module', 'window']
},
},
files:[{
expand:true,
cwd:'build/js',
src:['*.js'],
dest:'build/js'
}]
}
},
/* js处理 end */
/* less处理 begin */
//less less动态转换成css文件并定义后缀名
less: {
development: {
files: [{
expand: true,
cwd: 'src/less',
src: ['*.less'],
dest: 'build/css',
ext: '.min.css'
}]
}
},
//压缩css
cssmin:{
prod:{
options:{
report:'gzip'
},
files:[{
expand:true,
cwd:'build/css',
src:['*.css'],
dest:'build/css'
}]
}
},
/* less处理 end */
//watch 字面意思：看着某个事件。实现热部署，个人认为是grunt的自动化工具的精髓之一
watch: {
script:{
options:{
livereload:true //livereload工具，浏览器安装插件后，不用重启服务器，不用刷新页面，好神奇的说
},
files:'src/jsx/*.jsx',//如果jsx的文件有变化，就执行任务
tasks:['browserify','babel','uglify']
},
css:{
options:{
livereload:true
},
files:'src/less/*.less',//如果css的文件有变化，就执行任务
tasks:['less','cssmin']
},
html:{
options:{
livereload:true
},
files:['views/**/*.html'] //如果swig的文件有变化，就执行任务
}
},
concurrent:{
develop:{
tasks:['watch','nodemon'],
options:{
logConcurrentOutput:true
}
}
}
});
// 加载包含任务的插件。
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// 默认被执行的任务列表。
grunt.registerTask('default', ['react','less','babel','uglify','concurrent:develop']);
}虽然jsx和less编译压缩并不需要重启服务(我觉得是这样的)，但是swig模板如果有改动，就需要重启node，要不干刷新也没用，所以用到了nodemon。
nodemon：可以在你修改某文件后重启node，蛮贴心的。
说到刷新，就会提到livereload了。
livereload：这里感谢@JustinLiao，感谢他在我问题下的回答
为什么能自动刷新网页。其实就是你的服务器起了一个TCP/TLS Server，并监听一个端口。网页livereload脚本与这个端口建立连接，当服务器文件发生变化，服务器向通知浏览器执行刷新命令，这样你可以尝试如何让HTTPS的服务器也能够实现自动刷新。grunt下的其他就比较简单一些了，网上也比较多了，就不多废话了，主要还是要理清nodemon和livereload，我之前总的错误是没有把server：port，nodemon：port和livereload：port分清楚，傻傻的以为需要把这三个port都设置成一个，但是这明显是错误的，先不说端口占用，这三个本身都是分开来走的。
其实如果你设置了nodemon：port，就没有必要再另外起server：port，因为本身这样就是重复的了，只要根据nodemon：port来开发就够了。
至于livereload：port，这个几乎是不用动的，因为他的作用就是看你文件是否有修改，修改了，咱就告诉浏览器刷新一下，不和其他的掺和。
可能说的有点儿乱，记录一下一天的研究成果，分享给大家，如有错误希望大神指正，也希望对初学者有帮助。
