Today, when I was doing the NodeJS exercise, because I was using a notebook, I needed to use FN + F5 key to refresh, which was so annoying, so I wondered if I could refresh the page automatically? So I checked the information. Yesterday, I spent most of the day not implementing it, because NodeJS is just in contact with it, and I am not particularly familiar with it. After fumbling for a whole morning, I finally realized it.

After talking nonsense, the text begins:

Because he is also a second knife, dare not say too much, just put some of their own ideas said here, if there is a mistake, please correct everyone, common progress

React + Less + Swig + Grunt + Livereload + Nodemon The NPM package is a package that can be downloaded from your website

Grunt is not much introduced, directly posted website bar: jump

The code is as follows:

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 processing begin */ // Brower automates the conversion of JSX files to JS files browserify:{options: {transform: [require(' grunt-act ').browserify]}}, // configure the JSX file path to the JSX file and build path to the JSX file. { options:{ es6module:true }, dynamic_mappings: { files: [ { expand: true, cwd: 'src/jsx', src: ['*.jsx'], dest: 'build/js', ext: '.min.js'}]}}, // Babel: {options: {sourceMap: true, presets: ['babel-preset-es2015'] }, dist: { files: [{expand: true, CWD: 'build/js, SRC: [' *. Js], dest:' build/js'}]}}, / / compression js uglify: {prod: {options: {the mangle: { except: ['require', 'exports', 'module', 'window'] }, }, files:[{ expand:true, cwd:'build/js', src:['*.js'], Dest :'build/js'}]}, /* js to end */ /* less to begin */ //less less to begin */ / [{ expand: true, cwd: 'src/less', src: ['*.less'], dest: 'build/css', ext: '.min.css'}]}}, // compression CSS cssmin:{prod:{options:{report:'gzip'}, files:[{expand:true, CWD :'build/ CSS ', SRC :['*.css'], dest:'build/ CSS '}]}}, /* less handle end */ //watch To achieve hot deployment, I think is one of the essence of Grunt's automation tools: {script:{options:{livereload:true; //livereload :true; //livereload :true; }, files:' SRC/JSX /*. JSX ',// If the files in JSX are changed, Tasks :['browserify',' Babel ','uglify']}, CSS :{options:{livereload:true}, files:' SRC /less/*.less',// If the CSS file has changed, Tasks :['less','cssmin']}, HTML :{options:{livereload:true}, files:['views/**/*.html'] // If the swig file has changed, }}, concurrent:{develop:{tasks:['watch','nodemon'], options:{logConcurrentOutput:true}}}}); // Load the plug-in that contains the task. require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); // The list of tasks performed by default. grunt.registerTask('default', ['react','less','babel','uglify','concurrent:develop']); }

Although JSX and LESS compiles and compiles do not require a server restart (I think so), the SWIG template will require a node restart if there is any change to it. Nodemon is used because it is not necessary to refresh. Nodemon: You can restart node after you modify a file. Nice.

When we talk about refreshing, we’ll talk about Livereload. Livereload: Thanks to @justinliao here for answering my question

Why can automatically refresh the web page. Your Server starts a TCP/TLS Server and listens on a port. The web livereload script connects to this port, and when the server files change, the server issues a refresh command to the notifying browser, so you can experiment with how to make the server in HTTPS automatically refresh as well.

The server: port, nodemon: port, and livereload are not connected. The server: port, nodemon: port, and livereload are not connected. The server: port, nodemon: port, and livereload are not connected. It would be foolish to think that all three ports need to be set to one, but this is obviously wrong. Regardless of the port occupants, the three ports themselves are separated. If you have nodemon: port set, there is no need to create server: port because it will duplicate itself. You can just develop from nodemon: port. As for livereload: port, this is almost not to move, because its role is to see if your file has been modified, modified, we will tell the browser to refresh, not other mixed.

May say a little confused, record a day of research results, share with everyone, if there is a mistake hope god correct, also hope to help beginners.