web开发工具 http-server , grunt 使用

标签：

http-server

它是一个简单的服务部署，与Express相比，这货更轻了，它只是一个服务搭建工具，完全可以不安装到项目的目录中。安装使用：

1. npm install -g http-server  

成功安装后，使用：

1. http-server -a hostip -p port  

即可拉起当前目录的web应用。

当然，如果少年你比较倔强，非得安装到本地项目中也是可以的。启动时，就要在web应用的根目录运行：

1. node ../node_modules/http-server/bin/http-server  

其他参数用-h查看就行。有个小坑，有时候更改文件后重启服务页面不一定立刻生效  删掉浏览器缓存吧。

grunt

这货是个自动化的插件，编译，压缩，单测啥的，只要够懒，它就够强大。它官网在这，感觉本土化做得不错，估计有坑挖的也挺漂亮。安装运行：

1. npm install -g grunt-cli  

这个是一个启动器，有点像Express创建项目那个东西。也建议全局安装了，估计每个项目都得用。

在项目中安装可以使用命令：

1. npm install grunt --save-dev  

2. 算是下载并保存到package.json里面。然后加入其他好基友的方法也是一样的，常用的有：

   • grunt-contrib-jshint 检测js文件
   • grunt-contrib-uglify 混淆压缩
   • grunt-contrib-nodeunit node单测
   • grunt-contrib-watch 检测文件变化

   安装好grunt后得配置一下，在package.json文件同级目录下创建一个Gruntfile.js 。根据官方文档 ，Gruntfile由以下几部分构成：

   • "wrapper" 函数
   • 项目与任务配置
   • 加载grunt插件和任务
   • 自定义任务

   一个例子是这样的：

1. module.exports=function(grunt){  
2.   
3.     grunt.initConfig({  
4.         pkg:grunt.file.readJSON(‘package.json‘),  
5.         uglify:{  
6.             options:{  
7.                 banner:‘/*!<%=pkg.name%> <%=grunt.template.today("yyyy-mm-dd")%> */\n‘  
8.             },    
9.             build:{  
10.                 src:‘src/<%=pkg.name%>.js‘,  
11.                 dest:‘build/<%= pkg.name %>.min.js‘  
12.             }     
13.         }     
14.     });   

编写好后运行grunt 或者 grunt uglify就可以将src目录下的包名文件压缩到build目录下。这个功能能干的事情还是挺多的。看到另一篇文章 可以参考一下。

1.   
2.     grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  
3.   
4.     grunt.registerTask(‘default‘,[‘uglify‘]);  
5. };  

http-server

它是一个简单的服务部署，与Express相比，这货更轻了，它只是一个服务搭建工具，完全可以不安装到项目的目录中。安装使用：

[javascript] view plain copy

 

 print?

1. npm install -g http-server  

成功安装后，使用：

[javascript] view plain copy

 

 print?

1. http-server -a hostip -p port  

即可拉起当前目录的web应用。

当然，如果少年你比较倔强，非得安装到本地项目中也是可以的。启动时，就要在web应用的根目录运行：

[javascript] view plain copy

 

 print?

1. node ../node_modules/http-server/bin/http-server  

其他参数用-h查看就行。有个小坑，有时候更改文件后重启服务页面不一定立刻生效  删掉浏览器缓存吧。

grunt

这货是个自动化的插件，编译，压缩，单测啥的，只要够懒，它就够强大。它官网在这，感觉本土化做得不错，估计有坑挖的也挺漂亮。安装运行：

[javascript] view plain copy

 

 print?

1. npm install -g grunt-cli  

这个是一个启动器，有点像Express创建项目那个东西。也建议全局安装了，估计每个项目都得用。

在项目中安装可以使用命令：

[javascript] view plain copy

 

 print?

1. npm install grunt --save-dev  

算是下载并保存到package.json里面。然后加入其他好基友的方法也是一样的，常用的有：

• grunt-contrib-jshint 检测js文件
• grunt-contrib-uglify 混淆压缩
• grunt-contrib-nodeunit node单测
• grunt-contrib-watch 检测文件变化

安装好grunt后得配置一下，在package.json文件同级目录下创建一个Gruntfile.js 。根据官方文档 ，Gruntfile由以下几部分构成：

• "wrapper" 函数
• 项目与任务配置
• 加载grunt插件和任务
• 自定义任务

一个例子是这样的：

[javascript] view plain copy

 

 print?

1. module.exports=function(grunt){  
2.   
3.     grunt.initConfig({  
4.         pkg:grunt.file.readJSON(‘package.json‘),  
5.         uglify:{  
6.             options:{  
7.                 banner:‘/*!<%=pkg.name%> <%=grunt.template.today("yyyy-mm-dd")%> */\n‘  
8.             },    
9.             build:{  
10.                 src:‘src/<%=pkg.name%>.js‘,  
11.                 dest:‘build/<%= pkg.name %>.min.js‘  
12.             }     
13.         }     
14.     });   
15.   
16.     grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  
17.   
18.     grunt.registerTask(‘default‘,[‘uglify‘]);  
19. };  

编写好后运行grunt 或者 grunt uglify就可以将src目录下的包名文件压缩到build目录下。这个功能能干的事情还是挺多的。看到另一篇文章 可以参考一下。

web开发工具 http-server , grunt 使用

标签：

原文地址：http://www.cnblogs.com/zhyp/p/5597616.html