[ Nodejs学习(1) ] - 通过grunt+nodemon+livereload实现自动化

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

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

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

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看