第一次使用 gulp,有个疑问。

2015-06-18 09:24:13 +08:00
 laoona

刚刚接触gulp,其实早就知道了前端构建,但一直没真正地运用到项目里,查了很多资料,这不,问题来了:

1、关于压缩文件的引用,css,js静态文件,压缩之后,会生成一个.min的新文件,开发环境引用的是没压缩之前的文件,要上线了,线上的环境要引用压缩之后的,不会一个个页面,手动修改引用地址吧?

2、有很多项目,每一次新建一个项目都要生成一个gulpfile.js,都需要执行gulp?

3、合并文件,同样也是怎样修改引用?

4、使用的是smarty,如何压缩生成的html?

求前辈们指导.

5687 次点击
所在节点    前端开发
16 条回复
FrankFang128
2015-06-18 09:32:41 +08:00
gulp usmin
learnshare
2015-06-18 09:40:42 +08:00
压缩产生的文件可以随意命名,默认是不修改名字的,所以不影响引用路径。
每个前端项目都要一个 gulpfile。
合并文件的话,我的做法是手动 copy 一个 index.html 并修改,gulp 任务里发布这个文件。
laoona
2015-06-18 09:53:51 +08:00
@learnshare 关于引用路径,我这样理解,不知道对吗?线上环境代码引用一直是压缩后的文件路径,不用更改。比如,开发环境是man.js。线上代码引用的时候,直接写main.min.js。这个.min.约定好,就不用更改了,这样保险不?出问题了,怎么调试啊,都是压缩后的文件,好恐怖。
learnshare
2015-06-18 10:16:03 +08:00
@laoona 上线的代码都是压缩处理后的,不过名字固定会带来一个问题:代码更新后,由于浏览器缓存,客户那边还是旧的代码。这个问题可以通过 1. 文件名带版本号 main.min.VERSION.js 或 2. 请求 URL 带 queryString main.min.js?v=VERSION,或其他服务器、后端方式解决。

开发的代码要做好充分的调试、测试,使用 Gulp 发布代码的时候,要注意生成 css/js 的 sourcemap 文件,这样可以方便出问题时候定位到源代码上。
laoona
2015-06-18 10:31:40 +08:00
@learnshare 嗯。好得,多谢,我再消化消化。
sodatea
2015-06-18 10:37:13 +08:00
@FrankFang128 gulp-usemin 在 gulp 官方黑名单里了 https://github.com/gulpjs/plugins/blob/master/src/blackList.json 不推荐使用,可以选用 gulp-useref
Garwih
2015-06-18 10:47:21 +08:00
开发环境直接引用压缩/合并后的文件,用 gulp.watch 监控代码变化实时更新,然后配合 css/js 生成的 sourcemap 进行调试。
FrankFang128
2015-06-18 11:01:37 +08:00
@sodatea 原来还有黑名单,为什么它进黑名单了?违反单一职能原则?
adjusted
2015-06-18 11:01:40 +08:00
用gulp rev 生成json 再写到模版里面
itommy
2015-06-18 11:08:28 +08:00
@sodatea 还有黑名单,同问为啥
nisnaker
2015-06-18 11:53:49 +08:00
特意注册来回答这个问题,我是这么设计的:

先用`gulp-rev`来管理资源文件的文件名,就是加上hash,来处理浏览器缓存的问题:
`admin.js` -> `admin-afsjdkf.js`

======

然后用`gulp-asset-manifest`来搜集所有处理过的资源文件,生成一个文件`asset-manifest.json`,大概长这样:
```
{ libs:
[ 'bootstrap.min-eedf9ee80c.css',
'angular.min-5b860c722c.js',
'bootstrap-2183d05f5a.css' ],
user: [ 'test-07422103d7.css' ] }
```

======

最后写了一个gulp的插件`gulp-rev-rep`,(额,本来打算叫replace的,结果已经有了,就改成rep),根据上边那个json文件来修改html模板中的资源引入标签:
```
<html>

<!-- libs assets -->
<% bundleName:libs %>

<!-- user page assets -->
<% bundleName : user %>

</html>
```
--->

```
<html>

<!-- libs assets -->
<script src="/static/js/angular.min-5b860c722c.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min-eedf9ee80c.css">
<link rel="stylesheet" href="/static/css/bootstrap-2183d05f5a.css">

<!-- user page assets -->
<link rel="stylesheet" href="/static/css/test-07422103d7.css">

</html>
```

demo地址: https://github.com/nisnaker/gulp-rev-rep/tree/master/demo
其他的合并啊压缩啊map啊根据需求自己找插件吧。
nisnaker
2015-06-18 11:55:18 +08:00
居然不支持md。。。。。。
foru17
2015-06-18 12:14:03 +08:00
https://github.com/foru17/justquicknode
我前几周自己配置的轮子
Gulp
Sass
EJS
i18n 国际化支持
自动发布静态资源到又拍云
静态资源自动增加MD5版本号
自动reversion ejs模板中的assets下静态资源路径为对应七牛资源
sodatea
2015-06-18 12:17:47 +08:00
@FrankFang128 @itommy
黑名单里写的理由是
1. does too much. 的确不如 useref 的职责分离做得好,但是感觉也不是主要理由
2. touches fs. 官方是不建议直接操作 fs 的,和其他 gulp 插件的互操作性不好
3. non-responsive author. GitHub 上成堆的 issues 和 pull requests 作者都不怎么理会……这也是我当初放弃 usemin 然后转到 useref 的最初原因
4. use gulp-useref.
itommy
2015-06-18 12:28:43 +08:00
@sodatea 我觉得是 "does too much" :p
wangxiao2015
2015-06-18 14:06:55 +08:00
使用下 yeoman 吧,全都有自动化的脚手架,自动的预编译过程,很多东西不用自己再搞一遍。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/199438

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX