2016年11月_小圣贤君

11月 10月 09月 08月

原创 webpack快速学习2

webpack结合bable的使用 bable主要是用来处理ES2015也就是ES6的，由于ES6的一些代码有的浏览器是不能直接解析的，所以就必须用bable将其转换为浏览可以解析的代码。这就是bable。 1.安装这里面分别安装了babel-loader这个不用解释吧，还有就babel-core，这个就是babel。然后是babel-preset-es2015，这是babel的预设

2016-11-19 11:39:45 1107

原创 webpack快速学习1

什么是webpack webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 webpack的特点丰富的插件，方便进行开发工作大量的加载器，包括加载各种静态资源代码分割，提供按需加载的能力发布工具 webpack的优势 webpack 是以 commonJS 的形式来书写脚本滴

2016-11-19 11:29:03 788

转载 gulp教程之gulp-concat

简介：使用gulp-concat合并javascript文件，减少网络请求。 1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件本示例目录结构如下： 2、本地安装gulp-concat 命令提示符执行 cnpm install gulp-concat –save-dev 没有安装cnpm请使用 npm install

2016-11-18 10:49:57 1242

转载 gulp教程之gulp-imagemin压缩图片

简介：使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片），很多人安装gulp-imagemin都会出现错误，我也查了很多资料，也不知道所以然，我的做法是出错再重新安装，如果你知道问题所在，请一定告诉我！ 1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件本示例目录结构如下： 2、本地安

2016-11-18 10:43:23 14322

转载 gulp教程之gulp-htmlmin压缩html

简介：使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。本地安装gulp-htmlmin 安装：命令提示符执行 cnpm install gulp-htmlmin –save-dev 注意：没有安装cnpm请使用 npm install gulp-htmlmin –save-dev。说明：–save-dev

2016-11-17 21:26:19 11602

原创 gulp-sass的有关问题

我们在编译sass文件之前需要先安装sass插件，在命令行里输入：cnpm install gulp-sass –save-dev 安装完成后就可以编译sass文件，如果抛出new Error(error.missingBinary())问题，应该就是你没有安装node sass。请看出错示例：出现这种类似错误的时候，读者可以考虑是不是没有安装node sass，如果没有直接安装：cnpm

2016-11-17 20:05:09 1903

转载 gulp详细入门教程

简介： gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、

2016-11-17 16:15:46 387

原创 canvas绘制精细走动时钟

这里简单了利用canvas做了一个时钟，能够实现分针和时针较精确的走动，没有太多难点，重点的是要实现分针和时针走动，角度的计算，笔者在下面进行说明。先看效果图：颜色单配的比较难看，读者谅解。请看代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>

2016-11-16 21:53:14 5308 1

原创 canvas综合应用绘制哆啦A梦

HTML5中canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.通过这一元素，我们可以在画布上画出各种图形，线条，矩形，圆形，椭圆，字体，渐变等，当然可以自己设计组合绘制自己想要的图案，今天，笔者通过canvas绘制了一个哆啦A梦的图案，其中，应用了颜色渐变，贝塞尔曲线等知识点，是对canvas的一个较综合的应用。请看效果图：通过canvas画图需要确定各个点，比

2016-11-16 09:41:22 4293

原创 CSS3轮回写轮眼制作

css3新增了不少比较有意思的属性，今天笔者根据css3中的动画属性，简单创作了一个轮回写轮眼，供喜爱动漫的青少年欣赏学习。请先看效果图：这里只用到了html和css没有用到JavaScript，jQuery等知识点。笔者下面贴出全部代码，然后对代码中部分知识点进行讲解。请看代码：<!DOCTYPE html><html> <head> <meta charset="U

2016-11-10 22:12:12 9543 5