參考整理了一份gulpfile.js
阿新 • • 發佈:2019-01-03
{
"name": "driveRepertory",
"version": "1.0.0",
"devDependencies": {
"autoprefixer": "^8.2.0",
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"grunt": "^1.0.2",
"gulp": "^3.9.1",
"gulp-asset-rev": "0.0.15",
"gulp-load-plugins": "^1.5.0" ,
"postcss-cli": "^5.0.0",
"run-sequence": "^2.2.1"
},
"dependencies": {
"del": "^3.0.0",
"gulp-csso": "^3.0.1",
"gulp-file-include": "^2.0.1",
"gulp-html-minify": "0.0.14",
"gulp-rev": "^8.1.1",
"gulp-rev-collector": "^1.3.1",
"gulp-uglify": "^3.0.0",
"vue": "2.5.15"
}
}
var gulp = require('gulp');
var runSequence = require('run-sequence');
var fileinclude = require('gulp-file-include');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var del = require('del');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso' );
var htmlmini = require('gulp-html-minify');
//定義csc/js/html原始檔路徑
var cssSrc = 'src/assets/style/*.css'
var jsSrc = 'src/controller/*.js';
var htmlSrc = 'src/static/*.html';
//修改版本號css/js/html的輸出目錄
var cssDist = 'dist/assets/style'
var jsDist = 'dist/controller';
var htmlDist = 'dist/static';
// 構建前先刪除dist檔案裡的舊版本
gulp.task('del',function () {
del('dist');
})
//“src/a.js”:指定具體檔案;
// “*”:匹配所有檔案 例:src/*.js(包含src下的所有js檔案);
// “**”:匹配0個或多個子資料夾 例:src/**/*.js(包含src的0個或多個子資料夾下的js檔案);
// “{}”:匹配多個屬性 例:src/{a,b}.js(包含a.js和b.js檔案) src/*.{jpg,png,gif}(src下的所有jpg/png/gif檔案);
// “!”:排除檔案 例:!src/a.js(不包含src下的a.js檔案);
gulp.task('copy', function() {
return gulp.src(['src/**/*','!src/static/**','!src/controller/*','!src/assets/style/*'],{ base: 'src' })
.pipe(gulp.dest('dist'))
});
//CSS生成檔案hash編碼並生成 rev-manifest.json檔名對照對映
gulp.task('revCss', function () {
return gulp.src(cssSrc)
.pipe(rev())
.pipe(csso()) //壓縮css
.pipe(gulp.dest(cssDist))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成檔案hash編碼並生成 rev-manifest.json檔名對照對映
gulp.task('revJs', function () {
return gulp.src(jsSrc)
.pipe(rev())
.pipe(uglify()) // 壓縮js
.pipe(gulp.dest(jsDist)) //生成帶版本號的檔案
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//Html替換css、js檔案版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', htmlSrc])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
})) //加入header/footer
.pipe(revCollector())
.pipe(htmlmini()) // 壓縮html
.pipe(gulp.dest(htmlDist));
});
//開發構建
gulp.task('dev', function (done) {
condition = false;
runSequence(
['del'],
['copy'],
['revCss'],
['revJs'],
['revHtml'],
done);
});