前端自动化基础知识

这一部分用的不多,还都属于理论知识。

package.json:后端的配置文件,有dependencies和devdependencies两个属性;bower.json:前端的配置文件。也可由后端修改,所以希望package一起配置了。

bower-concat:连接第三方的js,css

css_min:处理自己写的css

.bower改插件的安装路径,默认为build

阮一峰:

gruntfile.js中加载模块很多时,会出现package.json与gruntfile.js中的同步问题。解决办法是load-grunt-tasks模块,它会分析package.json,自动加载找到的所有grunt模块。

initConfig中,会有一个模块的同名属性,该对象的属性包括:系统设定的成员和target(很多个),target的属性参考模块文档,还有一些是grunt通用的。

如:filter:过滤文件名;dot:是否匹配以.开头的系统文件;makeBase:true,匹配文件路径的最后一部分

如果minify与combine有重合的部分,可以提出来放在option:{}中。

grunt cssmin:minify

grunt cssmin:combine

grunt: cssmin

grunt-contrib-clean:删除文件。

grunt-contrib-compass:使用compass编译sass文件。

grunt-contrib-concat:合并文件。

grunt-contrib-copy:复制文件。

grunt-contrib-cssmin:压缩以及合并CSS文件。

grunt-contrib-imagemin:图像压缩模块。

grunt-contrib-jshint:检查JavaScript语法。

grunt-contrib-uglify:压缩以及合并JavaScript文件。

grunt-contrib-watch:监视文件变动,做出相应动作。

模块的前缀如果是grunt-contrib,就表示该模块由grunt开发团队维护;如果前缀是grunt(比如grunt-pakmanager),就表示由第三方开发者维护。

时间: 2024-10-26 14:51:17

前端自动化基础知识的相关文章

selenium自动化基础知识

什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要通过修改部分代码的方式来覆盖这部分修改的内容,大大提高测试效率.但是后期代码维护需要一定的成本,如果系统属于表单比较多或者经常修改改动的系统不太适合使用自动化,因为这个维护成本太高:针对于一些相对比较成熟(改动不是很频繁)的系统和跑回归测试的系统很适合进行自动化测试. 性能自动化即使用性能测试工具(

前端photoshop基础知识之切图

工作中需要应用到的ps知识多半是切图以及一些图片的微调.学习ps的一些基础知识,熟练掌握切图技术有助于更高效的完成工作任务以及达到更高的目标 首先需要对新建(ctrl+n)的文件进行环境的设置,包括网页宽度(一般设为1920px).背景颜色(设为透明).移动工具(自动选择设为图层).视图(勾选智能参考线及标尺).窗口(关闭不需要的工具,勾选信息.字符选项,各个部分单位均改成像素).编辑(选项中的标尺与单位均改成像素)的设置,最后存储工作区,以便下次继续使用. 环境设置之后开始ps基本操作.移动工

Web前端之基础知识

学习web前端开发基础技术需要掌握:HTML.CSS.Javascript 1.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题加入背景图片.边框等. 所有这些用来改变内容外观的东西称之为表现. 3.JavaScript是用来实现网页上的特效效果 比如:鼠标滑过弹出下拉菜单.鼠标滑过表格的背景颜色改变.焦点新闻的轮换. 可以理解为:有动画的.有交互的一般都用JavaSc

前端的基础知识汇总

创建时间: 2017/8/2 19:39 <!-- 1.img标签中的img其实是英文image的缩写 所以img标签的作用, 就是告诉浏览器我们需要显示一张图片 2.img标签格式: <img src=""> 其实img标签中的src是英文source的缩写 所以img标签中的src就是用来告诉img标签, 需要显示的图片名称 3.注意点 - 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行 - 如果我们手动指定了img标签显示的图片的宽度和高度, 

初学者入门web前端 C#基础知识:数组与集合

对于初学者,想要入门web前端,要有足够的信念和坚持,不然只会越走越远,我现在就深深的体会到. 我本是一个很拒绝代码的人,以前想过UI设计,但是在这段学习时间里,发现其实只要认真,代码并不是很难 所以我整理了一套前期学C#的知识点,对于后期学习JavaScript有很大的帮助. 一.数组与集合数组:能存放任意多个同类型的数据 数据项:类型相同 ①每一个数据型都有一个编号(索引或下标) ②数据的索引(下标)是一个int类型的数字 ③从0开始,依次为数据中每一个数组项编号 数组的声明与赋值 声明:数

前端重要基础知识整理

HTML: 1. 什么是语义化的HTML?有何意义?为什么要做到语义化? 2.行内元素和块元素分别有哪些? 3.Doctype 是什么?有啥作用? 4.iframe的优缺点 CSS: 1.CSS盒子模型 2.CSS优先级 3.不使用js,元素垂直居中 1).简单版 2).高级版 //未完

web前端开发基础知识随笔

1. 常见浏览器的内核 Mozilla Firefox使用的是Gecko内核,C++开发的开源布局引擎. Internet Explorer使用的是Trident,由微软开发和维护的浏览器渲染引擎,非开源但是开放的接口比较多和灵活,因此产生了是Trident内核而非IE的浏览器,比如国内的大部分浏览器(所谓双核只不过是Trident加上其他开源浏览器内核,简单的说就是两个渲染引擎,根据页面的一些标识浏览器选择使用哪种引擎渲染并将最终结果呈现给用户). Webkit,Safar所使用的内核及chr

selenium 自动化基础知识(各种定位)

元素的定位 webdriver 提供了一很多对象定位方法  例如: [ id ] , name , class name , link text , partial link text , tag name, xpath , css selector 例如:下图 # -*- coding: utf-8 -*- # 通过id方式定位 browser.find_element_by_id("kw").send_keys("selenium") # 通过name方式定位

Web前端学习①Web基础知识

<1>Web前端Web基础知识 一.前端工程师的角色 一个网站的建设需要以下角色: ①策划人员:方案 ②美工/UI设计师:设计图 (.psd  .rp) ③前端工程师:静态网页 ④后端工程师:获取数据 ( Java   PHP  .NET) 二.Web的基础知识 1.Web(万维网)与Internet(因特网) ①Internet简介:定义.主要服务.基本实现技术 ②Web与Internet关系 Web是Internet提供的服务. ③Web简介:万维网 2.Web的工作原理 ①Web的工作原