一份比较完整的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‘]);

})