安装好grunt,cmd 提示"grunt不是内部或外部命令" 怎么办

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了安装好grunt,cmd 提示"grunt不是内部或外部命令" 怎么办相关的知识,希望对你有一定的参考价值。

参考技术A (一)

去官网下载安装包 node-v6.9.2.msi,直接点击安装。

windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,默认路径是“C:\Program Files\nodejs”

安装后,npm也跟着安装完成。非常智能,以前还需要安装git 这个工具。

(二)

使用window+r,输入cmd。如果是w10系统,则需要以管理员身份运行cmd。

如果能正确显示版本号,则表示安装成功。

(三)

配置npm的全局模块的存放路径以及cache的路径。

(1)便在NodeJs下建立"node_global"及"node_cache"两个文件夹。

(2)启动cmd,输入

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

(3)系统变量下新建"NODE_PATH",输入”C:\Program Files\nodejs\node_global\node_modules”

用户变量"PATH"修改为“C:\Program Files\nodejs\node_global\”

(三)

(1)安装grunt。

以管理员身份运行 如下命令

npm install -g grunt-cli

(2)

测试是否安装成功。

cmd,输入命令行 grunt -version,显示版本号即成功。

很多时候,会提示 “grunt不是内部或外部命令”,该怎么办呢? 

这是因为我们虽然在 已经安装了grunt,但是没有指定正确的环境变量Path(用户变量或系统变量)。

例如,在我的系统中,gurnt.cmd 在 "C:\Program Files\nodejs\node_global"

那么,你可以在 "用户变量"或"系统变量"的Path 指定路径。

关闭后,重新启动cmd运行即可。

Grunt——自动化任务处理工具框架

学习文章,详细原文链接:http://yujiangshui.com/grunt-basic-tutorial/

1.  grunt是一个JavaScript任务运行器,自动化任务处理工具,是一个工具框架。

2.  grunt基于node.js,用js开发。

