分享一个angular+browserify+coffee+gulp+sass的模板
发布于 5 年前 作者 soliury 8573 次浏览 最后一次编辑是 3 年前 来自 分享

现在这个项目是作为我开发项目时的种子模板,目前还不完善。分享一下,希望有人能和我一起完善。

原本这个项目是有从angularjs-gulp-browserify-boilerplate发源而来。感谢。

地址:ngFast

介绍

如何开始

git clone https://github.com/soliury/ngFast
cd ngFast && sudo npm install

主要命令:

  1. gulp dev:运行本地开发模式,自动watch文件然后编译sass,编译coffee,然后bundler。
  2. npm run build:编译文件,这个命令其实是调用:NODE_ENV=dev-online gulp build && NODE_ENV=production gulp build,改命令会再build下生成两个文件夹,production和dev-online。前者是为了用于线上的测试服务器,后者用于线上的投入运营的服务器。至于为什么要采取这么复杂的方式要添加一个NODE_ENV,我稍后再解释。
  3. gulp tdd: 运行unit测试。
  4. npm run server:dev:运行本地server,代理build文件夹下得dev-online,这是为了测试是否build生成的文件能否正确运行,而且可以查看gzip过后的大小。
  5. npm run server:production:同上。代理production文件夹下的文件。

有什么特点

  1. 首先这是一个gulp+coffee+browerify来开发angular的模板。
  2. 采用gulp作为项目构建辅助开发工具,反正我是已经放弃grunt了。因为gulp好用又快。
  3. 用browserify来做前端包依赖管理。用node的require方式来写前端,就一个字,爽。第一次编译时速度不快,但是第一次编译后就会缓存到内存,第二次编译时就十分迅速,一秒以内。
  4. gulp serve来做本地静态代理,然后用browser-sync同步浏览器和代码。每次运行自动打开本地ip地址,手机上登录该地址也便可以访问,开发时,利于手机端调试。
  5. 自动获取ip供browserify使用。在本地开发的时,有时前台调用的api是本地的,自然api就得填写本地的api地址,填写http://localhost:3000等当然不行,手机上就没法用,所以运行gulp时会自动探测本地电脑的内网ip,这个ip会传给browserify,在编写程序时,调用process.env.ip就行。这样就算是换了一个ip也行,反正每次都会自动获取ip。详情请看config。
  6. 一个命令build出两个版本,使得线上测试app和要发布到生产环境的app代码一样,这样就不用线上测试时build一次,然后发布到生产环境时再build一次。而且也难以保证线上测试的代码和要发布到生产环境的代码一致。
  7. gulp-plumber打补丁,再也不用怕sass和coffee代码写错时编译出错导致整个gulp程序不能进行了。
28 回复

好东西

  • browserify不是必须的,如果不是把node模块在浏览器里用就没啥必要
  • 把livereload加进来会更爽,里面有tiny-lr,不过还要改改,可以参考ionicframework的serve方法
  • express去掉,没啥必要,太重,package.json有package.json很大优化空间,另外watchify和gulp-watch-changed会不会有点重复呢?

为何用sass,而不用Less? browserify可以完全替代bower么?

@i5ting 恩恩,browserify吧,只是觉得用起来还ok,就习惯用了。而且和angular一起用起来,也是不错的,也做过几个项目,还不错。

livereload是神马东西,没听说过,待会研究一下。

express当初只是图简单,另外,gulp-watch-changed这个貌似没用到,之前有用,后来忘删除。

参考https://github.com/driftyco/ionic-cli ,有点意思

@i5ting 恩恩,好的,我去看看,谢谢推荐啊。

@i5ting 有个疑问,livereload和browserSync功能重合了啊,感觉browserSync也够我用了。

我擦 ,你到哪都是这么吊啊

@Dengshen 这个,你是在说i5ting这哥们吧

@chapgaga 这个用sass和less属于个人喜好吧,我两者都ok。 browserify其实还是很好用的,倒不是说可以替代bower,两者是两个不同类型的东西嘛。

@soliury browserify把node库打包成一个js文件,这样程序不会很大么? 会有性能问题?

@chapgaga 需要引用才引用嘛,不然当然大啊。

@soliury npm install 太耗cpu了,硬盘狂转…

怎么sass需要编译啊? 有什么办法可以避免编译么? 这种编译太折腾了

先安装,后自动卸载? 半天,显示 not ok, 这是没有成功么?

你用npm安装居然能安上,我现在要不翻墙要不用cnpm……先运行一下gulp dev,看有什么错误, 自豪地采用 CNodeJS ionic

直接yeoman 化呗

@shuson 其实有想过,但是yoeman化反而不方便,更新起来也不方便,这样反而很好,想要开启一个新项目时,直接clone下来就开始搞。

@Dengshen 醉了,难道我认识你?。。。。。。

@soliury 我是邓杰啊!别说你已经不认识我拉!

@Dengshen 你还在微卖啊?

恩,没别的地去啊!不太会啊!我要向你学习!!!!!!!

@Dengshen 毕业以后跳槽撒?

不知道啊!看看吧!跳去哪啊!:(

@Dengshen 请上拉勾 。。。。哈哈

@soliury 楼主还在继续吗? 我们近期正在用这个,想请教请教啊

@xushao0305 这个项目我会一直更新,有问题可以提issue

回到顶部