gulp
//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')); //- 替换后的文件输出的目录 })