3.  安装grunt

  (1)安装Node.js  

  (2)npm install -g grunt-cil   (注意:安装的并不是Grunt,而是Grunt-cil,即命令行的Grunt,这样可以使用Grunt命令来执行某个项目中的Gruntfile.js中定义的task。Grunt-cil只是一个命令行工具,用来执行,而不是Grunt工具本 身。

  (3)生成package.json文件:在项目根目录下运行npm init。

  (4)安装grunt到当前项目:

    项目根目录下运行:npm install grunt --save-dev(表示把安装的东西添加到package.),这样,当前项目就依赖grunt,如果安装时没有添加--save-dev参数,需要自行添加信息到package.json。

4.  安装grunt插件:

  npm install --save-dev grunt-contrib-concat grunt-contrib-jshint..........

  安装后项目中的node_modules文件下会出现相应的插件文件夹。注意:项目中的node_modules文件夹不需要上传,因为package.json文件记录了项目中依赖的插件信息。下载后,在项目文件夹下面输入命令 npm install,NPM会自动读取package.json,将grunt和有关的插件下载。

5.  配置Gruntfile.js文件

1 module.exports=function(grunt){
2     .......
3    (1)任务配置代码
4    (2)插件加载代码
5    (3)任务注册代码
6 };

  用grunt来注册的一个task从而根据任务配置代码调用需要的插件来执行相应的操作。

6.  具体实例学习详见原文作者github项目。(感激作者)

7.  实例:

  (1)一般模板

  

 1 module.exports=function(grunt){
 2 
 3 //任务配置代码:以对象的格式放在grunt.initConfig函数里面
 4 grunt.initConfig({
 5     pkg:grunt.file.readJSON(‘package.json‘),//读取package.json文件,并把里面的信息获取出来
 6     uglify:{//在Uglift插件下面,有一个buile任务,内容是把xx.js压缩输出到xx.min.js里面
 7         options:{
 8             banner:‘/*!<%=pkg.name%><%=grunt.template.today("yyyy-mm-dd")%>*/\n‘
 9         },
10         build:{
11             src:‘src/<%=pkg.name%>.js‘,
12             dest:‘build/<%=pkg.name%>.min.js‘
13         }
14     }
15 });
16 
17 
18 //插件加载代码
19 grunt.loadNpmTasks(‘grunt-contrib-uglifg‘);
20 
21 //任务注册代码:zai default上满注册了一个Uglify任务,default就是别名,
22 //默认的task,当我们在项目目录中执行grunt命令的时候,它会执行注册到default上面的任务。
23 grunt.registerTask(‘default‘,[‘uglify‘]);
24 
25 
26 /*eg:注册其他的task
27     grunt.registerTask(‘compress‘,[‘uglify:bulid‘]);
28 
29     需要输入grunt compress 命令来执行这条task,而这条task任务是uglify下面的build任务,
30     也就是说只会执行uglify里面的bulid定义的任务,而不会执行uglify里面定义的其他任务。
31 */
32 
33 
34 
35 /*需要注意的是:
36     task的命名不能与后面的任务配置同名,也就是说这里的comperss不能命名为uglify,这样会报错或是产生意外情况。
37 */
38 
39 
40 };

  (2)作者实例

 1 module.exports = function(grunt) {
 2 
 3   var sassStyle = ‘expanded‘;
 4 
 5   grunt.initConfig({
 6     pkg: grunt.file.readJSON(‘package.json‘),
 7     sass: {
 8         output:{
 9             options:{
10                 style:sassStyle
11             },
12             files:{
13                 ‘./style.css‘:‘./scss/style.scss‘/*将 ./scss/style.scss这个文件以sassStyl变量存储的方式编译成根目录下面的style.css*/
14             }
15         }
16     },
17 
18     concat:{
19         options:{
20             // separator:‘;‘,/*该参数本来是为了防止两个文件之间相互干扰设置的,结果无法被jshint验证通过,可以*/
21         },
22         dist:{
23             src:[‘./src/plugin.js‘,‘./src/plugin2.js‘],
24             dest:‘./global.js‘,
25         },
26     },
27 
28     uglify:{
29         compressjs:{
30             files:{
31                 ‘./global.min.js‘:[‘./global.js‘]
32             }
33         }
34     },
35 
36     jshint:{
37         all:[‘./global.js‘]
38     },
39     watch:{
40         script:{
41             files:[‘./src/plugin.js‘,‘/src/plugin2.js‘],
42             tasks:[‘concat‘,‘jshint‘,‘uglity‘]
43         },
44         sass:{
45             files:[‘./scss/style.scss‘],
46             tasks:[‘concat‘,‘jshint‘,‘uglify‘]
47         },
48         liverload:{
49             options:{
50                 liverload:‘<%=concat.options.liverload%>‘
51             },
52             files:[
53                 ‘index.html‘,
54                 ‘style.css‘,
55                 ‘js/global.min.js‘
56             ]
57         }
58     },
59     connect:{
60         options:{
61             port:9000,
62             open:true,
63             liverload:35729,
64             hostname:‘localhost‘
65         },
66         srver:{
67             options:{
68                 port:9001,
69                 base:‘./‘
70             }
71         }
72     }
73 
74   });
75 
76   grunt.loadNpmTasks(‘grunt-contrib-sass‘);
77   grunt.loadNpmTasks(‘grunt-contrib-concat‘);
78   grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
79   grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
80   grunt.loadNpmTasks(‘grunt-contrib-watch‘);
81   grunt.loadNpmTasks(‘grunt-contrib-concat‘);
82 
83   grunt.registerTask(‘outputcss‘,[‘sass‘]);
84   grunt.registerTask(‘concatjs‘,[‘concat‘]);
85   grunt.registerTask(‘compressjs‘,[‘concat‘,‘jshint‘,‘uglify‘]);
86   grunt.registerTask(‘watchit‘,[‘sass‘,‘concat‘,‘jshint‘,‘uglify‘,‘connect‘,‘watch‘]);
87   grunt.registerTask(‘default‘);
88 
89 };

注意:以上例子在本地运行时,因为本地环境问题,有部分功能不能实现,希望在后面继续深入了解。


以上是关于安装好grunt,cmd 提示"grunt不是内部或外部命令" 怎么办的主要内容,如果未能解决你的问题,请参考以下文章

开始菜单中找不到安装好的anaconda怎么办

由于 yeoman mean 中的警告,grunt 服务中止

关于解决cmd中执行java提示"找不到或无法加载主类"的问题

nodejs:cmd中输入node -v提示不是内部文件等

Grunt

Grunt——自动化任务处理工具框架