var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function () { var spriteData = gulp.src('images/*.png').pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })); return spriteData.pipe(gulp.de…

移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background-size设置为雪碧图的宽高. 1.首先修改gulp.spritesmith\node_modules\spritesheet-templates\lib\spritesheet-templates.js ['x', 'y', 'offset_x', 'offset_y', 'height', 'w…

一.安装nodejs之后,要设置两个环境变量 在 计算机右击属性---高级系统设置---高级---环境变量 打开窗口 新建2个环境变量,它们的值分别是nodejs根目录下的node_modules路径 及npm的路径 1.变量:NODE_PATH  值:D:\www\nodejs\node_modules 2.变量:PATH 值:D:\www\nodejs\npm 二.进入images上一层目录,运行 npm install gulp gulp-sass gulp-imagemin gulp.s…

安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gulp.spritesmith": "^6.5.1" gulpfile.js的配置 const gulp = require("gulp") // 本实例为完成精灵图的合并 const spritesmith = require("gulp.sprit…

一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.org 然后就可以用 cnpm命令从淘宝镜像获取插件包了:当然,你这时候依旧可以用npm命令从官方服务获取插件包. cnpm支持除 publish 之外的原生 npm 所有命令. 1,新建文件夹 gulp 2,切换到gulp目录下,执行 cnpm init,填写相关信息,生成package.json文…

雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任务目录下本地安装 gulp及任务需要的gulp插件. (1)建立package.json文件,可以手动建立.也可以使用 cnpm init,然后在命令行中写(学用命令行) (2)在指定的任务目录下本地安装gulp及插件:   cnpm install gulp --save  cnpm instal…

相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步.今天我给大家带来一个工具,将这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith.下面一张图来说明他能做什么. 看到这个图片介绍,相信大家已经对gulp.spritesmith能做到什么一目了…

简单易用 高效构建 高质量的生态圈 可能很多人会说现在提gulp也太落后了吧,但我想说写点东西并不是为了讨论它是否过时,而是来帮助我们自己来记忆.整理和学习.任何工具,我需要,我才去使用它,正如此时我需要gulp一样. 为了效率而使用工具 安装 全局安装 gulp命令: $ npm install --global gulp-cli 作为项目的开发依赖(devDependencie)安装: $ npm install --save-dev gulp 创建配置文件 在项目根目录下创建一个名为 gu…

前面的话 与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单.通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效 入门 如果会使用grunt,则gulp学起来,并不困难.主要包括以下几步 1. 全局安装 gulp $ npm install --global gulp 2. 作为项目的开发依赖(d…

一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 易于学习 通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道. 二.依赖安装 1.安装node.js, 2.全局安装gulp npm install gulp -g 3.本地安装gulp npm init…

最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢实现雪碧图,所以就一直没有做这样的一个功能,但这次时间较为充分,于是就开始着手做雪碧图.做之前呢,首先想到的就是用PS将所有的小图放在一张大图上,可那么多的小图,一张一张往上放,岂不累趴,而且你还没有办法去确切的计算整张雪碧图的宽高,这不搞死人吗?于是就上网查资料,然后就有了本文很简单的生成雪碧图的…

为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步.今天这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith.下面一张图来说明他能做什么. 第一步:npm install --save-dev gulp.spritesmith 安装 gulp.spritesmith 第二部:配…

gulp+ThinkPHP配置 gulp+ThinkPHP配置 目录结构: html |-src 开发目录 |-Home 静态页面 |-Public 静态资源目录 |-dist 生产目录 |-Home 静态页面 |-Public 静态资源目录 注:gulp-cssnano 弃用 命令行运行指令 cnpm install --save-dev gulp watch //热刷新 gulp build //压缩输出内容 gulp clean //清空目录下的dist文件 更新 2/10/2018 4:…

优化了文件过滤,更改文件只会重新生成修改的文件 项目目录构建: 在入口文件public下,创建html目录,作为前台静态资源目录 gulp.js文件 /*! * gulp * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin b…

同事需要处理很多的图片,由于UI那边提供图片比较大,为了性能好一点,程序包小一点,因此希望我帮忙做成小程序来完成此工作. 其实之前做过一个grunt写的图片压缩合并工具,当时是为了处理270多个国家/地区的国旗/logo,这次打算用gulp写一个,很久没碰过了,分了一下,大概两件事需要我去做: 1.图片压缩 2.图片雪碧图生成 然后在很容易就百度到了gulp-imagemin插件,这个做压缩很容易,压缩比什么的就不细看了,当我寻找合并工具的时候,百度真的很傻,搜索到的全部是gulp-css-sp…

有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一步:去淘宝镜像地址(http://npm.taobao.org/)里安装cnpm. $ npm install -g cnpm --registry=https://registry.npm.taobao.org 由于npm安装插件是从国外服务器下载,受网络影响很大,所以我们可以选装淘宝的cnpm…

首先老规矩哈.全局包安装先 cnpm install webpack -g cnpm install gulp -g cnpm install babel -g //转换Es6 上面的整合在一起安装可以写在一起 如下 cnpm install webpack gulp babel -g gulpfile.js   gulp的配置文件 var gulp = require('gulp'), browserSync = require('browser-sync').create(), plugin…

1.gulp 配置: // 引入 gulp var gulp = require('gulp'); var watch = require('gulp-watch'), //导入所有gulp需要的模块 spriter = require('gulp-css-spriter'), spritesmith = require('gulp.spritesmith'), imagemin = require('gulp-imagemin'), pngquant = require("imagemin-p…

一.工具选择CSS预处理语言LESS 构建工具gulp(基于node环境)gulp插件:gulp-connect——主要是用来运行一个webserver npm install --save-dev gulp-connect 插件介绍:https://www.npmjs.com/package/gulp-connect gulp.spritesmith——雪碧图 npm install gulp.spritesmith --save-dev 插件介绍:https://www.npmjs.com/…

注意:要安装俩次gulp(全局和本地):全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能. 之前由大牛帮忙配置的gulp来用.今天时间充裕,就和小伙伴一起动手配置gulp及其插件. 前提:已安装nodejs——npm  (备注教程  “物理安装”) 第一步:建了一个Gulp文件夹,保存插件用于使用第二步:进入nodejs环境下安装cnpm淘宝镜像文件(若npm install 时报错,形如 npm ERR!Windows_NT XXX ,则将之前存在的.np…

文件目录说明 gulpfile.js代码 var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); var imagemin = require('gulp-imagemin'); var runSequence = require('run-sequence'); var open = require('gulp-open'); var configs = { //修改图片位置 spritesSourc…

8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目根目录下创建package.json文件,命令如下: npm init 根据引导配置项目信息.然后安装Gulp依赖包,命令如下: npm install gulp –save-dev 在项目根目录下,创建gulpfile.js文件,内容如下: var gulp = require("gulp&quo…

1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 package.json 的文件: 附上本人项目基本配置 { "devDependencies": { "concat": "0.0.1-security", "gulp": "…

与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单.通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效 1. 入门 gulp主要包括以下几步 1. 全局安装 gulp $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装 $ npm…

先看一下网页的加载流程: 1.解析html结构2.加载外部脚本和样式表文件3.解析并执行脚本(脚本会阻塞页面的加载)4.DOM树构建完成 (DOMContentLoaded)5.加载图片等外部文件6.页面加载完毕 (load事件) THE WAY: 减少请求数量.减小请求大小 减少请求数量1.将小图合并成雪碧图(sprite)或者iconfont字体文件2.使用base64减少请求(把图片转换成base64)3.图片延迟加载4.JS/CSS按需打包...... 减小请求大小1.JS/CSS/HT…

当初分析了定宽高值和定宽高比这两种常见的图片延迟加载场景,也介绍了他们的应对方案,还做了一点技术选型的工作. 经过一段时间的项目实践,在先前方案的基础上又做了很多深入的优化工作.最终将好奇心日报的网页打开速度将降低到了1s内,Web端和Mobile端加载3屏数据消耗的流量也大幅降低. 模拟WIFI条件下的网页加载 该篇文章结合具体的项目实践,将围绕如何更快的访问网页展开,细化到具体的技术方案,以及实践中可能遇到的坑,希望对大家有一定的启发和帮助. 为什么要优化网页加载速度? 好奇心日报无论是设计…

github链接 借鉴吾记APP,使用 vue2.0+vue-router+vuex 为主要技术栈,elementui做为ui框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp 负责处理静态资源打包.压缩,欢迎打赏star!!! 安利一下 吾记前端构建流程 本地环境准备 安装node: * https://nodejs.org/en/download/ ("node": ">=6.0",对应需要升级node-sass,不然使用不了!) 配…

Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理:CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量.该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签. 如何生成雪碧图? 安…

用image sprite和svg字体文件这两种方法,都能够极大地减少小图形文件的数量, 从而减少服务器请求和带宽需求.提高网页的响应速度. 一.建立SVG字体文件 iconmoon 是一个在线工具,可以上传自己的SVG格式的图标文件,也可以从其中选择已有的图标, 定制出自己的字体文件.下载的结果包括了字体文件和一个简单的demo.html, (https://icomoon.io/app/#/select), (类似工具: https://glyphter.com) 二.用 image spr…

1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有 微信.QQ 等. 使用移动设备查看页面时会发现,在微信浏览器中有 顶部导航栏,在qq内置浏览器里不止有 顶部导航,底部也有 操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在 设计环节 就需要考虑内容的多少,页面底部要 预留一定的空白,这样在微信或qq中才不会被遮住. 如下图(QQ内置浏览器):…