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. web应用和虚拟目录映射

    Tip:WEB应用程序 WEB应用程序指供浏览器访问的程序,通常简称为web应用. 一个web应用由多个静态web资源和动态web资源组成,如: HTML.css.js文件 JSP文件.java程序. ...

  2. Appirater -- app中提示用户为app评价的提示框

    Appirater是一段你可以嵌入自己工程中的代码,在用户使用应用一段时间后会自动弹出提示用户进行评分. 使用Appirater方面,你可以简单把源代码嵌入你的app工程中,并把以下代码添加至它的委托 ...

  3. python 随机生成固定长度的字串

    from random import Random#随机生成4到20位的用户名def random_username(): username = '' chars = 'AaBbCcDdEeFfGgH ...

  4. 安装文件制作工具Wix概念快速入门

    前言 Wix==Windows installer XML 顾名思议. 用于制作WINDOWS安装文件的XML格式的描述文件. 因为其实现方式为基于声明的方式,而非命令的方式. 特整理一下其相关的概念 ...

  5. 万能的 SQL编程

    简介:T-SQL语句创建库.创建表和听.和添加约束等.T-SQL是数据库结构化查询语言,常见的增加.删出.修改.查询.创建库和创建表的语句,还支持定义变量.输出语句.逻辑控制语句(IF.CASE.WH ...

  6. sdutoj 2151 Phone Number

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2151 Phone Number Time Li ...

  7. Spring3 url匹配规则

    Spring3 url匹配规则 Wildcard Description ? 匹配任何单字符 * 匹配0或者任意数量的字符 ** 匹配0或者更多的目录 宝贝网址:

  8. 获取全国市以及地理坐标,各大坐标系北斗,百度,WGS-84坐标系的转换,有图,有代码

    1 先上坐标取到的值: 获取到的坐标部分如下: '北京市':[116.39564503788,39.92998577808], '天津市':[117.21081309155,39.1439299033 ...

  9. (菜鸟要飞系列)四,基于Asp.Net MVC5的后台管理系统(zTree绑定Json数据生成树)

    上一次老师让我们用递归将中国城市镇县四级联动 显示在树上,那个时候就知道可以显示在zTree上,可是苦于对Json的不了解,对zTree的Api的不了解,一直没有做出来,只好将递归算法显示在了窗体上, ...

  10. 空格的URL编码

    Q: 为什么我看的教材一会说是“+” 一会说是“%20” A: urlencode(" ") '返回+encodeURI(" ") '返回%20是有区别的