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

可能说的有点儿乱，记录一下一天的研究成果，分享给你们，若有错误但愿大神指正，也但愿对初学者有帮助。