自动化运维：如何构建和部署前端应用
在这篇文章中，我将向您展示如何管理依赖项以及使用Gulp构建前端应用程序，并将其安全地部署到服务器。前端部署不再那么简单了回想过去，一切都很简单：你只需将HTML上传到服务器，可能还带有一些(严重)压缩的图片，现在，大多数Web应用程序都需要在部署之前构建。该过程通常类似以下步骤：首先，您得获取依赖...
gulp前端自动化构建工具
前端构建工具本人 bootstrap+jquery用gulpvue+element 用webpack引文现在，移动端开发的火爆，以及前端工程越来越复杂，所以出了很多的自动化构建工具。gulp等就是最好的代表，如果你是前端新手初次接触gulp，又不想看太官方的解释又想学习学习gulp的相关知识的话那么...
前端自动化构建工具--Gulp&&Webpack
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理，将文件或资源处理成需要的最佳输出结构和形式。在处理过程中，我们可以对文件进行模块化引入、依赖分析、资源合并、压缩优化、文件嵌入、路径替换、生成资源包等多种操作，这样就能完成很多原本需要手动完成的事情，极大地提高开发效率。一、GulpGul...
【web前端自动化工作环境配置】11. 生产环境的适配
最近项目上线了，对上线前的准备做一下总结，开发环境上所写的代码只能是在开发环境上做预览，离上线到生产环境还是有一些工作要做的，首先是生产环境的适配，在做生产环境适配的时候，要从如下几点： （1）添加favicon 这是网站的一个标志，favicon和下面要说的dns-prefetch都是要放到hea...
前端自动化构建工具 gulp 学习笔记 一、
一、我对gulp的初期理解是一种前端辅助开发工具 可以帮你把js，css，img等文件 合并、压缩,图片好像是合并为精灵图，合并为精灵图之后，还会生成一个css样式表。官方解说是：基于流的自动化构建工具。基于流：应该就是他的语法方式有点像jquery 那样 如： $(".active").css("...
前端自动化测试 —— TDD环境配置（React+TypeScript）
欢迎讨论与指导：)前言TDD —— Test-Drive Development是测试驱动开发的意思，是敏捷开发中的一项核心实践和技术，也是一种测试方法论。TDD的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码 —— 引自百度百科。在开发时，希望能够改动项目代码或...
前端自动化测试：Vue 应用测试
测试不仅能够验证软件功能、保证代码质量，也能够影响软件开发的模式。TDD（Test-driven development），就是测试驱动开发，是敏捷开发中的一项核心实践和技术，也是一种软件设计方法论。
python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建
前端回顾： 整体： - HTML - CSS - JavaScript - 基本数据类型 - for，while.. - DOM - obj = document.getElementById('..') - obj.innerHtml - BOM: - setInterval。。。 ----&...
大前端的自动化工厂（5）—— 基于Karma+Mocha+Chai的单元测试和接口测试
一. 前端自动化测试大多数前端开发者对测试相关的知识是比较缺乏的，一来是开发节奏很快，来不及写，另一方面团队里也配备了“人肉测试机”，完全没必要自己来。但随着项目体量的增大，许多人维护同一份代码，经常会出现有些函数莫名其妙地结果不对了，或者某个接口的入参变了，又或者哪位大哥把后端返回的数据结构给改了...
前端自动化工具gulp自动添加版本号
之前，我介绍了学习安装并配置前端自动化工具Gulp，觉得gulp确实比grunt的配置简单很多，于是我决定再深入学习一下gulp，就去网上查了资料，发现gulp还可以自动添加版本号，这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼。所以就赶紧去试了一下，果...
web前端自动化测试/爬虫利器puppeteer介绍
web前端自动化测试/爬虫利器puppeteer介绍IntroChrome59(linux、macos)、 Chrome60(windows)之后，Chrome自带headless(*面)模式很方便做自动化测试或者爬虫。但是如何和headless模式的Chrome交互则是一个问题。通过启动Chro...
gulp 前端自动化工具
一开篇在前端开发的过程中，我们经常会碰到压缩、合并、图片script 等，于是就有了gulp 前端自动化构建工具，它能帮你在前端开发中，节省时间。1，安装 node.js因为gulp 构建工具是基于node环境的，那么什么是 node.js呢，下面是官方的解释Node.js 是一个基于 Chrome...
前端自动化部署之gulp
1.首先需要安装node+npm（这里不再叙述，网上教程一大堆）2.gulp全局安装：npm install -g gulp3.cd进入到你的项目目录，这里使用demo文件夹为我的示例项目4.在demo项目中新建dist和src两个文件夹，再在src文件夹下新建images，sass，js三个文件夹...
Grunt usemin前端自动化打包流程
前端优化是尽量减少http请求，所以我们需要尽量合并压缩文件，然后调用压缩后的文件，比如多个css文件压缩成一个，多个js文件合并压缩等，usemin能够自动在html中使用压缩后的文件，达到上面的目的。上图是完整打包后的文件目录，原始目录是assets,打包发布的文件是dist.gruntfile...
grunt搭建自动化前端环境(MAC下简单完整流程)
安装运行grunt的环境1、Grunt运行在node下，所以首先需要安装node brew install node 2、全局安装安装 grunt-cli （并非grunt，允许安装多版本的grunt） npm install -g grunt-cli注意：以上安装都是全局安装不需要指定目录创建gr...
前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js
目的： 模块化开发，组件化开发，让代码符合开发规范，更高效webpack作用：从pack，就知道这是包的意思，比较专业点叫做前端自动化打包构建工具，代码错误检查，预处理，文件合并（打包），代码压缩，将各种文件包括es6de 文件转化成es5的可以被浏览器识别的文件。webpack安装：1.node...
基于云原生DevOps服务自动化部署前端项目学习总结
本文主要以部署前端Vue项目为例，讲述了如何基于云原生DevOps服务自动化部署前端项目~从开发完成到线上环境，我们只需提交代码即可~一、引言作为一名开发人员，日常工作中我们除了需要负责代码的开发外，通常还需要负责代码的部署，运维等工作。而在传统的手工部署方法中，在每次版本迭代或需求变更完成后，除了...
大前端的自动化工厂（2）—— SB Family
原文链接：https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f我坦白我是标题党，SB只是SCSS-Bourbon的简写。一. SASS/SCSSSASS，也称为SCSS，是CSS预编译语言的一种，常见的预编译语言还包括L...
media静态文件统一管理 操作内存的流 - StringIO | BytesIO PIL：python图片操作库 前端解析二进制流图片（了解） Admin自动化数据管理界面
一、media'''1. 将用户上传的所有静态文件统一管理 -- settings.py -- MEDIA_ROOT = os.path.join(BASE_DIR, 'media')2. 服务器会对外公开一下服务器静态资源3. 对外公开的方式(配置url接口)，在接口中返回指定...
如何利用gulp构建前端自动化
1，使用 gulp.watch 来监听文件自动打包在上篇文章中，介绍了如何利用webpack来为项目做打包编译等工作，其中介绍到在我们开发的时候，经常改动js，因为我们文件是引用编译后的js文件，若想让程序正常运行，必须 webpack 一次。这样会大大降低我们的工作效率。网上找到说在 webpac...