1.引入插件 var gulp = require('gulp'), // uglify = require('gulp-uglify'), concat = require('gulp-concat'), minifycss = require('gulp-minify-css'), rev = require('gulp-rev'), revcollector = require('gulp-rev-collector'); 控制台输入 npm install gulp gulp-conca

var gulp = require('gulp'); var RevAll = require('gulp-rev-all'); var uglify = require('gulp-uglify'); var filter = require('gulp-filter'); var csso = require('gulp-csso'); var useref = require('gulp-useref'); gulp.task('default', function () { var j

本文转载自: Gulp学习指南之CSS合并.压缩与MD5命名及路径替换

参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/4982646.html http://www.tuicool.com/articles/viequay https://github.com/Platform-CUF/use-gulp 实现要点: 1.如何运行gulp的任务,加入新建好一个如下任务: // 语法检查 gulp.task('jshint'

前提条件,知道如何安装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,代码如下: //

 第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序的原因: 因为methods里的代码是编译后在浏览器里运行的 第二个:iconfont图片下载页面css样式乱的 在项目刚搭建的时候,我在iconfont上建立了一个图标项目库,把常用的几个图标添加下载到项目中,后来到项目中期的时候,有几个图标要新加入, 在iconfont添加上,下载下面,使用的时

前提条件,知道如何安装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,代码如下: //

一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.createServer(function(req, res) { if(req.url === '/') { res.end("hello index"); } else if(req.url === '/list') { res.end("hello list"); }

gulp图片压缩 网页性能优化,通常要处理图片,尤其图片量大的时候,更需要工具来批量处理,这里使用gulp,做个简单总结 image-resize压缩尺寸 var gulp = require('gulp'); var imageResize = require('gulp-image-resize'); gulp.task('resize', function() { return gulp.src('./images/**/*') .pipe(imageResize({ width: 400

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

<?php echo ">> 图片的地址,css里面的要打单引号\r\n"; echo ">> 相同的图片,使用css实现图片地址只出现一次,有助于减小文件体积\r\n"; echo ">> 因为凡是出现图片地址的地方,都会被转换成base64字符串\r\n"; $dirs = scandir('./'); if(count($dirs)<3) die('bad dir');// echo $_di

图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding:0;max-width:690px;width:expression(this.width>690?”690px”:this.width);max-height:690px;height:expression(this.height>690?”690px”:this.height);}

前言: 近期研究着前端性能的优化方面的知识,并以博客记之.之前有相同系列的文章(前端性能优化--图片懒加载(lazyload image)),这次继续是关于图片的处理,css sprites 和 base64 格式图片,这两种处理都是通过减少了http的请求来达到前端性能优化的效果,请求减少,与服务器连接次数减少,加载页面的时间就快了,如是甚好. Css Sprites: 介绍: Css Sprites(雪碧图或css精灵),是网页图片处理的一种方式,它允许你将一个页面涉及到的所有零星图片都包含

在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例),让大家可以了解并掌握css的display属性设置img图片居中的两种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助. 首先我们来了解一下display属性实现图片居中的两种方法是什么? 1.利用display的table-cell属性值,再配合text-align: cen

1,给png图片加上后缀@3x #!/bin/sh #root_src=$(dirname $(PWD)) #echo ${root_src} image_path=${root_src}/imagesecho ${image_path} # find ${image_path} -name *.png -exec echo {} \; # find ${image_path} -name *.png -o -name *.jpg -print # find ${image_path} -pat

一.初始化 首先先做一个项目初始化,用来记录你项目中用到的工具 再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化 输入命令yarn add gulp -g  --- 全局安装gulp,这里我提前已经安装过了就不演示了,然后再输入命令yarn add gulp -S 局部安装,都安装完成过后输入命令 gulp -v,如果出现两个版本号,就代表都安装成功了 接着在你的项目文件夹下新建一个文件名为 gulpFile.js js文件,名字必须叫这个,官方规定的,用来写gulp

1.压缩tinypng图片   gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = require('gulp'); // 获取 gulp-imagemin 模块 var imagemin = require('gulp-tinypng-nokey') // 压缩图片任务 // 在命令行输入 gulp-tinypng-nokey 启动此任务 gulp.task('images',

最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Content/”以及“./Content/”之类的,但实际操作并没能实现新上传的图片路径加载到css代码中.首页部分css代码贴出: /*--banner--*/ .banner { background:url(../images/banner-1.jpg) no-repeat 0px 0px; back

1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加载,但因为AngularJS对异步加载不是很好,需要引入第三方库,会更复杂,而且文件数量没有减少,本质上没有变.然后通过尝试合并压缩js/css.压缩img来减少文件数量和文件大小,最终使得加载速度大大提高.下面记录一下整个优化的过程. 2 步骤摘要 (1)安装nodejs (2)安装gulp及其他

Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安装 全局安装 $ npm install gulp -g 进入项目跟目录,初始化 npm init , 然后安装: $ npm install gulp 安装插件 sass的编译(gulp-ruby-sass) 自动添加css前缀(gulp-autoprefixer) 压缩css(gulp-clea