多文件自己过滤编辑用gulp更合适 webpack使用单页面应用比较好比如vue react

多文件自己过滤编辑用gulp更合适 webpack使用单页面应用比较好比如vue react

/**
* Created by 37957 on 2018/9/14.
*/
var gulp = require('gulp'),
uglify = require("gulp-uglify"),//亚索js
minifyCss = require("gulp-minify-css"),//亚索css
imagemin = require('gulp-imagemin'),//亚索图片
runSequence = require('run-sequence'),//让进城同步执行
rev = require('gulp-rev'),//添加hash值
revCollector = require('gulp-rev-collector'),//替换html中对应的记录
replace = require('gulp-replace'),//全局替换指定字符
htmlmin = require('gulp-htmlmin'),//亚索html的注释等.
del = require('del'),//亚索html的注释等.
qiniu = require('gulp-qiniu-upload');//上传七牛
//为了适配自己的项目 修改了4处文件.1.gulp-qiniu-upload/index.js 2.qn/lib/client.js 3.gulp-rev-collector/index.js 4.gulp-rev/index.js 5 rev-path/index.js
CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('clean',function(cb){
return del(['dist','disthtml'], cb);
});
gulp.task('minify-js', function () {
return gulp.src('static/**/*.js') // 要压缩的js文件
.pipe(replace(/.\.\/.\.\/img\//g, 'https://tstatic.qiyeos.com/fd/static/img/'))//去掉css js里面的相对路径 用绝对路径代替 ../img
.pipe(replace(/.\.\/img/g, 'https://tstatic.qiyeos.com/fd/static/img/'))//去掉css js里面的相对路径 用绝对路径代替 ../img
.pipe(uglify()) //使用uglify进行压缩,更多配置请参考:
.pipe(rev()) //给文件添加hash编码
.pipe(gulp.dest('dist/fd/static'))
.pipe(rev.manifest()) //生成rev-mainfest.json文件作为记录
.pipe(gulp.dest('dist/jsname'));
});
gulp.task('minify-css', function () {
return gulp.src('static/**/*.css')
.pipe(replace(/.\.\/.\.\/.\.\/img\//g, 'https://tstatic.qiyeos.com/fd/static/img/'))
.pipe(replace(/.\.\/.\.\/img\//g, 'https://tstatic.qiyeos.com/fd/static/img/'))
.pipe(replace(/.\.\/img/g, 'https://tstatic.qiyeos.com/fd/static/img'))
.pipe(minifyCss())
.pipe(rev())
.pipe(gulp.dest('dist/fd/static'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/fd/static'));
});


gulp.task('testImagemin', function () {
gulp.src('static/**/*.{png,jpg,gif,ico}')
//.pipe(imagemin())//图片压缩异步处理.所以后面的图片上传可能会有问题
.pipe(gulp.dest('dist/fd/static'));
});

gulp.task('fonticon', function () {
gulp.src('static/**/*.{eot,svg,ttf,woff}')
.pipe(gulp.dest('dist/fd/static'));
});

//Html替换css、js文件版本
gulp.task('revHtmlCss', function () {
return gulp.src(['dist/fd/static/*.json', 'views/**/*.html'])
.pipe(revCollector({
replaceReved:true //一定要加上这一句,不然不会替换掉上一次的值
})) //替换html中对应的记录
.pipe(gulp.dest('disthtml')); //输出到该文件夹中
});

gulp.task('revHtmlJs', function () {
return gulp.src(['dist/jsname/*.json', 'disthtml/**/*.html'])
.pipe(revCollector({
replaceReved:true
}))
.pipe(gulp.dest('disthtml'));
});
gulp.task('replacehtml', function(){
gulp.src(['disthtml/**/*.html'])
.pipe(replace(/.\.\/.\.\/.\.\//g, 'https://tstatic.qiyeos.com/fd/static/'))
.pipe(replace(/[\'].\.\/.\.\//g, "'https://tstatic.qiyeos.com/fd/static/"))
.pipe(replace(/[\"].\.\/.\.\//g, '"https://tstatic.qiyeos.com/fd/static/'))
.pipe(replace(/\bhref\b\s*=\s*[\'\"]?[.]*\/css/g, 'href="https://tstatic.qiyeos.com/fd/static/css'))
.pipe(replace(/\bsrc\b\s*=\s*[\'\"]?[.]*\/js/g, 'src="https://tstatic.qiyeos.com/fd/static/js'))
.pipe(replace(/\bsrc\b\s*=\s*[\'\"]?[.]*\/img/g, 'src="https://tstatic.qiyeos.com/fd/static/img'))
.pipe(replace(/'\/img\//g, "'https://tstatic.qiyeos.com/fd/static/img/"))
.pipe(replace(/"\/img\//g, '"https://tstatic.qiyeos.com/fd/static/img/'))
.pipe(htmlmin({
removeComments: true, // 清除HTML注释
minifyCSS: true // 压缩页面CSS
}))
.pipe(gulp.dest('disthtml'));
});
//上传
gulp.task('shangchuan', function(){
return gulp.src('dist/**/*.{eot,svg,ttf,woff,ico,js,css}')
.pipe(qiniu({
accessKey: 'ruZbFRRSN-lIeHmIsLx3XCOxnRQ4K7kiI94MbKE8',
secretKey: 'JFrzqrwRs6k83XAPKQ6xzWQAz_iUpmw9UeRcLtMm',
bucket: 'teststatic',
domin:'https://tstatic.qiyeos.com',
private: false
}))
});
//上传
gulp.task('shangchuanimg', function(){
return gulp.src('dist/**/*.{png,jpg,gif}')
.pipe(qiniu({
accessKey: 'ruZbFRRSN-lIeHmIsLx3XCOxnRQ4K7kiI94MbKE8',
secretKey: 'JFrzqrwRs6k83XAPKQ6xzWQAz_iUpmw9UeRcLtMm',
bucket: 'teststatic',
domin:'https://tstatic.qiyeos.com',
private: false
}))
});
//开发构建
gulp.task('default', function (done) {
condition = false;
//依次顺序执行
runSequence(
['clean'],
['minify-js'],
['minify-css'],
['testImagemin'],
['fonticon'],
['revHtmlCss'],
['revHtmlJs'],
['replacehtml'],
['shangchuan'],
['shangchuanimg'],
done);
});
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值