码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-08 00:12:36      阅读:390      评论:0      收藏:0      [点我收藏+]

标签:server   js   自动化   grunt   


文章作者:松阳

本文出自 阿修罗道,禁止用于商业用途,转载请注明出处。  

原文链接:http://blog.csdn.net/fansongy/article/details/44121699







http-server

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

npm install -g http-server

成功安装后,使用:

http-server -a hostip -p port

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

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

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

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

grunt

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

npm install -g grunt-cli

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

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

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插件和任务
  • 自定义任务

一个例子是这样的:

module.exports=function(grunt){

    grunt.initConfig({
        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‘
            }   
        }   
    }); 

    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

    grunt.registerTask(‘default‘,[‘uglify‘]);
};

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

如果你觉得这篇文章对你有帮助,可以顺手点个,不但不会喜当爹,还能让更多人能看到它... 技术分享

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

标签:server   js   自动化   grunt   

原文地址:http://blog.csdn.net/fansongy/article/details/44121699

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!