高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP视频流媒体网页无插件直播服务器EasyDSS之什么是Grunt？

51 阅读 0 评论 34 点赞

我是靠谱客的博主幸福嚓茶，最近开发中收集的这篇文章主要介绍高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP视频流媒体网页无插件直播服务器EasyDSS之什么是Grunt？，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这两天公司让研究js压缩，去掉js中的备注和空格，网上看了一些技术方案，都需要js代码合并，而我们并不想把js代码合并成一个js。所以就看到了grunt的配置压缩，下面我们直接来看过程吧。

什么是Grunt？

Grunt是前端的Mavan，它是JavaScript世界的内置工具。简而言之，就是运行在Node.js上面的任务管理器（task runner），其可以在任何语言和项目中自动化指定的任务。我们可通过npm来安装Grunt和Grunt插件。

Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作，比如：

Minification
Compilation
Unit testing
Linting and more

Grunt使用简介

1.命令安装

为了要使用Grunt，需要全局安装Grunt的命令行接口CLI（Command Line Interface)。如果是在Linux、mac上运行，需要用管理员权限运行命令窗口或是使用sudo。

npm install -g grunt-cli

2.grunt依赖

一个基本的Nodejs项目，根目录包含package.json文件，如：


{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}

接下来运行 npm i

或者通过以下命令安装


// --save-dev 意思是将依赖放入devDependencies中
npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-nodeunit --save-dev
npm install grunt-contrib-nodeunit --save-dev

3.Gruntfile配置

在项目根目录中创建Gruntfile.js，示列如：

module.exports = function(grunt) {
// Grunt配置
grunt.initConfig({
//获取package配置
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
// 配置日志输入标识
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
// 配置源文件目录
src: 'src/<%= pkg.name %>.js',
// 压缩后目标目录
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// 加载js压缩插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册默认执行任务
grunt.registerTask('default', ['uglify']);
};

4.Grunt运行

根目录打开命令窗口，运行如下命令


grunt

执行后的效果就是讲src目录里的js文件压缩输出到dest目录中

5.监听文件目录

很多情况下，我们在编码的时候，希望可以自动将更改部署到目标目录。这时候我们可以使用：


npm i grunt-contrib-watch --save-dev

修改Gruntfile.js


module.exports = function(grunt) {
// Grunt配置
grunt.initConfig({
//获取package配置
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
// 配置日志输入标识
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
// 配置源文件目录
src: 'src/<%= pkg.name %>.js',
// 压缩后目标目录
dest: 'build/<%= pkg.name %>.min.js'
}
},
//监视
watch: {
scripts: {
//监听目录src下的所有js文件
files: ['src/*.js'],
//只要文件有变动就执行uglify任务
tasks: ['uglify'],
options: {
spawn: false,
},
}
}
});
// 加载js压缩插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册默认执行任务
grunt.registerTask('default', ['uglify','watch']);
};