微信分享文章带图片方法
其实很简单。只要你内容页面有图片并且长宽比例是1.6这样分享就有拉~我在博客头部插入一张骚动的图片 每次分享到朋友圈就会带上图片而不是单个连接的标志 ps:确保那张图片被收录过!这点很重要 今天亲测!
其实很简单。只要你内容页面有图片并且长宽比例是1.6这样分享就有拉~我在博客头部插入一张骚动的图片 每次分享到朋友圈就会带上图片而不是单个连接的标志 ps:确保那张图片被收录过!这点很重要 今天亲测!
一、什么是gulp。
gulp和grunt是基于Node.js创建,是一个基于任务的命令行工具,它能够同构减少减少预先需要准备的资源来加速工作流。它将工作包裹进入任务之中,任务会随着你的工作进程自动编译。它与grunt的最大区别就是它充分借鉴了Unix操作系统的管道(pipe)思想,很多人认为,在操作上,它要比Grunt简单。
1、插件职能不够单一
2、插件完成了本不该由插件完成的事情(这个我有点迷糊,为什么说是 things don't need to be plugins?)
3、配置过于复杂
4、由于糟糕的流程控制导致的临时文件/目录
二、安装gulp
1、npm install -g gulp
2、npm install --save-dev gulp 注释:使用–save/–save-dev就可以自动更新package.json
三、使用方法
在项目目录直接新建gulpfile.js文件,gulp就5个方法:task(创建任务),run(跑任务),watch(观察一般文件改的自动运行任务),src(源文件),和dest(输出文件)。
一般前端任务都是一些sass编译、文件合并压缩重命名、制作雪碧图、和脚本检查这几个需要如下插件
gulp-jshint脚本检查 gulp-sass sass编译 gulp-concat 合并 gulp-uglify脚本压缩 gulp-rename重命名 gulp-minify-css css压缩
下面上代码:
/** * 组件安装 * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev */ // 引入 gulp及组件 var gulp = require('gulp'), //基础库 imagemin = require('gulp-imagemin'), //图片压缩 sass = require('gulp-ruby-sass'), //sass minifycss = require('gulp-minify-css'), //css压缩 jshint = require('gulp-jshint'), //js检查 uglify = require('gulp-uglify'), //js压缩 rename = require('gulp-rename'), //重命名 concat = require('gulp-concat'), //合并文件 clean = require('gulp-clean'), //清空文件夹 tinylr = require('tiny-lr'), //livereload server = tinylr(), port = 35729, livereload = require('gulp-livereload'); //livereload // HTML处理 gulp.task('html', function() { var htmlSrc = './src/*.html', htmlDst = './dist/'; gulp.src(htmlSrc) .pipe(livereload(server)) .pipe(gulp.dest(htmlDst)) }); // 样式处理 gulp.task('css', function () { var cssSrc = './src/scss/*.scss', cssDst = './dist/css'; gulp.src(cssSrc) .pipe(sass({ style: 'expanded'})) .pipe(gulp.dest(cssDst)) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(livereload(server)) .pipe(gulp.dest(cssDst)); }); // 图片处理 gulp.task('images', function(){ var imgSrc = './src/images/**/*', imgDst = './dist/images'; gulp.src(imgSrc) .pipe(imagemin()) .pipe(livereload(server)) .pipe(gulp.dest(imgDst)); }) // js处理 gulp.task('js', function () { var jsSrc = './src/js/*.js', jsDst ='./dist/js'; gulp.src(jsSrc) .pipe(jshint('.jshintrc')) .pipe(jshint.reporter('default')) .pipe(concat('main.js')) .pipe(gulp.dest(jsDst)) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(livereload(server)) .pipe(gulp.dest(jsDst)); }); // 清空图片、样式、js gulp.task('clean', function() { gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false}) .pipe(clean()); }); // 默认任务 清空图片、样式、js并重建 运行语句 gulp gulp.task('default', ['clean'], function(){ gulp.start('html','css','images','js'); }); // 监听任务 运行语句 gulp watch gulp.task('watch',function(){ server.listen(port, function(err){ if (err) { return console.log(err); } // 监听html gulp.watch('./src/*.html', function(event){ gulp.run('html'); }) // 监听css gulp.watch('./src/scss/*.scss', function(){ gulp.run('css'); }); // 监听images gulp.watch('./src/images/**/*', function(){ gulp.run('images'); }); // 监听js gulp.watch('./src/js/*.js', function(){ gulp.run('js'); }); }); });
运行的话只需要在工程目录下 gulp yourtaskname 你的任务名就可以了