gulp的使用2

来源：互联网发布：网络伤感情歌2016 编辑：程序博客网时间：2024/05/17 03:49

结合我平时的工作，我把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');
});

});

0 0