如何把css文件和js文件整合正在一个html文件里面

html-css022

如何把css文件和js文件整合正在一个html文件里面,第1张

人民币就算了,丢不起这个份儿啊

在 HTML 里直接使用 CSS 和 JS,你只需要把 CSS 和 JS 文件里的代码复制到 HTML 代码的 <head></head>中间即可,最后应该是这样的

<head>

.

.

.

head 里面的其他标记

.

.

.

<style type="text/css">

    把 CSS 代码复制到这里

</style>

<script type="text/javascript" language="javascript">

<!--

    把 JS 代码复制到这里

-->

</script>

</head>

gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs,安装nodejs。

完成nodejs安装之后,需要使用npm安装gulp。

先安装全局gulp

npm install -g gulp然后在项目根目录下安装本地gulp。

此时项目根目录下会多出下面这个文件夹 node_modules

好的,现在gulp已经安装完成了,但是gulp本身不提供js压缩合并等功能,需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能,先安装相应的插件:

1.css压缩 gulp-minify-css

2.js压缩 gulp-uglify

3.js合并 gulp-concat

由于压缩之前需要对js代码进行代码检测,压缩完成之后需要加上min的后缀,我们还需要安装另外两个插件:

网上有很多合并js、css的工具,在线的、服务器上自动合并的,发布项目的时候自动打包合并的,甚至wordpress插件形式的都有。

自己ctrl+c、ctrl+v手工也可以合并。

我就不明白什么个人博客,小公司网站热衷于合并这个那个,减少那一点点请求有嘛用。多数这种网站一天访问量不会上万。

人家淘宝、百度这些那是一天要处理数亿的请求,光节约那点流量下来就是钱,快那0.01秒才体现得出用户体验的价值。小网站,你再打开快0.2秒,也绝定了没人看,要看的始终会看。