基于gulp前端静态站点结构

Ooo_My_God发表于 分类:构建工具 阅读(9894) 评论(13)

简介:

我们使用gulp来处理静态资源文件,通常将处理好的文件生成到一个新的文件夹,也许会有这么一个疑问,既然都生成到新的文件夹里了,那页面引用不是乱套了?纯属个人观点

1、概述

1.1、本文基于静态站点分离结构所写

1.2、通过gulp打包好(压缩、合并等操作)资源,通常会生成到新的一个文件夹内。像这样:

2、结合gulp静态资源分离实现的目的

2.1、将静态资源(img、js、css等跟程序部分完全分离),有利于处理CDN加速

2.2、方便在未打包和已打包资源切换调试,开发时当然不希望代码是压缩的

2.3、源码部分不想发布至线上,比如sass/less文件是不必放到线上的

2.4、……

3、开发时和线上的状态(后面的路径都是保持一致,只是站点路径不相同而已)

注:通常我们的页面都不是纯html,假设页面为php页面(所以让程序帮弄个配置,或者其他办法)实际上页面应该是这样的↓↓↓↓↓:

3.1、$this->config->item('domain_static');是读取配置文件,只要修改对应值,就可以切换源码和发布后的代码。相当于有一个开关,控制是开发阶段还是测试阶段。

例如:domain_static值为http://192.168.61.169:1111/则为开发源码,改为http://192.168.61.169:2222/则为发布代码,当然,线上domain_static值为http://static.ydcss.com/

3.2、大家可以根据实际情况,灵活改变即可。

4、结束语

4.1、本文有任何错误,或有任何疑问,欢迎留言说明。

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥
下一篇: >>

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/570

相关推荐

评论

回复给XXX取消回复

说点什么吧...

网友最新评论 (13)

  1. 不错

    kkk 02-24 15:14 回复
  2. 页面放在哪里了咧。是不是也两份哦?

    aaa 03-04 11:46 回复
    • 首先,这篇文章是基于静态文件分离而写的,当然不需要两份页面,页面属于程序那边,程序只要将引用链接改成动态的,并写入配置,修改配置即可切换src和dist。
      当然,静态文件没有分离,也是可以的,比如 script src=”../src/js/test.js”和 script src=”../dist/js/test.js”,只是../src和../dist不一样而已,想办法将他们写成动态就可以了。

      Ooo_My_God 03-08 11:32
  3. 你好,那经过 concat 后的代码怎么在每一处修改合并后的路径,而且不重复引用?

    猴哥 03-04 15:03 回复
    • 使用gulp-html-replace来替换吧,嗨翻天。。

      Ooo_My_God 03-08 11:37
    • js和css应该都有入口文件。

      一直在路上 04-13 13:55
  4. 对,js、css可以通过requirejs来配置一个入口

    黄帝e 09-16 18:11 回复
  5. html文件放在哪了

    02-15 15:27 回复
  6. 请问lib一般是放什么文件呢?

    Junbo 02-16 15:05 回复
  7. 请问用什么插件把他们写成动态的呢

    飘落的回忆 03-20 09:48 回复
  8. 请问我用了两个插件,一个gulp-file-include和gulp-htmlmin当我配置之后先用gulp fileinclude打包然后再用gulp htmlmin打包,后者会覆盖前面的那一个,请问这种如何解决。

    艾艾 04-25 20:06 回复
  9. 如果能加上一份gulpfile.js,写一个配置的例子就更好了

    rocky 04-28 21:46 回复
  10. 楼主你好,请问你这是什么IED

    BY 05-27 11:21 回复
输入关键字