一份比较完整的gulpfile.js

var gulp = require('gulp');

//工具

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

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

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

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

//转码

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

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

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

//压缩优化

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

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

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

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

//版本控制

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

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

var delOriginal = require('gulp-rev-delete-original');

//localhost

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

var reload = browserSync.reload;

//路径定义

var srcPath = {

root: 'src',

html: ['src/**/*.html', '!src/include/**/*.html'],

images: 'src/images/*',

css: 'src/css/*.scss',

js: 'src/js/*.js',

library: 'src/library/*.js'

},

distPath = {

root: 'dist',

html: 'dist',

images: 'dist/images',

css: 'dist/css',

js: 'dist/js',

library: 'dist/library',

manifest: 'dist/**/*.json',

};

//插件库处理

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

return gulp.src(srcPath.library)

.pipe(minifyJs())

.pipe(gulp.dest(distPath.library));

})

//生产环境

//css处理

gulp.task('css-dist', () => {

return gulp.src([distPath.manifest, distPath.css + '/*.css'])

.pipe(revCollector())

.pipe(rev())

.pipe(delOriginal())

.pipe(gulp.dest( distPath.css))

.pipe(rev.manifest())

.pipe(gulp.dest( distPath.css))

})

gulp.task('css-compile', () => {

return gulp.src(srcPath.css)

.pipe(css_base64({

maxWeightResource: 8 * 1024,

}))

.pipe(sass())

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false,

}))

.pipe(minifyCss())

.pipe(gulp.dest(distPath.css))

})

//js处理

gulp.task('js-dist', ()=>{

return gulp.src(srcPath.js)

.pipe(babel({

presets: ['env'],

}))

.pipe(minifyJs())

.pipe(rev())

.pipe(gulp.dest(distPath.js))

.pipe(rev.manifest())

.pipe(gulp.dest(distPath.js))

})

//image 处理

gulp.task('images-dist', ()=>{

return gulp.src(srcPath.images)

.pipe(minifyImage())

.pipe(rev())

.pipe(gulp.dest(distPath.images))

.pipe(rev.manifest())

.pipe(gulp.dest(distPath.images))

})

//html 处理

gulp.task('html-dist', ()=>{

return gulp.src([distPath.manifest, ...srcPath.html])

.pipe(include({

}))

.pipe(revCollector())

.pipe(minifyHtml({

collapseWhitespace: true,

}))

.pipe(gulp.dest(distPath.html))

})

//开发环境

//css处理

gulp.task('css-dev', () => {

return gulp.src(srcPath.css)

.pipe(sass())

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false,

}))

.pipe(gulp.dest(distPath.css))

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

})

//js处理

gulp.task('js-dev', ()=>{

return gulp.src(srcPath.js)

// .pipe(babel({

// presets: ['env'],

// }))

.pipe(gulp.dest(distPath.js))

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

})

//library 处理

gulp.task('library-dev', ()=>{

return gulp.src(srcPath.library)

.pipe(gulp.dest(distPath.library))

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

})

//image 处理

gulp.task('images-dev', ()=>{

return gulp.src(srcPath.images)

.pipe(gulp.dest(distPath.images))

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

})

//html 处理

gulp.task('html-dev', ()=>{

return gulp.src(srcPath.html)

.pipe(include({

}))

.pipe(gulp.dest(distPath.html))

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

})

//清除dist目录

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

return gulp.src('dist/*')

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

})

//清除manifest

gulp.task('clean-manifest', ()=>{

return gulp.src('dist/**/*.json')

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

})

//静态服务器

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

browserSync.init({

server: {

baseDir: './dist',

//proxy: 'ip地址',

}

})

})

gulp.task('check-dist', ()=>{

browserSync.init({

server: {

baseDir: './dist',

//proxy: 'ip地址',

}

})

})

// build

gulp.task('build', gulpSequence('clean', ['images-dist', 'js-dist', 'library'], 'css-compile', 'css-dist', 'html-dist', 'clean-manifest'));

// dev

gulp.task('dev', (cb)=>{

gulpSequence('clean', ['library', 'css-dev','images-dev', 'js-dev', 'html-dev'], 'browserSync')(cb);

gulp.watch('src/**/*.scss', ['css-dev']);

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

gulp.watch(srcPath.js, ['js-dev']);

gulp.watch(srcPath.library, ['library-dev']);

gulp.watch(srcPath.images, ['images-dev']);

})