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

最新推荐文章于 2024-05-13 09:32:44 发布

松阳

最新推荐文章于 2024-05-13 09:32:44 发布

阅读量2.1w

点赞数 10

分类专栏： web 文章标签： server js 自动化 grunt

本文链接：https://blog.csdn.net/fansongy/article/details/44121699

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章作者：松阳

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

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

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=2080045857&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Fandroid-game%2F1521.html&dpc=1" style="font-size: 14px; font-weight: bold; border-width: 0px; margin: 0px; padding: 0px; font-family: arial, helvetica, clean, sans-serif; line-height: 16px;">

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目录下。这个功能能干的事情还是挺多的。看到另一篇文章可以参考一下。

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