简介 SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘.使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来浏览. 优点: 缩放无损还原 可设置颜色,大小,使用较灵活 可利用CSS实现动画 减少HTTP请求 缺点: SVG在绘制的性能上比P…

Gulp是一个基于node开发的构建工具. gulp本身是不进行任何构建任务,是通过gulp的一些列插件完成: gulp-less  编译LESS文件: gulp-autoprefix  添加css私有前缀(webkit······): gulp-cssmin  压缩css: gulp-rename  重命名: gulp-imagemin  图片压缩: gulp-uglify  压缩js: gulp-concat  合并: gulp-htmlmin  压缩html······ 示例: 然后利用g…

gulp 对文件批量重命名 gulp-rename重命名 var gulp = require('gulp'); var rename = require("gulp-rename"); // rename via function gulp.task('name', function() { return gulp.src('./dist/**/*') .pipe(rename(function(path) { console.log(path) var name = new Dat…

npm init命令初始化当前文件夹后,在当前文件夹新建gulpfile.js文件.当前目录下的所有操作流都在gulpfile.js文件中定义. gulp自动化 gulp-uglify (JS压缩) gulp-uglify安装: npm install --save-dev gulp-uglify gulp-uglify用来压缩js文件,使用的是uglify引擎. var gulp = require('gulp'); //加载gulp var uglify = require('gulp-ug…

gulp-uglify(js压缩) gulp-uglify安装 // npm install --save-dev gulp-uglify 已过时 npm install --save-dev jshint gulp-jshint gulp-uglify用来压缩js文件,使用的是uglify引擎. var gulp = require('gulp'); //加载gulp var uglify = require('gulp-uglify'); //加载js压缩 // 定义一个任务 compass…

因为最近可能需要做移动端rem布局,因为rem布局需要将px转化成rem,如果次都需要拿计算器算就太low了,所以就想到用less和gulp. 因为也是初学gulp,站点的文件结构还没想到太好,也只是demo下 用到gulp-less gulp-watch gulp-rev-append 首先是gulp代码 var gulp = require('gulp'), less = require('gulp-less'), rev = require('gulp-rev-append'), watc…

.相信所有的前端攻城狮.听到浏览器兼容性问题都深有体会. 浏览器兼容性问题,无非就是因为浏览器内核不同,浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.还有就是根据浏览器的版本不同,所兼容的css属性有所差异. 今天我们借助gulp工具全局跑css文件,实现自动补全,在各个浏览器的写法补全.至于属性兼容还需要具体情况具体对待. 1:全局安装gulp .  cmd    cnpm/npm install gulp -g (cnpm/npm自己选择,个人建议用cnpm) 2:安装完成查…

首先安装全局gulp $ npm install --global gulp 下载成功后 新建一个项目或者一个文件夹(做测试) mkdir testgulp 在该文件或者项目下下载gulp工具 $ npm install --save-dev gulp  //  yarn add gulp --save-dev 出现这样的代码就表示文件tetsgulp里面下载成功 再在项目的根目录下新建一个js文件gulpfile.js 在js 文件 引入 gulp var gulp = require('gu…

layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- Gulp- 简介 Automate and enhance your workflow | 用自动化构建工具增强你的工作流程 Gulp 是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完…

前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev gulp配置文件如下 //在你的项目根目录下创建gulpfile.js,代码如下: //…