添加备份

suxg003 · Nov 16, 2015 · baad014 · baad014
1 parent c3db7d4
commit baad014
Show file tree

Hide file tree

Showing 14 changed files with 1,534 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1 @@
-_site/
-
-.sass-cache/
-
-start.bat
+_site
diff --git a/_posts/blog/2015-08-21-gulp_starting.md b/_posts/blog/2015-08-21-gulp_starting.md
@@ -144,6 +144,99 @@ category: blog
 	});
 	gulp.task('default', ['javascript']);
 
+## 压缩CSS代码，并生成sourcemap
+
+	var gulp = require('gulp');
+	var minifyCss = require('gulp-minify-css');
+	var sourcemaps = require('gulp-sourcemaps');
+
+	gulp.task('minifyCss', function() {
+	  return gulp.src('src/*.css')    // src 目录下所有css文件
+	    .pipe(sourcemaps.init())    // 初始化sourcemaps
+	    .pipe(minifyCss())          // 压缩css
+	                                // 配置压缩css参数，参考clean-css
+	    .pipe(sourcemaps.write("../maps"))   // 写入sourcemaps
+	    .pipe(gulp.dest('dist'));
+	});
+
+	gulp.task('default', ['minifyCss']);
+
+压缩CSS类似压缩JS，通过搜索找到了两个可以压缩CSS的插件：gulp-cssmin和gulp-minify-css。前者在gulpjs.com网站中已经搜索不到了，而且已经给出了重复提示：`Duplicate of gulp-minify-css`。后者只不过是封装了另一个插件`clean-css`，在官网的说明上面可以找到。
+
+
+## 压缩图片
+
+	var gulp = require('gulp');
+	var imagemin = require('gulp-imagemin');
+	var pngquant = require('imagemin-pngquant');
+
+	 
+	gulp.task('imagemin', function () {
+	    return gulp.src('src/images/*')
+	        .pipe(imagemin({
+	            progressive: true,                      // 设置无损转换
+	            svgoPlugins: [{removeViewBox: false}],  // svgo插件设置：不删除viewbox属性
+	            // use: [pngquant()]                       // 添加pngquat插件给imagemin使用
+	        }))
+	        .pipe(gulp.dest('dist/images'));      
+	});
+
+	gulp.task('default', ['imagemin']);
+
+我试了一下使用pngquant插件和不使用pngquant插件（没有修改任何配置），压缩后的文件大小是一样的。使用pngquat可以设置压缩的质量、甚至压缩速度。
+
+# 生成CSS雪碧图
+先介绍下CSS雪碧图，其实做过前端的人都知道雪碧图，只是不知道还有这么个高大上的名字而已。CSS雪碧图，也就是CSS Sprite，说白了就是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。在没有使用自动化工具之前，如果需要完成这个定位技术，需要用PS等其他工具，去查看每个图片的大小，然后再写出CSS代码进行定位。如果大小刚好设置得对了，那么完事ok，如果大小差了1、2像素，就需要再手动的调整下CSS代码，如此反复调整~。  
+现在有了自动化工具，情况就不一样了，只需要动动手指头，让电脑自己工作就行了~  
+下载插件什么的就不用强调，这里我使用的是[gulp.spritesmith](https://www.npmjs.com/package/gulp.spritesmith/)，其实如果从[npm](https://www.npmjs.com/)上搜索spritesmith话，能搜到不同版本的spritesmith。
+
+	var gulp = require('gulp');
+	var spritesmith = require('gulp.spritesmith');
+
+	gulp.task('sprite', function () {
+	  return gulp.src('src/images/background/*.png')	// 目录下共有三张图片
+	      .pipe(spritesmith({
+	        imgName: 'sprite.png',    // 生成雪碧图的名字
+	        cssName: 'sprite.css'     // 生成雪碧图的css文件
+	    }))
+	    .pipe(gulp.dest('dist/images/background'));
+	});
+	gulp.task('default', ['sprite']);
+
+生成的css文件如下：
+
+	/*
+	Icon classes can be used entirely standalone. They are named after their original file names.
+
+	```html
+	<!-- `display: block` sprite -->
+	<div class="icon-home"></div>
+
+	<!-- `display: inline-block` sprite -->
+	<img class="icon-home" />
+	```
+	*/
+	.icon-fork {
+	  background-image: url(sprite.png);
+	  background-position: 0px 0px;
+	  width: 32px;
+	  height: 32px;
+	}
+	.icon-github {
+	  background-image: url(sprite.png);
+	  background-position: -32px 0px;
+	  width: 32px;
+	  height: 32px;
+	}
+	.icon-twitter {
+	  background-image: url(sprite.png);
+	  background-position: 0px -32px;
+	  width: 32px;
+	  height: 32px;
+	}
+
+现在，不光图片合并了，连css样式都直接生成了，么么哒~
+
 ## 总结
 - gulp比grunt配置起来要简单。
 - 其实gulp本身也使用了很多的别的模块，例如[node-glob][node-glob]

diff --git a/bak/2015-08-24-study_amap.md b/bak/2015-08-24-study_amap.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title:  Hello 高德
+description: 学习高德地图API
+category: blog
+---
+
+## 说明
+由于公司项目需要，需要学习如何使用高德地图完成需求。说实话，在这之前只知道高德地图，但是从来没有用过，所有与地图有关的搜索都会直接用度娘的~ 下面记录自己学习过程。
+
+## 学习资源
+在不了解高德地图的前提下，需要找一找学习资源~ 
+
+- [高德LBS开放平台][高德LBS开放平台]：在学习一样技术的时候，官网一定是最好、最权威的地方了。
+- [常见问题][常见问题]：浏览一下常见问题，在学习的时候如果遇到类似问题不至于丈二和尚摸不着头脑
+- [JavaScript API开发指南][JavaScript API开发指南]：需要主要学习的API
+- [demo][js_demo]：移动端js demo
+- [视频][amap_video]：高德开发者公开课
+- [高德segmentfault平台][segmentfault平台]：也是有好多例子
+
+## 公开课
+先从[公开课][http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=1436&extra=]学起吧。首先为了更方便学习，先下载课件喽~。
+
+### 第一讲
+第一讲刚开始主要就是介绍高德地图JS API的。其中视频已经介绍了如何使用官方帮助文档，非常简单却非常重要。根据视频的介绍操作一遍，由于所有的demo、ppt、视频在课件里头已经有了，所以直接记录遇到的问题。  
+
+- 申请KEY绑定服务选择JavaScript API。
+- 输出Hello word，可以参考[使用入门][使用入门]，也可以参考课件。
+- 如果想显示地图，一定要添加样式，如果没有任何样式，默认是不会显示地图的
+- JS API 支持异步加载
+- `AMap.Map('map')`中的map就是HTML容器名称，也就是Id名字
+- lng（Longitude）表示经度，lat（Latitude）表示纬度
+- 添加放大、缩小的图层时，需要设置z-index值
+- event 事件提供的是静态方法，通过AMap.event.XXX调用
+- 添加控件的方法`MapInstance.addControl`
+- 一定要在控制台中添加白名单！！否则根本查询不到数据
+
+
+
+## 总结
+
+## 参考连接
+- [LBS][LBS]
+- [POI][POI]
+
+
+[grunt_uglify]:    http://siberiawolf.com/grunt_uglify/
+[高德LBS开放平台]:    http://lbs.amap.com/?spm=0.0.0.0.MxMrBd
+[常见问题]:    http://lbs.amap.com/home/faq/%E5%9D%90%E6%A0%87%E4%BD%93%E7%B3%BB/
+[JavaScript API开发指南]:    http://lbs.amap.com/api/javascript-api/guide-2/guide/
+[js_demo]:    http://lbs.amap.com/others/demo_list/js_demo.html
+[amap_video]:    http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=476				 
+[segmentfault平台]:    http://segmentfault.com/blog/gaodelbs
+[LBS]:    http://baike.baidu.com/link?url=XRx7pL41v1PGUQZ4CzSiZMeuYdtyY08e9GJfZWic4LPjzIHRjuyZ4XRBebFQ5ca7JAzKbef1PhSGomocl9Q73eEzcGGQPTwlzDkXZmf9RiW
+[POI]:    http://baike.baidu.com/subview/517279/5442944.htm#viewPageContent
+[使用入门]:    http://lbs.amap.com/api/javascript-api/guide-2/map_show/
+
+
+
+
+
+
diff --git a/bak/demo01.html b/bak/demo01.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html style="width:100%;height:100%;">
+<head>
+	<title>高德公开课 简单地图对象构建</title>
+</head>
+<body style="width:100%;height:100%;margin:0;">
+<div id="zoomIn" style="z-index:999;position:absolute;left:0;bottom: 120px;width: 60px;height:30px;background-color: #008CFF;color:#FFF;line-height:30px;text-align:center;border-radius:3px;cursor:pointer;">放大</div>
+<div id="zoomOut" style="z-index:999;position:absolute;left:0;bottom: 60px;width: 60px;height:30px;background-color: #008CFF;color:#FFF;line-height:30px;text-align:center;border-radius:3px;cursor:pointer;">缩小</div>
+<div id="map" style="width:100%;height:100%;"></div>
+<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=05b095e34ee5176f8d33ddc31f1835ae"></script>
+<script type="text/javascript">
+(function(){
+	var map = new AMap.Map('map');	
+	// 设置地图显示中心点
+	// map.setCity("北京");
+	// 获取地图中心点经纬度坐标值。  是当前图幅范围内的中心点
+	// lng、lat分别代表经度、纬度值
+	// console.log(map.getCenter());
+	// 设置地图显示的缩放级别
+	map.setZoom(18);
+	console.log(map.getBounds());
+
+	// 地图放大一级显示
+	document.getElementById('zoomIn').addEventListener('click', function(e){
+		map.zoomIn();
+	});
+
+	// 地图缩小一级显示
+	document.getElementById('zoomOut').addEventListener('click', function(e){
+		map.zoomOut();
+	});
+
+	// 停止拖拽地图时触发
+	AMap.event.addListener(map, 'dragend', function(e){
+		console.log('Hello AMap, Hello JS API.你当是拖地呢，还拖我！');
+	});
+
+})();
+</script>
+</body>
+</html>
diff --git a/bak/demo02.html b/bak/demo02.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html style="width:100%;height:100%;">
+<head>
+	<title>高德公开课 增加地图控件</title>
+</head>
+<body style="width:100%;height:100%;margin:0;">
+<div id="zoomIn" style="z-index:999;position:absolute;left:0;bottom: 120px;width: 60px;height:30px;background-color: #008CFF;color:#FFF;line-height:30px;text-align:center;border-radius:3px;cursor:pointer;">放大</div>
+<div id="zoomOut" style="z-index:999;position:absolute;left:0;bottom: 60px;width: 60px;height:30px;background-color: #008CFF;color:#FFF;line-height:30px;text-align:center;border-radius:3px;cursor:pointer;">缩小</div>
+<div id="map" style="width:100%;height:100%;"></div>
+<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=05b095e34ee5176f8d33ddc31f1835ae"></script>
+<script type="text/javascript">
+(function(){
+	var map = new AMap.Map('map');
+
+	// 地图比例尺插件
+	map.plugin(['AMap.Scale'], function(){
+		var scale  = new AMap.Scale();
+		map.addControl(scale);
+	});
+
+	// 地图类型切换插件
+	map.plugin(['AMap.MapType'], function(){
+		var type =  new AMap.MapType();
+		map.addControl(type);
+	});
+
+	// 地图鹰眼插件
+	map.plugin(['AMap.OverView'], function(){
+		var view  = new AMap.OverView();
+		// 默认鹰眼是关闭的，需要手动开启
+		view.open();
+		map.addControl(view);
+	});
+
+	// 地图工具条插件
+	map.plugin(['AMap.ToolBar'], function(){
+		var tool = new AMap.ToolBar();
+		map.addControl(tool);
+	});
+
+	// 地图放大一级显示
+	document.getElementById('zoomIn').addEventListener('click', function(e){
+		map.zoomIn();
+	});
+
+	// 地图缩小一级显示
+	document.getElementById('zoomOut').addEventListener('click', function(e){
+		map.zoomOut();
+	});
+})();
+</script>
+</body>
+</html>
diff --git a/bak/demo03.html b/bak/demo03.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>  
+<html>  
+<head>  
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
+	<title>周边检索</title> 
+	<style type="text/css">
+		body{
+			margin:0;
+			height:100%;
+			width:100%;
+			position:absolute;
+			font-size:12px;
+		}
+		#mapContainer{
+			position: absolute;
+			top:0;
+			left: 0;
+			right:0;
+			bottom:0;
+		}
+	</style>
+</head>  
+<body>  
+    <div id="mapContainer"></div>    
+    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=05b095e34ee5176f8d33ddc31f1835ae"></script>
+	<script type="text/javascript">
+		var marker = [];
+		var windowsArr = [];
+		//基本地图加载
+		var map = new AMap.Map("mapContainer",{ 
+			resizeEnable: true,
+	        view: new AMap.View2D({
+	        	zoom:12 //地图显示的缩放级别
+        })});
+	    cloudSearch();  
+		//周边检索函数     
+		function cloudSearch() {
+			map.clearMap();
+		    var arr = new Array();   
+		    var center = new AMap.LngLat(116.39946,39.907629);  
+		    var search;
+		    var searchOptions = {
+		        keywords:'公园',
+		        orderBy:'_id:ASC'
+		    };
+		    //加载CloudDataSearch服务插件
+		    AMap.service(["AMap.CloudDataSearch"], function() {       
+		        search = new AMap.CloudDataSearch('532b9b3ee4b08ebff7d535b4', searchOptions); //构造云数据检索类
+		        //周边检索
+		        search.searchNearBy(center, 10000, function(status, result){
+		        	if(status === 'complete' && result.info === 'OK'){
+		        		cloudSearch_CallBack(result);
+		        	}else{
+		        		cloudSearch_CallBack(result);
+		        	}
+		        });
+		    });
+		}
+		//添加marker和infowindow   
+		function addmarker(i, d) {
+		    var lngX = d._location.getLng();
+		    var latY = d._location.getLat();
+		    var markerOption = {
+		        map:map,
+		        icon:"http://cache.amap.com/lbs/static/jsdemo003.png", 
+		        position:new AMap.LngLat(lngX, latY)  
+		    };            
+		    var mar = new AMap.Marker(markerOption);  
+		    marker.push(new AMap.LngLat(lngX, latY));
+
+		    var infoWindow = new AMap.InfoWindow({
+		        content:"<font face=\"微软雅黑\"color=\"#3366FF\">"+(i+1) + "."+ d._name +"</font><hr />地址："+ d._address + "<br />" + "创建时间：" + d._createtime+ "<br />" + "更新时间：" + d._updatetime,
+		        size:new AMap.Size(300, 0),
+		        autoMove:true,
+		        offset:new AMap.Pixel(0,-30)
+		    });  
+		    windowsArr.push(infoWindow);   
+		    var aa = function(){infoWindow.open(map, mar.getPosition());};  
+		    AMap.event.addListener(mar, "mouseover", aa);  
+		}
+		//回调函数 
+		function cloudSearch_CallBack(data) { 
+		    var resultStr="";
+		    var resultArr = data.datas;
+		    var resultNum = resultArr.length;  
+		    for (var i = 0; i < resultNum; i++) {  
+		        resultStr += "<div id='divid" + (i+1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i+1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:2px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><h3><font face=\"微软雅黑\"color=\"#3366FF\">" + (i+1) + "." + resultArr[i]._name + "</font></h3>";
+		        resultStr += '地址：' + resultArr[i]._address + '<br/>类型：' + resultArr[i].type + '<br/>ID：' + resultArr[i]._id + "</td></tr></table></div>";
+		        addmarker(i, resultArr[i]);
+		    }
+		    map.setFitView();
+		} 
+		//回调函数
+		function errorInfo(data) {
+		    resultStr = data.info;
+		}
+		//根据id打开搜索结果点tip
+		function openMarkerTipById1(pointid,thiss){    
+		    thiss.style.background='#CAE1FF';  
+		   windowsArr[pointid].open(map, marker[pointid]);      
+		}  
+		//鼠标移开后点样式恢复
+		function onmouseout_MarkerStyle(pointid,thiss) {   
+		   thiss.style.background = "";  
+		}
+	</script>
+</body>
+</html>