刚刚接触gulp,其实早就知道了前端构建,但一直没真正地运用到项目里,查了很多资料,这不,问题来了:
1、关于压缩文件的引用,css,js静态文件,压缩之后,会生成一个.min的新文件,开发环境引用的是没压缩之前的文件,要上线了,线上的环境要引用压缩之后的,不会一个个页面,手动修改引用地址吧?
2、有很多项目,每一次新建一个项目都要生成一个gulpfile.js,都需要执行gulp?
3、合并文件,同样也是怎样修改引用?
4、使用的是smarty,如何压缩生成的html?
求前辈们指导.
1
FrankFang128 2015-06-18 09:32:41 +08:00 via Android
gulp usmin
|
2
learnshare 2015-06-18 09:40:42 +08:00
压缩产生的文件可以随意命名,默认是不修改名字的,所以不影响引用路径。
每个前端项目都要一个 gulpfile。 合并文件的话,我的做法是手动 copy 一个 index.html 并修改,gulp 任务里发布这个文件。 |
3
laoona OP @learnshare 关于引用路径,我这样理解,不知道对吗?线上环境代码引用一直是压缩后的文件路径,不用更改。比如,开发环境是man.js。线上代码引用的时候,直接写main.min.js。这个.min.约定好,就不用更改了,这样保险不?出问题了,怎么调试啊,都是压缩后的文件,好恐怖。
|
4
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 文件,这样可以方便出问题时候定位到源代码上。 |
5
laoona OP @learnshare 嗯。好得,多谢,我再消化消化。
|
6
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
|
7
Garwih 2015-06-18 10:47:21 +08:00
开发环境直接引用压缩/合并后的文件,用 gulp.watch 监控代码变化实时更新,然后配合 css/js 生成的 sourcemap 进行调试。
|
8
FrankFang128 2015-06-18 11:01:37 +08:00
@sodatea 原来还有黑名单,为什么它进黑名单了?违反单一职能原则?
|
9
adjusted 2015-06-18 11:01:40 +08:00 via iPhone
用gulp rev 生成json 再写到模版里面
|
11
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啊根据需求自己找插件吧。 |
12
nisnaker 2015-06-18 11:55:18 +08:00
居然不支持md。。。。。。
|
13
foru17 2015-06-18 12:14:03 +08:00 1
https://github.com/foru17/justquicknode
我前几周自己配置的轮子 Gulp Sass EJS i18n 国际化支持 自动发布静态资源到又拍云 静态资源自动增加MD5版本号 自动reversion ejs模板中的assets下静态资源路径为对应七牛资源 |
14
sodatea 2015-06-18 12:17:47 +08:00 1
@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. |
16
wangxiao2015 2015-06-18 14:06:55 +08:00
使用下 yeoman 吧,全都有自动化的脚手架,自动的预编译过程,很多东西不用自己再搞一遍。
|