[ 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，这个几乎是不用动的，因为他的作用就是看你文件是否有修改，修改了，咱就告诉浏览器刷新一下，不和其他的掺和。

可能说的有点儿乱，记录一下一天的研究成果，分享给大家，如有错误希望大神指正，也希望对初学者有帮助。