![](https://img-blog.csdnimg.cn/20210123114605972.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端自动化构建
文章平均质量分 77
目前前端项目开发越来越离不开自动化构建工具,例如grunt、gulp、browserify、webpack等;它们能自动化地完成文件的测试、检查、合并、压缩、格式化、浏览器刷新、部署文件生成,并监听文件改动后重新更新内容等步骤。
觉醒法师
勤学习、干实事。
展开
-
Webpack生成企业站静态页面 - ajax请求
这几天又想到以前项目上使用过MVP模式开发,一部分通过后台渲染,一部分前端渲染;这样能减轻后端压力,也能提升速度,让前端在写静态页面时候就能完成页面数据渲染工作。有需求就有革新的动力,所以这篇将对之前功能再度升级改造。当然,这种方法把数据获取到客户端通过art-template模板引擎对数据进行渲染,实现是没问题;但是这样对SEO优化不太友好,若是不考虑此问题不大;或者将head标签和导航部分在服务端渲染,其他内容通过ajax请求在客户端渲染,也能满足SEO优化需求和减轻后端压力。原创 2024-03-29 09:17:46 · 1052 阅读 · 0 评论 -
Webpack生成企业站静态页面 - 增强数据处理能力
一些项目因需求不同,如需SEO或小项目,使用angular、react或vue就大材小用了。我们可以通过webpack、gulp这些构建工具,也能快速完成html页面开发,并且也能使用less/sass/styus等样式预编译功能,以及将js、html分模块、分组件进行开发。此篇在之前两篇基础上,增强数据处理功能力,让开发更为便捷、更为灵活。原创 2024-03-28 09:14:59 · 1277 阅读 · 0 评论 -
Webpack生成企业站静态页面 - 组件化
一些项目因需求不同,如需SEO或小项目,使用angular、react或vue就大材小用了。我们可以通过webpack、gulp这些构建工具,也能快速完成html页面开发,并且也能使用less/sass/styus等样式预编译功能,以及将js、html分模块、分组件进行开发。这篇我们就一讲下如下将这样一个企业站,在webpack中快速构建。原创 2024-03-27 09:39:34 · 1163 阅读 · 0 评论 -
Webpack生成企业站静态页面 - 项目搭建
现在Web前端流行的三大框架有Angular、React、Vue,很多项目经过这几年的洗礼,已经都 转型使用这三大框架进行开发,那为什么还要写纯静态页面呢?比如Vue中除了SPA单页面开发,也可以使用nuxt.js实现SSR服务端渲染,满足SEO优化。但是对于那些还是在维护老项目,使用MVC、MVP进行开发,或者觉得使用nuxtjs成本较高小型项目,从历史原因和项目实际情况考虑,会退而求其次,让前端快速完成页面框架和样式,交付后端进行数据渲染。原创 2024-03-26 10:52:33 · 1414 阅读 · 0 评论 -
Webpack抛出错误/警告:asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.”意思是:“入口点大小限制:以下入口点组合资源超出建议大小限制(244KiB)。今天操作webpack时报出几个错误,从提示上可以看出是因为webpack打包文件太大,导致的警告错误,可以手动设置打包文件的大小限制。原创 2024-03-15 19:08:57 · 3235 阅读 · 0 评论 -
前端自动化构建-Gulp实现前端插件开发
前端自动化构建-Gulp实现前端插件开发。通过Gulp可以开发些前端小插件,像大家常用到的jQuery,网上下载时,会有jquery.js和jquery.min.js两种文件,这些是如何实现的。里面有很多小模块,如何通过import和export来将这些模块合并到一个文件中,该篇会详细讲述下。原创 2022-09-15 18:49:32 · 776 阅读 · 0 评论 -
Html+CSS+JS响应式开发-企业站(gulp篇)
html+css+js响应式开发企业站,在gulp中搭建开发环境,使用editplus编写项目代码,通过media媒体查询实现页面响应式布局原创 2022-05-11 14:53:55 · 972 阅读 · 4 评论 -
gulp执行进程命令时带参输出
在使用gulp的task进程执行时,有时需要通过带参执行不同的命令操作,以便灵活操作不同功能和精简代码。这里使用的是minimist,可以实现gulp uglify --name inex.js之类命令输出原创 2021-06-19 10:42:26 · 319 阅读 · 0 评论 -
前端自动化构建基础,以及相关插件使用(gulp篇)
互联网的不断发展推动了web前端技术快速的向前,各种前端库或框架百花齐放。自动化构建是将源代码利用工具自动转换成用户可以使用的目标文件的过程,将复杂且重复性任务交给程序脚本自动完成,从而减小我们开发的工作量,加快开发速度。这里咱们先了解下gulp的使用,给咱们开发前端页面带了哪些便捷之处。原创 2021-01-30 14:04:08 · 502 阅读 · 1 评论 -
gulp-uglify编译时,去除全部注释或保留部分注释, 以及统一添加公共注释
使用gulp-uglify压缩javascript文件,可以减小文件大小。有时需要完全压缩去除全部注释,有时则需要保留部分,具体如下详述:1.安装gulp-uglifygith地址:https://github.com/terinjokes/gulp-uglify2.基本使用var gulp = require('gulp'), uglify = require('gulp-uglify');gulp.task('uglifyJs', function(){ gulp.原创 2021-01-19 12:36:22 · 1999 阅读 · 0 评论 -
gulp-uglify 保留注释时 重复输出注释问题处理
问题如下://--------- 原js中注释内容 --------- /*! * hex颜色值转成rgba */function hexToRgba(){}//--------- 输出后js中的注释内容 --------- /*! * hex颜色值转成rgba *//*! * hex颜色值转成rgba */function hexToRgba(){}在gulp-uglify开发时,遇到了保留注释时,输出文件中会出现双份同样注释内容。其实在执行压缩时,将获取注释原创 2021-01-19 12:58:16 · 199 阅读 · 0 评论