以下列举一些比较好用的前端开发工具,如果你能很好的使用它们我相信你将会有更高的编程效率,说句实话我很讨厌有这么多的工具,

因为作为一个开发人员要不停的去学习这些东西真心很累,可是谁叫我们不想做一被淘汰的人呢,咬咬牙还是了解下吧。

前端ide推荐:

1.sublime这是一款轻量级的前端编辑工具,它支持各种插件,有非常好的代码提示功能,对编写前端的你将会有非常大的帮助,

更重要的一点是他有wins和linux版本哦。注册码可以在noteshare中找到哦。

2.HBuilder:中国人的前端神器,可以build各种移动端应用,非常的方便,有着想eclipse一样强大的代码提示功能,用起来非常的情切。

前端server:轻量级server,http-server

这是一款简单的http-server可以让你在用服务的形式来访问页面,它是基于NodeJs的HTTP接口。地址:https://www.npmjs.com/package/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查看就行。有个小坑,有时候更改文件后重启服务页面不一定立刻生效删掉浏览器缓存吧。


代码合并混淆工具:



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

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. npm install -g grunt-cli  

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

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

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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目录下。

依赖管理工具:bower

类似后端的maven;其作用有,可以通过其来检测版本兼容问题,可以用来自动安装依赖,当依赖的js被删除时会有提示功能,提示其需要依赖改js是否确认删除


其他的不多说,我们给出两张图来列举下,大家可以自己去尝试。











浏览 524 评论 0 赞 0 砸 0 标签: 前端 工具
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款