[ Nodejs學習(1) ] - 經過grunt+nodemon+livereload實現自動化

今天在作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，這個幾乎是不用動的，由於他的做用就是看你文件是否有修改，修改了，咱就告訴瀏覽器刷新一下，不和其餘的摻和。

可能說的有點兒亂，記錄一下一天的研究成果，分享給你們，若有錯誤但願大神指正，也但願對初學者有幫助。