本文目录一览:
- 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。