美文网首页
gulp压缩合并文件

gulp压缩合并文件

作者: 闲人追风落水 | 来源:发表于2019-07-12 19:33 被阅读0次

gulp压缩合并文件流程

//引入gulp和gulp插件
var gulp = require('gulp');
var rev = require('gulp-rev');
var replace = require('gulp-replace');
var revCollector = require('gulp-rev-collector');
var runSequence = require('run-sequence');

var buildBasePath = '../xxxxx/'; //构建输出的目录
var revPath = 'xxxx/'; //版本号更改映射地址,必填

var concat = require('gulp-concat'), //合并文件
uglify = require('gulp-uglify'), //js压缩
rename = require('gulp-rename'), //文件重命名
//notify = require('gulp-notify'), //提示
minifyCss = require('gulp-minify-css'), //压缩css
watch = require('gulp-watch'), //自动监听更新
inject = require('gulp-inject');//注入文件

// 读取gulp_combine_file文件中的被修改的文件名单并处理被修改的文件
//这里是针对git提交后的修改文件目录进行的操作
//想要处理所有的文件可以直接 省去文件读取的步骤

gulp.task("dirJs", function() {
var arrTemp = [];
var result = [];
var fs = require('fs');
var data = fs.readFileSync('./gulp_combine_file.txt');
arrTemp = data.toString();
arrTemp = arrTemp.replace(/\/g, "/")
arrTemp = arrTemp.split("\n");
//筛选js文件
for(var i = 0; i < arrTemp.length; i++) {
if(arrTemp[i].indexOf(".js") > 0) {
result.push('../xxxxx/' + arrTemp[i])
}
}
console.log(result);
console.log(typeof result);
return gulp.src(result, {
base: '../trade_h5ss/Static/js/v1.0'
})
.pipe(uglify()) //压缩
.pipe(gulp.dest('../trade_h5ss/Static/js/v1.0'))
})

//压缩所有的/Static/js/v1.0下所有的css文件,压缩的后的文件替换原来的文件
gulp.task("dirCss", function() {
var arrTemp = [];
var result = [];
var fs = require('fs');
var data = fs.readFileSync('./gulp_combine_file.txt');
arrTemp = data.toString();
arrTemp = arrTemp.replace(/\/g, "/")
arrTemp = arrTemp.split("\n");
//筛选css文件
for(var i = 0; i < arrTemp.length; i++) {
if(arrTemp[i].indexOf(".css") > 0) {
result.push('../trade_h5ss/' + arrTemp[i])
}
}
console.log(result);
console.log(typeof result);
return gulp.src(result, {
base: '../trade_h5ss/Static/css/v1.0'
})
.pipe(minifyCss()) //压缩css
.pipe(gulp.dest('../trade_h5ss/Static/css/v1.0'))
})

//合并压缩后的文件,只合并部分可以合并的 写入文件
gulp.task("allCommonjs", function() {
var arrTemp = '';
var fs = require('fs');
var data = fs.readFileSync('./gulp_combine_file.txt');
arrTemp = data.toString();
arrTemp = arrTemp + "\nStatic/js/v1.0/common/allCommon.min.js";
fs.writeFile('./gulp_combine_file.txt', arrTemp, {
flag: 'w',
encoding: 'utf-8'
}, function(err) {
if(err) {
console.log("文件写入失败")
} else {
console.log("文件写入成功");
}
})
return gulp.src([
"Static/lib/jquery/jquery-3.1.0.min.js",
"Static/lib/tools/layer.js",
"Static/lib/tools/md5.js",
"Static/lib/tools/fastclick.js",
"Static/js/v1.0/config.js",
"Static/js/v1.0/h5config.js",
"Static/js/v1.0/hclott.js",
"Static/js/v1.0/common.js",
"Static/js/v1.0/jump.js",
"Static/js/v1.0/hcTradePic.js",
"Static/js/v1.0/common/alljs.js",
"Static/lib/swiper/swiper-4.2.6.min.js"
])
.pipe(concat('jquery-3.1.0.min.js')) //合并js
.pipe(uglify()) //压缩
//.pipe(rename({suffix:'zixun'})) //重命名
.pipe(rename('allCommon.min.js')) //重命名
.pipe(gulp.dest('../trade_h5ss/Static/js/v1.0/common')) //输出
})
//注入文件 把压缩合并后的替换原来的大数量的引用 //注意此处需要在html中同时标注需要被替换的部分
//js : css:
gulp.task('injectAllCommonJs', function() {
var target = gulp.src(['../trade_h5ss/*/.html']);
var sources = gulp.src([
'Static/js/v1.0/common/allCommon.min.js'
], {
read: false
});
return target.pipe(inject(sources))
.pipe(gulp.dest('../trade_h5ss/'));
});

相关文章

  • gulp压缩合并文件

    gulp压缩合并文件流程 //引入gulp和gulp插件var gulp = require('gulp');va...

  • gulp-concat js-压缩并合并

    引入 gulp 模块 引入 uglify 压缩 模块 引入 js 合并模块 压缩 并 合并 js文件

  • 前端自动化工具之gulp

    gulp 作用压缩、合并js和css 文件 文件的压缩合并可以减少缓存 减少文件的网络请求可以提高网页速度,所以g...

  • gulp-css压缩

    gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是一个基于流的构建工具,可...

  • 优化资源

    文件最小化/文件压缩 js和css文件通过gulp,webpack等工具合并、压缩,减少用户流量,小图片可以在打包...

  • gulp详解一

    gulp简介 gulp,是基于nodejs的前端自动化构建工具,用于压缩项目文件,合并文件,部署等,简言之,就是解...

  • Gulp总结

    # gulp 前端自动化构建工具,可以进行文本合并,文件拷贝,js压缩,css压缩,图片压缩等。 ### 入门 1...

  • 项目构建

    项目构建 gulp 合并、编译、压缩等 简单 使用 webpack 合并、编译、压缩等 强大 使用

  • Gulp总结

    gulp 前端自动化构建工具,可以进行文本合并,文件拷贝,js压缩,css压缩,图片压缩等。 入门 全局安装 gu...

  • gulp 压缩合并文件

    本文记录了在开发过程中用到的gulp使用方法。 安装 1、初始化 2、安装gulp及依赖工具 使用 1、创建 gu...

网友评论

      本文标题:gulp压缩合并文件

      本文链接:https://www.haomeiwen.com/subject/uioykctx.html