Grunt可以执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务。

本文介绍使用Grunt实现nodejs程序自启动功能。

目录:

  1. Grunt介绍
  2. Grunt安装
  3. Grunt使用
  4. Grunt常用加载任务的插件:

    1)grunt-contrib-watch

    2)grunt-nodemon

    3)grunt-concurrent

1.Grunt介绍

  Grunt是一个自动化的项目构建工具. 如果你需要重复的执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 那么你可以使用Grunt来处理这些任务, 你所需要做的只是配置好Grunt, 这样能很大程度的简化你的工作.

如果在团队中使用Grunt, 你只需要与其他人员约定好使用Grunt应该规避的问题, 就能够很方便的自动化的处理大部分的常见工作任务, 你所付出的努力几乎为0.

1.Grunt安装

我目录下的文件(使用express  -e test新建的一个项目)

Grunt和Grunt插件都是通过npm, Node.js包管理器安装和管理的

我的系统环境:

  • win7 64bit
  • nodejs:6.3.1
  • npm:3.10.3

本地安装grunt

后面加上 --save-dev,可以直接把grunt作为devDependencies写入的package.json中

安装完grunt后,还需要安装一个grunt插件:grunt-cli,为什么需要grunt-cli这个模块,有了grunt-cli,你可以在项目的任意子目录中运行grunt 。

grunt-cli的工作原理:每次运行grunt 时,他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt,CLI就将其加载,并传递Gruntfile中的配置信息,然后执行你所指定的任务。

grunt-cli需要全局安装的原因:当执行grunt命令时,会默认先去全局的grunt-cli下找grunt-cli模块,而不会先走当前目录下的node_modulesgrunt-cli

此时执行grunt,会报如下错误:

实际上grunt运行,依赖package.json和Gruntfile.js两个文件,项目初始化时,已经生成了package.json文件,这里还缺少Gruntfile.js文件

新建Gruntfile.js文件:

再次运行grunt:

没有报错,但是提示默认的任务没有找到,这是因为我们在Gruntfile.js文件中没有添加任务,包括默认任务。

gurnt的自启动实现,需要三个加载任务的插件:

他们的安装方式如下:

 npm install grunt-contrib-watch  --save-dev
 npm install grunt-nodemon  --save-dev
 npm install grunt-concurrent --save-dev

安装完的package.js文件如下:

