css打包到jsgulp,css打包到一个文件

本文目录一览：

• 1、nodejs：用ejs模板和gulp实现前端组件化
• 2、怎么用gulp压缩js和css文件
• 3、css加载会造成阻塞吗？css加载会阻塞js运行吗？
• 4、gulp压缩合并css/js时，怎么自动修改引用压缩后的css/js的路径
• 5、gulp有没有插件可以把js，css文件的内容合并到html页面中

nodejs：用ejs模板和gulp实现前端组件化

最近在用nodejs将公司商城的底层重写。基于nodejs的强大，我从原本的只写前端变成了写全栈。

框架采用express,模板用ejs,前端用amazeui. 做完三个页面后，设计突然说要改UI设计，我勒个去，郁闷地一个个页面重新调整。下班之后反思一下，觉得花了太多时间在重复劳动上，是时候涉猎一下前端工程化的知识了。

用百度在互联网畅游了一番，总结了一下前端工程化的几个关键要素：编码规范化，结构模块化，流程自动化。本文所述的方法属于模块化，但只是简单地把dom，css,js拆分，以便更好地管理，而并非像vue框架那样的组件化，但这种方式可能更易于理解，可以作为过渡。

这是原来的目录结构

其中public目录里存放的是静态资源，按照传统的做法，css文件夹种存放less文件和css文件，img文件夹中存放图片资源，js中存放各页面（views目录中对应的页面）的js文件。

当页面越来越多，会遇到一些重复的部分。像图中的侧边菜单，顶部搜索框，底部菜单，在几个页面都有。如果每个页面拷贝一份样式，js，dom,当需求方要更改样式或者增加功能的时候，徒增工作量。

在一篇文章的启发下（ 前端开发工程化探讨 ），我将目录结构改成如下：

为了标准化，每个组件里的文件命名都相同。以侧边工具栏为例，dom.ejs是一个模板文件：

如果不熟悉ejs模板的语法，可以百度一下。另外，此模板还支持嵌套，并传入参数。

例如，下面是一个列表容器的dom结构，配合js可以实现上拉加载功能，但列表项的样式可能不一样，你可以在使用时再根据传入的templateName参数决定用哪个模板，非常灵活。

在使用模板时，这样嵌入页面。

注意，应使用%-include()%,而非%=include()%。%-%表示内容原样输出，不进行运算。而%=%会生成运算后的内容。

然后，再来考虑js和css文件应当怎么处理。如果在页面中逐个引入组件的js和css文件，维护起来会非常不方便。所以我考虑将某个页面涉及到的组件，还有页面本身的js和css打包成一个。这样做有个缺点，每个页面的js和css文件会有重复的内容。如果用seajs或requirejs等模块加载，可以解决重复的问题，但也可能增加项目的复杂度。考虑到打包后的文件只有10K大小，还是暂时使用打包的方法。有兴趣的朋友也可以将js模块化并测试一下性能。

打包涉及到gulp的应用，有许多文章谈论到，而我是通过开源项目学习的。

首先我需要写一个page-config.json文件，告诉gulp我要打包哪些资源：

将文件放在模板目录的根目录下面，与src,dist同级。src存放原文件，dist存放生成后的文件。

再写一个gulpfile.js,用于自动构建。

下面是gulp文件的写法：

在使用时，要在命令行安装gulp，切换到gulpfile.js所在的目录，运行gulp watch，这样，每次在css和js更改时，会自动重新打包。当然，为了不重复操作，你可以写一个脚本文件。

怎么用gulp压缩js和css文件

/步骤

首先要确保pc装nodeglobal环境项目文件都install gulp

npm install gulp -g (global环境)

npm install gulp –save-dev (项目环境)

项目install需要gulp插件般压缩需要

npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del –save-dev

更插件链接找

项目根目录新建gulpfile.jsrequire需要module

var gulp = require(‘gulp’),

minifycss = require(‘gulp-minify-css’),

concat = require(‘gulp-concat’),

uglify = require(‘gulp-uglify’),

rename = require(‘gulp-rename’),

del = require(‘del’);

压缩css

gulp.task(‘minifycss’, function() {

return gulp.src(‘src/*.css’) //压缩文件

.pipe(gulp.dest(‘minified/css’)) //输文件夹

.pipe(minifycss()); //执行压缩

});

压缩js

gulp.task(‘minifyjs’, function() {

return gulp.src(‘src/*.js’)

.pipe(concat(‘main.js’)) //合并所jsmain.js

.pipe(gulp.dest(‘minified/js’)) //输main.js文件夹

.pipe(rename({suffix: ‘.min’})) //rename压缩文件名

.pipe(uglify()) //压缩

.pipe(gulp.dest(‘minified/js’)); //输

});

执行压缩前先删除文件夹内容

gulp.task(‘clean’, function(cb) {

del([‘minified/css’, ‘minified/js’], cb)

});

默认命令cmd输入gulp执行命令

gulp.task(‘default’, [‘clean’], function() {

gulp.start(‘minifycss’, ‘minifyjs’);

});

要cmd执行gulp即

css加载会造成阻塞吗？css加载会阻塞js运行吗？

直接给出结论：

1、css并不会阻塞DOM树的解析

2、css加载会阻塞DOM树渲染

3、css加载会阻塞后面js语句的执行

为了避免过长的白屏时间，我们应该尽可能的提高css加载速度，以下有几种优化方法:

1、使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)

2、对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)

3、合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)

4、减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

关于DOMContentLoaded：

对于浏览器来说，页面加载主要有两个事件，一个是DOMContentLoaded，另一个是onLoad。而onLoad没什么好说的，就是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。

1、如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。

2、其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。

参考自：

gulp压缩合并css/js时，怎么自动修改引用压缩后的css/js的路径

css文件压缩用gulp-minify，js多个文件合并好像是gulp-concat然后再将其压缩用gulp-uglify

gulp有没有插件可以把js，css文件的内容合并到html页面中

不引用外部的静态资源文件，而直接通过style或script写入的css与js，一般叫做inline resources。用gulp inline作为关键字搜索，就可以找到gulp-inline-source和gulp-inline。