gulp的使用2

结合我平时的工作，我把gulp重新整理了一份新的，增加了一些新的功能

'use strict';
//载入gulp核心包
const gulp        = require("gulp");
const concat      = require('gulp-concat');
const uglify      = require('gulp-uglify');
const imagemin    = require('gulp-imagemin');
const connect     = require("gulp-connect");
const htmlmin     = require("gulp-htmlmin");
const babel       = require("gulp-babel");
const browserSync = require('browser-sync');
const reload      = browserSync.reload;
const cache       = require('gulp-cache');
const clean       = require('gulp-clean');
const assetRev    = require("gulp-asset-rev");
var base64        = require('gulp-base64');
var notify        = require('gulp-notify');
var path = {
    HTML: "src/*.html",
    CSS: "src/css/*.css",
    JS: "src/js/*.js",
    Images: 'src/images/*.*'
};
//gulp是用来帮我们执行一些重复操作
//如何定义一个任务
//第一个参数是任务名，第二个参数是任务的执行体
gulp.task('dest', function() {
    //文件copy
    gulp.src('src/**/*.*') //src下面所有目录文件
        //让文件流走向下一个环节
        .pipe(gulp.dest('dist/')); //dest指定文件输出地方


});


//清除
gulp.task("clean", function() {
    return gulp.src('dist/*')
        .pipe(clean());
});
//压缩html
gulp.task("htmlmin", function() {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    gulp.src('src/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist'));
});
//ES6转ES5
gulp.task("babelIt", function() {
    return gulp.src("src/js/main.js") // ES6 源码存放的路径 
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(gulp.dest("dist/js"))
        .pipe(browserSync.stream()); //转换成 ES5 存放的路径
});




//HTML 代码复用实践
var fileinclude = require('gulp-file-include');


gulp.task('fileinclude', function() {
    return gulp.src('src/**.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('dist'));
});
//压缩js并增加版本号
gulp.task("jsmins", function() {
    return gulp.src(['src/js/*.js'])
        .pipe(uglify())
        .pipe(assetRev())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});
//增加css的版本号并把小于20kB的图片64位编码
gulp.task('revCss', function() {
    return gulp.src('src/css/*.css')
        .pipe(base64({
            baseDir: 'src/css',
            extensions: ['png', 'jpg'],
            maxImageSize: 20 * 1024, // bytes
            debug: false
        }))
        .pipe(assetRev())
        .pipe(gulp.dest('dist/css/'))
        .pipe(browserSync.stream());
});


//压缩新增的图片
gulp.task('imagemin', function() {
    return gulp.src('src/images/*')
        .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
        .pipe(gulp.dest('dist/images'))
        .pipe(browserSync.stream());
});
//html复用生成并添加版本号
gulp.task('rev', ['revCss', 'jsmins', 'imagemin'], function() {
    return gulp.src("src/*.html")
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(assetRev())
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.stream());
});
//保存即刷新起新的服务器
gulp.task('server', function() {
    browserSync({
        server: {
            baseDir: 'src'
        }
    });
    // gulp.watch(path.CSS, ["revCss"]);
    // gulp.watch(path.JS, ["revJs"]);
    // gulp.watch(path.HTML, ["rev"]);
    // gulp.watch(path.Images, ["imagemin"]);
    gulp.watch("src/**/*.*").on('change', browserSync.reload);
});




gulp.task('build', ['clean'], function() {
    gulp.start('rev', 'server', function() {
        console.log('tasks complete');
    });


});