{
  "name": "test",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "ejs": "~2.4.1",
    "express": "~4.13.4",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  },
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-concurrent": "^2.3.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-nodemon": "^0.4.2"
  }
}
grunt、grunt-concurrent、grunt-contrib-watch、grunt-nodemon模块名分别存放在devDependencies下。
grunt-concurrent:针对慢任务的插件,优化慢任务
grunt-contrib-watch:可以监控特定的文件,在添加文件、修改文件、或者删除文件的时候自动执行自定义的任务,比如 livereload 等等
grunt-nodemon:实时监听入口文件(app.js),入口文件出现改动,就会自动重启下面来编写Gruntfilr.js文件
module.exports = function(grunt){
    grunt.initConfig({
        watch:{
            ejs:{
                files:['views/*'],
                options:{
                    livereload:true
                }
            },
            js:{
                files:['public/javascripts/*'],
        //        tasks:['jshint'],
                options:{
                    livereload:true
                }
            }
        },
        nodemon:{
            dev:{
                options:{
                    file:'app.js',
                    args:[],
                    ignoredFiles:['node_modules/**','DS_store'],
                    watchedExtensions:['js'],
                    watchedFolders:['./'],
                    debug:true,
                    delayTime:,
                    env:{
                        PORT:
                    },
                    cwd:__dirname
                }
            }
        },
        concurrent:{
            tasks:['nodemon','watch'],
            options:{
                logConcurrentOutput:true
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');  //只要有文件修改,增加删除,就会重新执行
    grunt.loadNpmTasks('grunt-nodemon');    //实时监听入口文件(app.js),入口文件出现改动,就会自动重启
    grunt.loadNpmTasks('grunt-concurrent'); //针对慢任务的插件,优化慢任务

    grunt.option('force',true);
    grunt.registerTask('default',['concurrent']);
}

上述livereload:true,表示监听的文件被修改以后,自动刷新页面。

再次运行grunt:

启动成功!!!!

打开app.js文件,随便敲几个空格并保存之后,看到控制台有如下变化:

 
 
 

grunt集成自动启动的更多相关文章

  1. Vue+Webpack+Grunt集成

    说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...

  2. 前端开发 Grunt 之 Connect

    在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的 ...

  3. Grunt 之 Connect

    前端开发 Grunt 之 Connect 在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt ...

  4. 前端开发 Grunt 之 Connect详解

    在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的 ...

  5. API测试-Super Test

    框架选择 Super Test:基本的HTTP请求,返回判断 Chai:对返回的结果进行判断 grunt:集成jenkins grunt-mocha-test:grunt任务 Jenkins环境配制 ...

  6. 在Grunt task中集成Protractor

    Protractor是专为AngularJS应用程序编写的UI自动化测试框架.前端构建有很多构建工具,比如Grunt.Gulp等.一般我们会把这些构建工具作为集成集成的脚本执行工具.所以如果把Prot ...

  7. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  8. [译]为什么我要离开gulp和grunt转投npm脚本的怀抱

    原文链接:https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.n7m1855 ...

  9. zend studio 13.5破解以及集成xdebug

    环境说明: 操作系统:Windows 7 Ultimate Edition Service Pack 1 PHP:7.0.11 TS Zend Studio:13.5.0 Xdebug:2.5.0 一 ...

随机推荐

  1. 异步IO比同步阻塞IO性能更好吗?为什么?

    最近在看node.js, 介绍中提到node是异步io的方式实现, 性能比同步阻塞io的更好. 对于一个request而言, 如果我们依赖io的结果, 异步io和同步阻塞io都是要等到io完成才能继续 ...

  2. css只显示两行 超过显示点点点

    .p1{ text-align: center; color:#C8CFD6; height:34px; text-overflow:-o-ellipsis-lastline; overflow:hi ...

  3. OpenCV 3.0函数库索引

    ================================== 前言:值的个数: cvCrossProduct:计算两个三维向量的向量积(叉积): cvCvtColor:将数组的通道从一个颜色空 ...

  4. SSM框架学习之高并发秒杀业务--笔记4-- web层

    在前面几节中已经完成了service层和dao层,到目前为止只是后端的设计与编写,这节就要设计到前端的设计了.下面开始总结下这个秒杀业务前端有哪些要点: 1. 前端页面的流程 首先是列表页,点某个商品 ...

  5. UBUNTU下SUBLIME TEXT3的安装+破解+汉化+中文输入

    一.Sublime Text3的下载安装 建议直接去官网下载最新版deb安装包:http://www.sublimetext.com/3 二.Sublime Text3的破解 3114版 -– BEG ...

  6. VC与JavaScript交互(四) --- WebBrowser或CHtmlView中轻松屏蔽脚本错误(JavaScript)

    1.什么是javascript脚本错误 1.1    概述 JavaScript脚本错误包含“运行时错误”和“语法错误”. 1.2    JavaScript“语法错误” JavaScript语法错误 ...

  7. 常用面试sql语句

    1.编写一条sql语句,要修改一个字段的俩个值,比如把字段sex中的男改为女,女改为男. update m set m=(case when m='男' then '女' else '男' end) ...

  8. UEP-多任务

    打开多任务 Function testTabTask(){ openTabTask(","多任务测试",$$pageContextPath+"/componen ...

  9. Python3 tkinter基础 Frame bind 捕捉多键同时按

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. vue的理解

    vue提供的MVVM框架模式的数据双向绑定,实现了HTML和js的代码分离,提高代码的维护性 vue.js的核心思想包括:数据驱动和组件化思想. 如果没有中间的ViewModel则关系图编程下面所示: ...