前端IDE HBuilder还是很受欢迎的,在开始进行开发之前,这几件事可能是你有必要完成的。这里先列出来先: 1. 集成终端(cmd.exe); 2. 写自定义代码段; 3. 常用文件类型模板制作; 4. 部署外置服务器; 5. FTP/Git等设置; 方法/步骤 现在的前端开发都进入了自动化/模块化开发了,包括文件编译/打包/同步都依赖插件自动化完成。没有终端cmd.exe的话工作起来不够方便。所以下载HBuilder之后的第一件事建议先集成终端程序。这一步我已经在另外一篇经验里写怎么设置了,下面附上经验链接: 自定义代码段是快速输入的一个途径,相较之下HBuilder的代码提示支持的语言还是有点少,如果有自己需要无数次重复使用的代码段,设置成代码段提示是最佳的选择。下面开始: 1. 工具——>扩展代码块——(选择你需要自定义的文件类型,如:自定义js代码块) 2. 在弹出的界面就可以开始了,HBuilder官方的注释已经很清楚了,按照模板来就好。原先的示例可以全部注释掉,然后加上自己的。写完保存就可以立马生效了。我写了一段给gulpfile.js用的代码块,如下: #*********** FOR gulpfile.js begin************** # for gulp require() snippet "var pluginname = require('gulp-pluginname')" do |s| s.trigger = "gv" s.expansion = "var $1 = require('gulp-$0');" end # for gulp gulp.task('',fn) snippet "gulp.task('name',fn)" do |s| s.trigger = "gt" s.expansion = "gulp.task('$1',function(){ gulp.src('$0') .pipe() });" end #for gulp.src('') snippet "gulp.src('path')" do |s| s.trigger = "gs" s.expansion = "gulp.src('$1') .pipe($0)" end #for gulp.dest('') snippet ".pipe(gulp.dest('path'))" do |s| s.trigger = "gd" s.expansion = ".pipe(gulp.dest('$1')) $0" end #for gulp.watch('',['']) snippet "gulp.watch('taskName',['taskName']);" do |s| s.trigger = "gw" s.expansion = "gulp.watch('$1',['$0']);" end #for gulp.task(''fn(){gulp.watch('',[fn])}) snippet "gulp.task('taskName',function(){ gulp.watch('',['taskName']); });" do |s| s.trigger = "gtw" s.expansion = "gulp.task('$1',function(){ gulp.watch('$0',['']); });" end #for gulp.pipe() snippet ".pipe()" do |s| s.trigger = "gp" s.expansion = ".pipe($1) $0" end # for gulp .pipe(pluginname({option})) snippet ".pipe(pluginname({option}))" do |s| s.trigger = "gpo" s.expansion = ".pipe($1({$0})) .pipe()" end #for gulp default task snippet "gulp.task('default',['taskName'])" do |s| s.trigger = "gtd" s.expansion = "gulp.task('default',['$1']); $0" #*************** FOR gulpfile.js end************** |
正在阅读:使用HBuilder开发前必做的几件事使用HBuilder开发前必做的几件事
2019-01-29 15:05
出处:其他
责任编辑:lixianmei
- Hbuilder系列软件最新版本下载
- Hbuilder软件版本:9.1.19 正式版编程开发立即查看
- HBuilder软件版本:5.5.1Android软件立即查看