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. Android 第三方图表类 MPChart 的使用

    先看看条形图的的效果还不错是吧,实现这样的效果很合适呢! 还有折线图.饼图很多效果 效果不错对吧~ 下面我们就先来看看条形图的实现方法吧! 第一步: 引入第三方包 MPChart 如果你碰巧看过我之前 ...

  2. 缺少.lib文件导致的Link2019 解决方案汇总

    环境Vs2015,  Win10 添加lib的方法在末尾 下面的错误都是我在写Direct3D程序中遇到的, 记下来方便查找 4.ws2_32.lib 3.   version.lib _GetFil ...

  3. JS 进制转换

    十进制转换成其他进制 objectname.toString([radix])   objectname 必选项.要得到字符串表示的对象. radix 可选项.指定将数字值转换为字符串时的进制. 例如 ...

  4. 【myEcplise2015 更换主题+字体颜色】

    更换myEcplise样式: 若对js文件或者java文件中的字体颜色不是很满意,可以去按照这个路径去更新字体颜色: 以javaScript文件为例子: 修改完成之后,javascript文件中文字是 ...

  5. enbale blakboxing

    chrome://flags/#enable-devtools-experiments

  6. Oracle优化查询技巧

    1. WHERE子句中的连接顺序:Oracle采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE条件之前, 那些可以过滤掉最大数量记录的条件必须写在WHERE子句的 ...

  7. 设置 Eclipse 智能代码提示,大幅度减少 alt+/ 使用频率,打每个字都出现代码提示的办法

    以前网上有个英文版本的,现在自己汉化一下...O(∩_∩)O 哈哈 ~   http://www.cnblogs.com/lidabo/archive/2013/03/05/2944245.html ...

  8. Polymer——Template

    Polymer Template 一.Ta的简介 template是polymer element中一个重要的组成部分,主要有两种使用目的,一是构建Shadow Dom,二是用于数据绑定和视图渲染. ...

  9. SSH框架之Struts(2)——Struts的执行流程之配置文件

    上篇我们大致了解了一下採用了Struts框架的web页面运行流程. 接下来的几篇我们通过Struts的源代码来学习一下Struts的内部原理. 当server启动的时候.server会依据配置文件初始 ...

  10. mysql 恢复备份时出错 Unknown command ‘\”

    今天恢复mysql备份时,出现了Unknown command ‘\”这样的错误,原以为是备份文件出错,重新备份导入时还是出错.研究了一凡是因为编码的问题,解决方案如下: 使用你导出备份时的编码重新导 ...