Node.js+Grunt工具搭建后台管理实践

Posted by Yancy on 2016-11-24

最近弄灰度发布系统,由于最近体检项目需要对css文件和js文件进行压缩,各种比较之后,选择了grunt进行构建。google一下,几乎都是grunt最新版的使用说明查看gruntjs的入门 Getting started,又是云里雾里的,好吧,只能耐心看文档和不断的实践吧。

Grunt入门

入门教程:

系统环境

centos 6.6 x64

Grunt安装过程:

1、前提安装了nodejs,进入官网后(http://nodejs.org/),点击“INSTALL”按钮,就会下载然后安装就行了。觉得现在windows安装node,挺简单的,感觉稳定性也提升了不少。

2、安装grunt命令行工具,有一句话总结“就是安装完CLI,还要在项目安装Grunt。”

1
npm install -g grunt-cli

安装grunt及其插件,进入到某项目根目录,在命令行模式下,例如文件在c盘testGrunt目录下,利用cd命令到testGrunt目录下后,使用命令:

1
npm install grunt --save-dev

3、输入版本号验证安装是否成功,输入:

1
grunt -version

在这里我选择一个存放后台管理的文件目录。

创建grunt项目

grunt项目一般需要以下内容:

1
2
3
1 、grunt( 需要安装)
2、 grunt 插件 (需要安装)
3、package.json 和 Gruntfile.js 。

(官方入门Getting started 说通过 grunt-init 和 npm init 创建。对于入门来说,这两中方式都不太好用。推荐直接创建 package.json 和Gruntfile.js 文件)

这里我之前创建过,直接在其他机器上面cp过来即可了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1.创建文件夹:health-Grunt
2.在health-Grunt下面创建2个文件package.json 和 Gruntfile.js
### 官网推荐:
``` bash
package.json 内容如下
{
"name": "smeitejs",
"version": "0.1.0",
"description": "js for smeite.com",
"homepage": "http://cc.com/",
"author": "helath <cc@qq.com>",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.3.0",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-contrib-cssmin": "~0.5.0"
}
}

这里我贴出我的本地配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"name": "grunt_project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.11.2",
"grunt-contrib-watch": "^0.6.1"
}
}

Gruntfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
uglify: {
options: {
mangle: false
},
build: {
files: {
'assets/config.min.js': ['js/config.js'],
'assets/smeite.min.js': ['js/smeite.js'],
'assets/index.min.js': ['js/index.js']
}
}
},
cssmin: {
compress: {
files: {
'assets/all.min.css': ['css/base.css', 'css/global.css']
}
},
// smeite: {
// files: {
// 'assets/smeite.all.css': ['/play21/smeite.com/public/assets/css/**/*.css']
// }
// },
with_banner: {
options: {
banner: '/* My minified css file test test */'
},
files: {
'assets/min/base.css': ['css/base.css'],
'assets/min/global.css': ['css/global.css']
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};

这里我自己配置的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect:{
yjklog:{
options:{
port:8088, 端口
base:'yjklog/front', 文件后台的日志查询的
livereload:true,
hostname:'192.168.1.133' 本机机器
}
},
yjk:{
options:{
port:8080, 端口
base:'yjk/front', 后台
livereload:true,
hostname:'192.168.1.133'
}
},
jgs:{
options:{
port:80, 端口
base:'yjk/jgs', 项目后台访问
livereload:true,
hostname:'192.168.1.182'
}
}
},
watch: {
options: {
livereload: '<%= connect.yjklog.options.livereload %>'
},
files: [
'<%= pkg.root %>/app/**/*',
'<%= pkg.root %>/assets/**/*'
]
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect','watch']);
};

所有在Gruntfile.js 配置了2个grunt插件:grunt-contrib-connect 和 grunt-contrib-watch
如果项目只需要压缩js和css文件。所有在Gruntfile.js 配置了2个grunt插件: grunt-contrib-uglify 和 grunt-contrib-cssmin

安装 grunt 插件:

在git 客户端键入命令 cd /health-Grunt;

1
2
3
4
键入命令 npm install grunt-contrib-watch 安装watch
键入命令 npm install grunt-contrib-connect 安装connect
键入命令 npm install grunt-contrib-uglify 安装uglify
键入命令 npm install grunt-contrib-cssmin 安装cssmin

官方的的话:查看第4步

1
2
3
4
4、 准备相关资料
testGrunt 目录下,创建 js目录,并在js目录下创建文件config.js smeite.js index.js ,创建css目录,并在css目录下创建base.css 和 global.css。 (这些文件都在Gruntfile.js 有配置,所以需要创建,内容可以随意的写)
5、执行grunt 命令
执行js压缩命令 grunt uglify 效果如下

我参考官网上面我Gruntfile.js 有配置,需要创建这些文件目录。yjk,front,yjklog.
后面就是前端事情了。
具体的就不详解了!
可以查看我github上面有详细的文档。

启动服务:

1
在目录当前后台启动: grunt &

搭建后台,需要对后台的端口开放防火墙设置。

去掉nginx js、css解压缩

1
2
3
4
5
6
7
# location ~ .*\.(js\|css)?$ {
# root /var/www/new/qiantai;
# default_type application/x-javascript;
# add_header Vary Accept-Encoding;
# add_header Content-Encoding gzip;
# gzip off;
# }