这是一个创建于 3479 天前的主题，其中的信息可能已经有所发展或是发生改变。
刚刚接触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 吧，全都有自动化的脚手架，自动的预编译过程，很多东西不用自己再搞一遍。
|
Select Language