JavaScript 好多视频网:Gulp+Sass+Jekyll+Browsersync 搭建起来的前端开发环境

happypeter · 2015年07月31日 · 最后由 kisnows 回复于 2015年09月26日 · 4222 次阅读

调试前端页面的时候我们想要什么功能呢?浏览器自动刷新,自动添加厂商前缀,Sass 预处理,html 布局和片段文件组织,以及其他很多随时我们想要的功能,其实...这些咱们这集视频里都有... 一般人我不告诉他。

观看视频:http://haoduoshipin.com/v/163

相信如果有同学在用这套东西的话,那么 sass/browsersync/autoprefixer 肯定是必不可少了。

我有一个问题要请教大伙,html 文件 concat 方面,大家是用 Jekyll 实现吗?如果不是,那各位采用什么方式来组合 html 片段呢?

对了,我的这套环境直接就搭建在公网域名下了,这样可以直接用手机打开调试,也是挺方便的。

赞,感谢@happypeter,近期通过你贡献的资源我学到了很多 web 方面的知识。

#1 楼 @happypeter 不明白为什么一定要用 jekyll?那不是把前端项目锁死在 jekyll 那一套里了?看你的要求貌似是利用 jekyll 来 concat html,理由?像 rails 那样实现 partials 的复用?

如果是这样的话,哪怕是纯粹的 html 都能做到啊,不管是 gulp grunt branch broccoli 都有 html concatnation 的插件,名字会略有差别,搜索一下就好了。

如果不喜欢繁琐的 html 语法,也可以用各种 template 引擎,比如 haml jade handlebars 这些都可以。如果用 angular ember 这样的框架,那么 template engine 也可以省了,自己就带着。

#1 楼 @happypeter 另外,坦白讲(没有恶意)你的 gulpfile 还有很多值得改进的地方,比如说:

browserSync 可以直接 watch,你可以把所有流程最后的输出目的地作为 watch 的目标,这样会省很多 gulp.watch 和 browserSync.reload

再比如反向代理,有了 node browserSync,其实没有必要使用 nginx 了,特别是本地开发的时候,能省则省。具体的细节可以看这里:https://ruby-china.org/topics/26608

不明白为什么一定要用 jekyll?

jekyll 只是我个人用的比较熟的,不否认有些情况下,将其替换可能是个好主意。

@nightire 用 node 直接设置反向代理的形式我回头要研究一下,多谢!

#4 楼 @nightire 请教一下,我们前端用 Express+jade 开发,但是后端是 java+jsp,我们前端的 jade 文件怎么交付给后端。我现在的做法是用 gulp 把 jade 编译成 html,但是这样的话 Express 中的模拟变量就没法用了。想问一下,有没有什么好的解决办法

#8 楼 @kisnows 既然后端是 Java+JSP,那么 Express 里模拟变量是为了什么呢?因为当进入生产环境之后,真正运行的还是 Java+JSP 吧?在那时 Express 还会有作用吗?

如果还会有作用,那么这个作用是通过什么方式传递给 JSP 那边的呢?Express 暴露 API,然后 Ajax 调用吗?既然如此,何不把 Express 做的事情交给 Java?

如果没有作用了,也就意味着 Express 只是在开发时用一用,那么等到整合进 JSP 的时候,直接输出 HTML 交给 JSP 的开发人员并没有什么错误。

你所面临的问题其实归根结底就是架构上的分工没有明确的问题,你的职责究竟是什么?最终产出物究竟是什么?如果答案就是静态 HTML 的话,你所做的事情是必须的。但如果答案是你要做动态化的东西,可是产品最终要体现在 Java+JSP 的环境内,那么:

  1. 要么把现在 Express 做的事情暴露 API 接口,然后用 Ajax 调用;这样即使交付给 JSP 环节的时候是静态 HTML 也没关系,因为数据在 JS 脚本里。要么把你的“模拟变量”的东西交给 Java;
  2. 丢弃 JSP,但是 Java 要改造成纯粹的 API Service,前端这边用什么都无所谓,因为数据最终是靠访问 API 获得的,你作为前端的开发者可以得到最大化的“能力”,想怎么做就怎么做。

#9 楼 @nightire 是这样的,我们前台用 Express 只是为了方便模拟生产环境,这样方便我们前端的模拟数据调用,属于‘只是在开发的时候用一用’,真正运行的时候 Express 就没用了。

我们最终交付的是静态的 html,但由于为了模拟生产环境,jade 会调用 Express 的一些变量,但是一旦调用了 Express 中的变量,gulp 编译就会出错,因为 gulp 并不能获取到 express 中的变量。以至于我现在把 express 当成一个单纯的文件服务器去用了。看来是我之前没有把这些事情想清楚。

至于你后面的两条建议,就我们公司的人员结构和现状来说不太现实。

最后,感谢你详细的回答。

#10 楼 @kisnows 明白了,我就说一件事,express 和 gulp 的中间环节是可以打通的,需要自己动手做一些改造;或者不使用 gulp 做 HTML 的最终 building,而是用 express 直接写出来,类似以前做 CMS 系统的页面静态化。

#11 楼 @nightire 其实我想的也是直接让 express 输出 html,毕竟它已经输出 html 到浏览器了,但是一直没有找到直接输出 html 到本地的办法,才选择了用 gulp。

#12 楼 @kisnows 输出 HTML 倒不是 Express 的直接职责,而是 Jade 的。你可以看一下 gulp-jade 的这段代码:

https://github.com/phated/gulp-jade/blob/master/index.js#L14

所以本质上不用 gulp 的话,就是要用 Express 去实现类似上面的功能,简单地说就是调用 jade 来输出 HTML。因为你是在 Express 里面调用 jade 的,所以你的模拟变量都是可以直接使用的。

貌似好高大上啊!回头试试啊!哈哈

#13 楼 @nightire 嗯,这个我知道。因为 express 默认的模版引擎就是 jade 嘛。我在研究下 express,找找其它的办法。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号