陆启东的博客

其实很简单。只要你内容页面有图片并且长宽比例是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  你的任务名就可以了