V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
laoona
V2EX  ›  前端开发

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

  •  
  •   laoona · 2015-06-18 09:24:13 +08:00 · 5639 次点击
    这是一个创建于 3430 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    求前辈们指导.

    16 条回复    2015-06-18 14:06:55 +08:00
    FrankFang128
        1
    FrankFang128  
       2015-06-18 09:32:41 +08:00 via Android
    gulp usmin
    learnshare
        2
    learnshare  
       2015-06-18 09:40:42 +08:00
    压缩产生的文件可以随意命名,默认是不修改名字的,所以不影响引用路径。
    每个前端项目都要一个 gulpfile。
    合并文件的话,我的做法是手动 copy 一个 index.html 并修改,gulp 任务里发布这个文件。
    laoona
        3
    laoona  
    OP
       2015-06-18 09:53:51 +08:00
    @learnshare 关于引用路径,我这样理解,不知道对吗?线上环境代码引用一直是压缩后的文件路径,不用更改。比如,开发环境是man.js。线上代码引用的时候,直接写main.min.js。这个.min.约定好,就不用更改了,这样保险不?出问题了,怎么调试啊,都是压缩后的文件,好恐怖。
    learnshare
        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 文件,这样可以方便出问题时候定位到源代码上。
    laoona
        5
    laoona  
    OP
       2015-06-18 10:31:40 +08:00
    @learnshare 嗯。好得,多谢,我再消化消化。
    sodatea
        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
    Garwih
        7
    Garwih  
       2015-06-18 10:47:21 +08:00
    开发环境直接引用压缩/合并后的文件,用 gulp.watch 监控代码变化实时更新,然后配合 css/js 生成的 sourcemap 进行调试。
    FrankFang128
        8
    FrankFang128  
       2015-06-18 11:01:37 +08:00
    @sodatea 原来还有黑名单,为什么它进黑名单了?违反单一职能原则?
    adjusted
        9
    adjusted  
       2015-06-18 11:01:40 +08:00 via iPhone
    用gulp rev 生成json 再写到模版里面
    itommy
        10
    itommy  
       2015-06-18 11:08:28 +08:00
    @sodatea 还有黑名单,同问为啥
    nisnaker
        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啊根据需求自己找插件吧。
    nisnaker
        12
    nisnaker  
       2015-06-18 11:55:18 +08:00
    居然不支持md。。。。。。
    foru17
        13
    foru17  
       2015-06-18 12:14:03 +08:00   ❤️ 1
    https://github.com/foru17/justquicknode
    我前几周自己配置的轮子
    Gulp
    Sass
    EJS
    i18n 国际化支持
    自动发布静态资源到又拍云
    静态资源自动增加MD5版本号
    自动reversion ejs模板中的assets下静态资源路径为对应七牛资源
    sodatea
        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.
    itommy
        15
    itommy  
       2015-06-18 12:28:43 +08:00
    @sodatea 我觉得是 "does too much" :p
    wangxiao2015
        16
    wangxiao2015  
       2015-06-18 14:06:55 +08:00
    使用下 yeoman 吧,全都有自动化的脚手架,自动的预编译过程,很多东西不用自己再搞一遍。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2952 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 14:37 · PVG 22:37 · LAX 06:37 · JFK 09:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.