[Nodejs学習(1)]-grunt+nodemon+livereloadによる自動化

今日はnodejsの練習をしていますが、ノートを使っていますので、FN+F 5ボタンで更新しなければならないです.これはとてもうるさいです.自動的にページを更新できますか?そこで資料を調べましたが、昨日は半日ぐらい勉強しましたが、どうしても実行しませんでした.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:ここは@JustiinLiaoに感謝します.彼の質問に対する答えに感謝します.

          。             TCP/TLS Server，       。  livereload           ，          ，               ，          HTTPS             。

gruntの下のその他は比較的に簡単で、ネット上でも比較的に多くなって、多くのむだ話をしなくなりました.主にやはりnodemonとlivereloadを整理します.以前の私の間違いはserver:portをなくしました.nodemon:portとlivereload:portをはっきり区別して、馬鹿なのはこの三つのポートを一つに設定する必要があると思っていますが、しかしこれは明らかに間違っています.この三つは自分で別れて歩いています.実はあなたがnodemon:portを設置したら、別にserver:portを起こす必要はありません.それ自体は重複していますので、nodemon:portによって開発すれば十分です.livereload:portについては、これはほとんど動かなくてもいいです.彼の役割はあなたの書類に修正があるかどうかを見て、修正しました.ブラウザに更新してください.他の混ぜ物とは関係ないです.
ちょっと乱れているかもしれませんが、一日の研究成果を記録して、皆さんに共有します.間違いがあれば、大神さんに指摘してもらいたいです.初心者にも助けてもらいたいです.