谈谈Grunt

傻大头
132 阅读2分钟

开始使用Grunt

　　通过阅读官方文档可以知道更多详细内容，下面只是总结一下，自己使用Grunt的一个实例，便于日后使用，可以按照这个套路进行~

安装 grunt-cli
1. 自备node环境(>0.8.0), npm包管理

2. 卸载旧版本grunt（<0.4.0） (没装过请忽略)

[JavaScript]
纯文本查看
复制代码
1
npm uninstall grunt -g


安装grunt-cli

[JavaScript]
纯文本查看
复制代码
1
npm install grunt-cli -g


开始使用Grunt构建项目

　　　一般需要在你的项目中添加两份文件：package.json 和 Gruntfile。

　　 然后，写好下面的gruntfile.js文件的格式

复制代码

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
module.exports = function(grunt) {
　　// 项目配置.
　　grunt.initConfig({
　　　　// 定义Grunt任务
　});
　// 加载能够提供"uglify"任务的插件。
　　grunt.loadNpmTasks('grunt插件');
　　// Default task(s).
　　grunt.registerTask('default', ['任务名']);
}


复制代码
下面是我的一个 gruntfile.js文件

复制代码

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
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
1 module.exports = function (grunt) {
2 grunt.initConfig({
3 watch: {
4 ejs: {
5 files: ['views/**'],
6 options: {
7 livereload: true,
8 },
9 },
10 js: {
11 files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],
12 options: {
13 livereload: true, //文件更新时重新启动服务
14 },
15 },
16 },
17 nodemon: {
18 dev: {
19 file: './bin/www' //根据自己的实际修改
20 }
21 },
22 concurrent: { // 同时执行nodemon和watch任务
23 target: {
24 tasks: ['nodemon', 'watch'],
25 options: {
26 logConcurrentOutput: true
27 }
28 }
29 }
30 });
31
32 // 加载包含 “watch","concurrent","nodemon"任务的插件
33 grunt.loadNpmTasks('grunt-contrib-watch')
34 grunt.loadNpmTasks('grunt-concurrent')
35 grunt.loadNpmTasks('grunt-nodemon');
36
37 grunt.option('force', true)
38 // 默认执行的任务列表
39 grunt.registerTask('default', ['concurrent'])
40 }


复制代码
最后，执行命令

将命令行的当前目录转到项目的根目录下。
执行 npm install 命令安装项目依赖的库。
执行 grunt 命令。
小结 Grunt的基本使用也就如上所示，比较简单，更多可以参考Grunt的插件库，比如 contrib-jshint js代码检查等插件的使用
转自https://www.cnblogs.com/kasmine/p/6436131.html


avatar
文章
阅读
粉丝