1. 程式人生 > >gulp打包及對應requirejs檔案打包

gulp打包及對應requirejs檔案打包

//引入gulp和gulp外掛
var gulp = require(‘gulp’),
// cssmin = require(‘gulp-clean-css’), //壓縮css
runSequence = require(‘run-sequence’),
rev = require(‘gulp-rev’), //新增版本號
revCollector = require(‘gulp-rev-collector’), //新增版本號
clean = require(‘gulp-clean’); //清理文目標資料夾

// imagemin = require('gulp-imagemin'),				//圖片壓縮
// cache = require('gulp-cache'),						//快取處理
// htmlmin = require('gulp-htmlmin'),					//壓縮html
// replace = require('gulp-replace'),					//替換路徑
// uglify = require('gulp-uglify'),					//壓縮js
// jshint = require('gulp-jshint')	;					//js語法檢查

//定義css、js檔案路徑,是本地css,js檔案的路徑,可自行配置
// var cssUrl = [‘dist//.css’,'dist/.css’],
// imgUrl = ['dist/
/.{png,jpg,gif,ico}’,'dist/.{png,jpg,gif,ico}’],
// jsUrl = [‘dist/**/.js’,’!dist/trd/requirejs/.js’,’!dist/…/*.min.js’]

var cssUrl = [‘dist//.css’,'dist/.css’],
imgUrl = ['dist/
/.{png,jpg,gif,ico}’,'dist/.{png,jpg,gif,ico}’],
jsUrl = [‘dist//*.js’,’!dist/

/*.min.js’];

gulp.task(“clean”,function(){
return gulp.src(‘dist/*’,{read:false})
.pipe(clean());
});

gulp.task(‘copy’, function() {
return gulp.src(‘df/**/’)
.pipe(gulp.dest(‘dist’))
});
// gulp.task(“copy”,function(){
// return gulp.src('df/
’)
// .pipe(gulp.dest(‘dist’));
// });

//img生成檔案hash編碼並生成 rev-manifest.json檔名對照對映
gulp.task(‘revImg’, function () {
return gulp.src(imgUrl)
// .pipe(cache(imagemin())) //沒有修改的圖片直接從快取檔案讀取
.pipe(rev())
.pipe(rev.manifest())//- 生成一個rev-manifest.json
.pipe(gulp.dest(‘rev/img’));
});

//CSS生成檔案hash編碼並生成 rev-manifest.json檔名對照對映
gulp.task(‘revCss’, function(){
return gulp.src(cssUrl)
// .pipe(cssmin())
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(‘rev/css’));
});

//js生成檔案hash編碼並生成 rev-manifest.json檔名對照對映
gulp.task(‘revJs’, function(){
return gulp.src(jsUrl)
// .pipe(jshint())
// .pipe(uglify())
.pipe(rev())
.pipe(rev.manifest())//- 生成一個rev-manifest.json
.pipe(gulp.dest(‘rev/js’));
});
//Html更換css、js檔案版本
// gulp.task(‘revUrl’, function() {
// gulp.src([‘rev/{css,img,js}/.json’,'dist/**/.html’,’!dist/**/*._html’]) //- 讀取 rev-manifest.json 檔案以及需要進行css名替換的檔案
// .pipe(revCollector({
// replaceReved:true //一定要加上這一句,不然不會替換掉上一次的值
// })) //- 執行檔案內css名的替換
// .pipe(gulp.dest(‘dist’)); //- 替換後的檔案輸出的目錄

// //gulp.src([‘rev/{css,img,js}/.json’, 'dist/**/.css’])
// //.pipe(revCollector({replaceReved:true}))
// //.pipe(gulp.dest(‘dist’));

// //gulp.src([‘rev/js/.json’,'dist/**/.js’])
// //.pipe(revCollector({replaceReved:true}))
// //.pipe(gulp.dest(‘dist’));

// });

//Html更換css、js檔案版本
gulp.task(‘revHtml’, function () {
return gulp.src([‘rev//*.json’,'dist//*.html’]) /WEB-INF/views是本地html檔案的路徑,可自行配置/
.pipe(revCollector({replaceReved:true}))
.pipe(gulp.dest(‘dist’)); /Html更換css、js檔案版本,WEB-INF/views也是和本地html檔案的路徑一致/
});

//更換RequireJs引用檔案版本
gulp.task(‘revRequireJs’, function () {
return gulp.src([‘rev/js/.json’,'dist/**/.js’])
.pipe(revCollector({replaceReved:true}))
.pipe(gulp.dest(‘dist’));
});
還有一些node工具包檔案要進行對應修改後續進行上傳