//npm install gulp-rev --save-dev
var gulp = require('gulp'),
minifycss = require('gulp-clean-css'), //使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存。
concat = require('gulp-concat'), //使用gulp-concat合并javascript文件,减少网络请求。
uglify = require('gulp-uglify'), //使用gulp-uglify压缩javascript文件,减小文件大小
rev = require('gulp-rev'), //添加版本号
revCollector = require('gulp-rev-collector'), //静态资源路径替换
replace = require('gulp-replace'), //替换路径
rename = require('gulp-rename'), //修改文件名,例如将demo.css修改为demo.min.css,一般配合gulp-minify-css/gulp-uglify压缩插件一起使用
clean = require('gulp-clean');//- 清空文件夹,避免资源冗余
//==============================清空文件夹,避免资源冗余js==================//
gulp.task('clean', function () {
gulp.src(['./Content/css/buildCSS', './buildComponents'], {read: false})
.pipe(clean());
gulp.src('./buildJS', {read: false})
.pipe(clean());
gulp.src('./rev', {read: false})
.pipe(clean());
});
//调试版,未压缩文件,页面引用原地址
gulp.task('dev',function () {
//========================CSS压缩=================================//
//公共模块(基本+图标+模态框)
gulp.src(['./Content/css/Layout/base.css', './Content/css/Layout/icon.css', './Components/Modal/K12.css', './Components/Modal/Modal.css'])
.pipe(concat('base.css'))
.pipe(gulp.dest('./Content/css/Module'))
//头尾的样式(Header + Footer)
gulp.src(['./Components/Header/Header.css', './Components/Header/K12.css', './Components/Footer/Footer.css', './Components/Footer/K12.css'])
.pipe(concat('HeaderFooter.css'))
.pipe(gulp.dest('./Components/Header'))
//===============================js压缩===========================//
//公共模块(配置+公用方法+模态框)
gulp.src(['./Config_param.js', './Scripts/hex_tools.js', './Scripts/vm_config.js', './Scripts/common-3.0.js', './Components/Modal/Modal.js'])
.pipe(concat('base.js'))
.pipe(gulp.dest('./Scripts'))
})
//测试版,已压缩文件
gulp.task('debug', function () {
//========================CSS压缩=================================//
//公共模块(基本+图标+模态框)
gulp.src(['./Content/css/Layout/base.css', './Content/css/Layout/icon.css', './Components/Modal/K12.css', './Components/Modal/Modal.css'])
.pipe(minifycss())
.pipe(concat('base.css'))
.pipe(gulp.dest('./Content/css/Module'))
//头尾的样式(Header + Footer)
gulp.src(['./Components/Header/Header.css', './Components/Header/K12.css', './Components/Footer/Footer.css', './Components/Footer/K12.css'])
.pipe(minifycss())
.pipe(concat('HeaderFooter.css'))
.pipe(gulp.dest('./Components/Header'))
//单个页面css文件
gulp.src("./Content/css/Module/*.css")
.pipe(minifycss())
.pipe(gulp.dest('./Content/css/buildCSS'))
// //组件库css文件,生成到源文件夹下
// gulp.src('./Components/**/*.css', function (err, files) {
// files.map(function (entry) {
// var destUrl = entry.substring(0, entry.lastIndexOf('/'));
// return gulp.src(entry)
// .pipe(minifycss())
// .pipe(gulp.dest(destUrl));
// })
// })
//组件库css文件
gulp.src("./Components/**/*.css")
.pipe(minifycss())
.pipe(gulp.dest('./buildComponents'))
//===============================js压缩===========================//
//公共模块(配置+公用方法+模态框)
gulp.src(['./Config_param.js', './Scripts/hex_tools.js', './Scripts/vm_config.js', './Scripts/common-3.0.js', './Components/Modal/Modal.js'])
.pipe(uglify())
.pipe(concat('base.js'))
.pipe(gulp.dest('./Scripts'))
//单个页js文件
gulp.src("./Scripts/**/*.js")
.pipe(uglify())
.pipe(gulp.dest('./buildJS'))
//组件库js文件
gulp.src("./Components/**/*.js")
.pipe(uglify())
.pipe(gulp.dest('./buildComponents'))
//=======================压缩图片================================//
//组件库img文件
gulp.src('./Components/**/img/*.{png,jpg,gif,ico}')
.pipe(gulp.dest('./buildComponents'))
//======================替换相对路径=========================//
gulp.src(['./*.html'])
.pipe(replace('/Module', '/buildCSS')) //替换css文件
.pipe(replace('/Scripts', '/buildJS')) //替换js文件
.pipe(replace('/Components', '/buildComponents')) //替换Components文件
.pipe(gulp.dest('./'));
gulp.src(['./Pages/**/*.html'])
.pipe(replace('/Module', '/buildCSS'))
.pipe(replace('/Scripts', '/buildJS')) //替换js文件
.pipe(replace('/Components', '/buildComponents')) //替换Components文件
.pipe(gulp.dest('./Pages'));
});
//线上版,已压缩文件,已加上版本号
gulp.task('default', function () {
//========================CSS压缩=================================//
//公共模块(基本+图标+模态框)
gulp.src(['./Content/css/Layout/base.css', './Content/css/Layout/icon.css', './Components/Modal/K12.css', './Components/Modal/Modal.css'])
.pipe(minifycss())
.pipe(concat('base.css'))
.pipe(gulp.dest('./Content/css/Module'))
//头尾的样式(Header + Footer)
gulp.src(['./Components/Header/Header.css', './Components/Header/K12.css', './Components/Footer/Footer.css', './Components/Footer/K12.css'])
.pipe(minifycss())
.pipe(concat('HeaderFooter.css'))
.pipe(gulp.dest('./Components/Header'))
//单个页面css文件
gulp.src("./Content/css/Module/*.css")
.pipe(minifycss())
.pipe(rev()) //添加版本号
.pipe(gulp.dest('./Content/css/buildCSS'))
.pipe(rev.manifest({
merge: true //合并为true,合并生成的json文件
})) //- 生成一个rev-manifest.json;
.pipe(gulp.dest('rev/css/Content'));
//组件库css文件
gulp.src("./Components/**/*.css")
.pipe(minifycss())
.pipe(rev()) //添加版本号
.pipe(gulp.dest('./buildComponents'))
.pipe(rev.manifest({
merge: true //合并为true,合并生成的json文件
})) //- 生成一个rev-manifest.json;
.pipe(gulp.dest('rev/css/Components'));
//===============================js压缩===========================//
//公共模块(配置+公用方法+模态框)
gulp.src(['./Config_param.js', './Scripts/hex_tools.js', './Scripts/vm_config.js', './Scripts/common-3.0.js', './Components/Modal/Modal.js'])
.pipe(uglify())
.pipe(concat('base.js'))
.pipe(gulp.dest('./Scripts'));
//单个页js文件
gulp.src("./Scripts/**/*.js")
.pipe(uglify())
.pipe(rev()) //添加版本号
.pipe(gulp.dest('./buildJS'))
.pipe(rev.manifest({
merge: true //合并为true,合并生成的json文件
})) //- 生成一个rev-manifest.json;
.pipe(gulp.dest('rev/js/Scripts'));
//组件库js文件
gulp.src("./Components/**/*.js")
.pipe(uglify())
.pipe(rev()) //添加版本号
.pipe(gulp.dest('./buildComponents'))
.pipe(rev.manifest({
merge: true //合并为true,合并生成的json文件
})) //- 生成一个rev-manifest.json;
.pipe(gulp.dest('rev/js/Components'));
//=======================压缩图片================================//
//组件库img文件
gulp.src('./Components/**/img/*.{png,jpg,gif,ico}')
.pipe(gulp.dest('./buildComponents'))
//======================替换相对路径=========================//
gulp.src(['./*.html'])
.pipe(replace('/Module', '/buildCSS')) //替换css文件
.pipe(replace('/Scripts', '/buildJS')) //替换js文件
.pipe(replace('/Components', '/buildComponents')) //替换Components文件
.pipe(gulp.dest('./'));
gulp.src(['./Pages/**/*.html'])
.pipe(replace('/Module', '/buildCSS'))
.pipe(replace('/Scripts', '/buildJS')) //替换js文件
.pipe(replace('/Components', '/buildComponents')) //替换Components文件
.pipe(gulp.dest('./Pages'));
});
//==========================//替换资源文件引用===============================//
gulp.task("revUrl",function () {
//替换html页面引用的样式和脚本
gulp.src(['./rev/{css,js}/**/*.json', './*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('./')); //- 替换后的文件输出的目录
gulp.src(['./rev/{css,js}/**/*.json', './Pages/**/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('./Pages')); //- 替换后的文件输出的目录
})