gulp

Posted 2020-11-17 gudun

var gulp = require(‘gulp‘);
var uglify = require(‘gulp-uglify‘); // 获取 uglify 模块（用于压缩 js）
var minifyCSS = require(‘gulp-minify-css‘); // 获取 minify-css 模块（用于压缩 CSS）
var htmlminify = require("gulp-html-minify");
var imageMin = require(‘gulp-imagemin‘);
var pngquant = require(‘imagemin-pngquant‘);
var connect = require(‘gulp-connect‘)
var livereload = require(‘gulp-livereload‘)
var rev = require(‘gulp-rev‘)
var revReplace = require(‘gulp-rev-replace‘)
var revCollector = require(‘gulp-rev-collector‘)
var runSequence = require(‘run-sequence‘)
var proxy = require(‘http-proxy-middleware‘);
var babel = require(‘gulp-babel‘);
//var del = require(‘del‘);
var path = require(‘path‘)
// 源usr
var src = {
html: [‘./url/pages/*.html‘, ‘./youzb_web/pages/*.html‘],
style: [‘./url/static/css/common/*.css‘, ‘./url/static/css/lib/*.css‘, ‘./url/static/css/module/*.css‘],
script: [‘./url/static/js/common/*.js‘, ‘./url/static/js/lib/*.js‘, ‘./url/static/js/module/*.js‘],
images: [‘./url/static/images‘]
} // 生成
var build = {
path: ‘./build‘,
html: ‘./build/pages‘,
style: [‘./url/build/static/css/common‘, ‘./url/build/static/css/lib‘, ‘./url/build/static/css/module‘],
script: [‘./url/build/static/js/common‘, ‘./url/build/static/js/lib‘, ‘./url/build/static/js/module‘],
images: [‘./url/build/static/images‘]
}
gulp.task(‘script‘, function() {
// 1. 找到文件
gulp.src(src.script, {
base: __dirname
})
// 2. 压缩文件
.pipe(babel({
presets: [‘es2015‘]
})).pipe(uglify()).pipe(rev())
// 3. 另存压缩后的文件
.pipe(gulp.dest(‘build‘))
.pipe(rev.manifest())
.pipe(gulp.dest(‘build/rev/js‘))
})
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task(‘css‘, function() {
// 1. 找到文件
gulp.src(src.style, {
base: __dirname
}).pipe(rev())
// 2. 压缩文件
.pipe(minifyCSS())
// 3. 另存为压缩文件
.pipe(gulp.dest(‘build‘))
.pipe(rev.manifest())
.pipe(gulp.dest(‘build/rev/css‘))
})
gulp.task(‘image‘, function() {
gulp.src(‘./static/images/*.*‘)
.pipe(imageMin({
progressive: true,
use: [pngquant()]
})).pipe(gulp.dest(‘./build/static/images‘))
})
//压缩html
gulp.task(‘build-html‘, function() {
return gulp.src(src.html).pipe(htmlminify()).pipe(gulp.dest(build.html))
});
gulp.task(‘rev‘, function() {
return gulp.src([‘build/rev/**/*.json‘, ‘build/pages/*.html‘]).pipe(revCollector()).pipe(gulp.dest(‘build/pages/‘));
});

gulp.task(‘connect‘, function() {
connect.server({
root: ‘./‘,//项目根路径
port: ‘3000‘,
livereload: true,
host: ‘0.0.0.0‘,
middleware: function(connect, opt) {
return [
proxy(‘/ols‘, {
target: ‘url‘,//代理的ip地址
changeOrigin: true
}),
]
}
});
});
gulp.task(‘watch‘, function() {
livereload.listen();
gulp.watch([‘./**/pages/*.html‘, ‘./**/pages/**/*.html‘, ‘./**/static/**/*.*‘, ‘./**/static/**/**/*.*‘])
.on("change", function(event) {
livereload.changed(event.path)
});
});
// 使用 gulp.task(‘default‘) 定义默认任务
// 在命令行使用 gulp 启动 sass 任务和 auto 任务//
gulp.task(‘default‘, [‘connect‘, ‘watch‘])
gulp.task(‘dev‘, [‘connect‘, ‘watch‘])
gulp.task(‘pro‘, function(done) {
condition = false;
//依次顺序执行
unSequence([‘build-html‘], [‘css‘], [‘script‘], [‘image‘], done);
});gulp.task(‘default‘, [‘dev‘])