项目结构如下:

gulpfile.js文件配置如下:

// 引入插件

var gulp = require('gulp');

var browserSync=require('browser-sync').create();

var less= require('gulp-less');

var jsmin=require('gulp-jsmin');

var cleanCSS =require('gulp-clean-css');

var autoprefixer=require('gulp-autoprefixer');

var imagemin=require('gulp-imagemin');

var cssBase64=require('gulp-css-base64');

var include=require('gulp-file-include');

var gulpSequence = require('gulp-sequence');

var reload      = browserSync.reload;

var rev=require('gulp-rev');

var  revCollector=require('gulp-rev-collector');

var minifyHTML  = require('gulp-minify-html');

var uglify =require('gulp-uglify');

var htmlmin =require('gulp-htmlmin');

var clean =require('gulp-clean');

// 开发

gulp.task('ytmless',function(){

gulp.src('./src/less/*.less')

.pipe(cssBase64())

.pipe(less())

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false

}))

.pipe(cleanCSS())

.pipe(gulp.dest('./app/css/'))

.pipe(reload({stream: true}))

});

gulp.task('ytmjs',function(){

gulp.src('./src/js/*.js')

.pipe(uglify())

.pipe(gulp.dest('./app/js/'))

.pipe(reload({stream: true}))

});

gulp.task('ytmlib', function(){

gulp.src('./src/lib')

.pipe(gulp.dest('./app/lib'))

.pipe(reload({stream: true}))

})

gulp.task('ytmimage',function(){

gulp.src('./src/images/')

.pipe(gulp.dest('./app/images/'))

.pipe(reload({stream: true}))

});

gulp.task('ytmhtml',()=>{

return gulp.src('./src/*.html')

.pipe(include())

.pipe(gulp.dest('./app/'))

.pipe(reload({stream: true}))

})

gulp.task('include',function(){

gulp.src('./src/*.html')

.pipe(include({

prefix: '@@',

basepath: '@file'

}))

.pipe(gulp.dest('./app/'))

})

gulp.task('ytmserve',function(){

browserSync.init({

server:'./app',

port:'9090'

})

});

gulp.task('dev',function(cd){

gulpSequence(['ytmlib', 'ytmless','ytmimage', 'ytmjs', 'ytmhtml','include'], 'ytmserve')(cd);

gulp.watch('./src/less/*.less', ['ytmless']);

gulp.watch('./src/*.html', ['ytmhtml']);

gulp.watch('./src/js/*.js', ['ytmjs']);

gulp.watch('./src/lib', ['ytmlib']);

gulp.watch('./src/images', ['ytmimage']);

})

// 生产

gulp.task('buildcss',function(){

gulp.src('./app/css/*.css')

.pipe(rev())

.pipe(gulp.dest('./build/css'))

.pipe(rev.manifest())

.pipe(gulp.dest('./build/rev/css'))

})

gulp.task('buildjs',function(){

gulp.src('./app/js/*.js')

.pipe(rev())

.pipe(gulp.dest('./build/js'))

.pipe(rev.manifest())

.pipe(gulp.dest('./build/rev/js'))

})

gulp.task('buildimg',function(){

gulp.src('./app/images')

.pipe(gulp.dest('./build/images'))

.pipe(reload({stream: true}))

})

gulp.task('buildlib',function(){

gulp.src('./app/lib')

.pipe(gulp.dest('./build/lib'))

.pipe(reload({stream: true}))

})

gulp.task('buildhtml',function(){

gulp.src('./app/*.html')

.pipe(htmlmin({

collapseWhitespace: true,

}))

.pipe(gulp.dest('./build/'))

.pipe(reload({stream: true}))

})

gulp.task('rev',function(){

gulp.src(['./build/rev/**/*.json','./build/*.html'])

.pipe( revCollector({

replaceReved: true

}) )

.pipe( gulp.dest('./build') );

})

gulp.task('clean', function(){

return gulp.src('./build/*')

.pipe(clean({read: false}))

})

gulp.task('build', gulpSequence(['clean','buildcss', 'buildjs', 'buildimg','buildhtml','buildlib','rev']));