Nodejs——搭建电影展台(grunt)配置

来源:互联网 发布:10的阶乘java编程 编辑:程序博客网 时间:2024/04/30 06:03

Grunt -JavaScript构建工具

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

1.安装CLI

Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对OSX、*nix、BSD等系统中)权限或者作为管理员(对于Windows环境)来执行以下命令。
这里写图片描述

Grunt CLI已经正确安装,并且已经有一份配置好package.json 和 Gruntfile 文件的项目了,接下来就很容易拿Grunt练手了:

  1. 将命令行的当前目录转到项目的根目录下。
  2. 执行npm install命令安装项目依赖的库。
  3. 执行 grunt 命令。

Gruntfile 文件配置文件如下:

module.exports = function(grunt){    grunt.initConfig({  //任务        //pkg: grunt.file.readJSON('package.json')        watch:{ //指定任务,该任务下有jade与js两个目标            jade: {                files: ['views/**'],//传递所需监听的视图文件                options: {   //指定覆盖内置属性的默认值,目标(target)级的平options将会覆盖任务级的options                    livereload: true //文件出现改动时重新启动服务                }            },            js:{                files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],                options: {                    livereload: true                }            }        },        nodemon: {            dev: {                options: {                    file: 'app.js',                    args: [],                    ignoresFiles:['README.md', 'node_modules/**',],                    watchedExtensions: ['js'],                    watchedFolders: ['app', 'config'],                    debug: true,                    delayTime: 1,                    env: {                        PORT: 3000                    },                    cwd: __dirname                }            }        },        concurrent: {            tasks: ['nodemon', 'watch'],            options: {                logConcurrentOutput:true            }        }    })    grunt.option('force', true);    grunt.registerTask('default', ['concurrent']);    grunt.loadNpmTasks('grunt-contrib-watch');    grunt.loadNpmTasks('grunt-nodemon');    grunt.loadNpmTasks('grunt-concurrent');}

解析文件:

1.Grunt配置

Grunt的task配置都是在 Gruntfile中的grunt.initConfig方法中指定的。此配置主要是以任务名称命名的属性,也可以包含其他任意数据。gruntfile.js文件中指定三个任务:watch、nodemon、concurrent。
这里写图片描述

2.任务配置和目标
当运行一个任务时,Grunt会自动查找配置对象中的同名属性。多任务(multi-task)可以通过任意命名的“目标(target)”来定义多个配置。下列配置中,watch任务包括:jade、js两个目标。
这里写图片描述

3.options属性
在一个任务配置中,options属性可以用来指定覆盖内置属性的默认值。此外,每一个目标(target)中还可以拥有一个专门针对此目标(target)的options属性。目标(target)级的平options将会覆盖任务级的options。
这里写图片描述

4.文件
这里写图片描述
图中标红的矩形采用的是文件通配符的形式,表示views目录下的所有文件。

5.创建任务
任务是Grunt的面包和奶油。就像你常用的工具,如: jshint 或 nodeunit。每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情。

如果你没有指定一个任务,并且你已经定义一个名为 “default” 的任务,那么该任务将会默认被执行(不用诧异,总要做点儿什么啊!)。
这里写图片描述
grunt.registerTask(‘default’, [‘concurrent’]);
案例中定义了一个 ‘default’ 任务,如果运行Grunt时没有指定任何任务,它将自动执行concurrent任务。

–Task
指定一个包含可加载的任务和“额外”文件的目录。

还可以调用 grunt.loadTasks(…)

–npm
在通过npm安装的插件中检查可加载的任何以及额外文件。

还可以调用 grunt.loadNpmTasks(…)

6.任务说明

  • watch—— 可以监控特定的文件,在添加文件、修改文件、或者删除文件的时候自动执行自定义的任务,比如 livereload 等等。

这里写图片描述

liverload:true:文件发生改动时重新启动服务

  • nodemon——自动重启项目工程,node 有一个 npm 模块 supervisior 也是用来监控进程的,不过除了
    supervisior 外,还有很多其他的工具,从 github 的评分上看,比较热门的有
    forever,nodemon,node-dev,具体这些工具的区别可以参考这篇文章 Comparison: Tools to
    Automate Restarting Node.js Server After Code Changes ,个人觉得在开发环境还是用
    nodemon,因为配置比较方便,文档也很清晰。

这里写图片描述

  • grunt-concurrent:Grunt任务,并发运行缓慢的任务就像Coffee和Sass, 可能显著改善您的构建时间。如果要一次运行nodmon和watch,grunt-concurrent这个插件是很有用的。
    这里写图片描述
0 0
原创粉丝点击