可以的
js创建img,指定位置:
var image = createElement("image")image.src = "位置"
image.id = "img"
2.
(1) 使用CSS接口:
interface CSS{
#img {zoom: 2}
}
setTimeout(function() {
interface CSS
{
#img {zoom: 1}
}}(), 5)
(2) 属性操作:
$('img').zoom = 2setTimeout(function() {$('img').zoom = 1}(), 5)
可知js即可让图片动起来(刚才的实例为放大缩小)
注入package.json(此json文件需要自己在当前项目目录下创建即可--不能有注释)安装:
npm install gulp-uglify --save-dev
全局安装:
npm install gulp-uglify -g
整站静态文件压缩配置文件gulpfile.js(html/css/image/js前提是安装下列require用到的模块):
var gulp = require('gulp'),//基础库
htmlmin = require('gulp-htmlmin'),//html压缩
cssmin = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'),//js检查
uglify = require('gulp-uglify'),//js压缩
imagemin = require('gulp-imagemin'),//图片压缩
pngquant = require('imagemin-pngquant'),//图片深入压缩
imageminOptipng = require('imagemin-optipng'),
imageminSvgo = require('imagemin-svgo'),
imageminGifsicle = require('imagemin-gifsicle'),
imageminJpegtran = require('imagemin-jpegtran'),
domSrc = require('gulp-dom-src'),
cheerio = require('gulp-cheerio'),
processhtml = require('gulp-processhtml'),
Replace = require('gulp-replace'),
cache = require('gulp-cache'),//图片压缩缓存
clean = require('gulp-clean'),//清空文件夹
conCat = require('gulp-concat'),//文件合并
plumber=require('gulp-plumber'),//检测错误
gutil=require('gulp-util')//如果有自定义方法,会用到
var date = new Date().getTime()
gulp.task('clean',function(){
return gulp.src('min/**',{read:false})
.pipe(clean())
})
function errrHandler( e ){
// 控制台发声,错误时beep一下
gutil.beep()
gutil.log(e)
this.emit('end')
}
gulp.task('cleanCash', function (done) {//清除缓存
return cache.clearAll(done)
})
gulp.task('htmlmin', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/>==><input />
removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" />==><input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}
gulp.src(['index/*.htm','index/*.html'])
.pipe(plumber({errorHandler:errrHandler}))
.pipe(Replace(/_VERSION_/gi, date))
.pipe(processhtml())
.pipe(htmlmin(options))
.pipe(gulp.dest('min'))
})
gulp.task('cssmin', function(){
gulp.src('index/**/*.css')
.pipe(conCat('css/index.min.css'))
.pipe(plumber({errorHandler:errrHandler}))
.pipe(cssmin({
advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
keepBreaks: false,//类型:Boolean 默认:false [是否保留换行]
keepSpecialComments: '*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('min'))
})
gulp.task('jsmin', function () {
gulp.src(['index/js/*.js','!index/**/{text1,text2}.js'])
.pipe(conCat('js/index.min.js'))
.pipe(plumber({errorHandler:errrHandler}))
.pipe(uglify({
mangle: {except: ['require' ,'exports' ,'module' ,'$']},//类型:Boolean 默认:true 是否修改变量名
compress: true,//类型:Boolean 默认:true 是否完全压缩
preserveComments: 'false' //保留所有注释
}))
.pipe(gulp.dest('min'))
})
gulp.task('imagemin', function () {
gulp.src('index/**/*.{png,jpg,gif,ico}')
.pipe(plumber({errorHandler:errrHandler}))
.pipe(cache(imagemin({
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant(),imageminJpegtran({progressive: true})
, imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件
})))
.pipe(gulp.dest('min'))
})
gulp.task('default',['clean'],function(){
gulp.start('cssmin','htmlmin','jsmin','imagemin')
})
package.json(例子) package.json详细介绍:https://docs.npmjs.com/files/package.json
(package.json npm init 命令行创建文件方法http://blog.csdn.net/liyanhui1001/article/details/44020235 )
{
"name": "web",
"version": "1.0.0",
"description": "my text",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-concat": "^2.6.0",
"gulp-htmlmin": "^2.0.0",
"gulp-imagemin": "^3.0.1",
"gulp-jshint": "^2.0.1",
"gulp-minify-css": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^1.5.4",
"gulp-util": "^3.0.7",
"imagemin-pngquant": "^5.0.0",
"jshint": "^2.9.2",
"gulp-clean": "^0.3.2"
},
"devDependencies": {
"gulp-cheerio": "^0.6.2",
"gulp-dom-src": "^0.2.0",
"gulp-jslint": "^1.0.1",
"gulp-processhtml": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-webpack": "^1.5.0",
"imagemin-gifsicle": "^5.1.0",
"imagemin-jpegtran": "^5.0.2",
"imagemin-optipng": "^5.1.1",
"imagemin-svgo": "^5.1.0",
"webpack": "^1.13.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" &&exit 1"
},
"keywords": [
"web"
],
"author": "yl",
"license": "ISC"
}
devDependencies里的内容即为你安装gulp的模块插件名称和版本号!
最后,node.js里指定到当前项目目录下输入gulp命令即可:
gulp default
给网址后面添加一个随机数(或者是任意的字符串)即可,比如原来的网址是这样的:http....../.../1.htm
改为
http....../.../1.htm?1234
即可(注意问号不能省)。
浏览器是根据网址来缓存的,所以只要给网址接个尾巴,浏览器就会认为是新网址,就会从网上重新下载数据了。当然,如果下次再次改变了网页内容,这个尾巴就要再次修改。
给css和js添加所谓版本号其实也是同一个原理。这个版本号其实就是给css和js的网址接个尾巴而已。
这个也同样适用网页里面的图片、音乐等资源,事实上只要是http协议的元素都可以利用这个办法来避开缓存实时刷新。