项目上配置的gulp配置文件，省的以后重新配置。
// gulpfile.jsconst gulp = require('gulp')const babel = require('gulp-babel')const sass = require('gulp-sass')const fileSystem = require('fs')const watch = require('gulp-watch')const changed = require('gulp-changed')// 浏览器前缀const postcss = require('gulp-postcss')const autoprefixer = require('autoprefixer')// 压缩CSSconst minifyCSS = require('gulp-minify-css')const rename = require('gulp-rename')// 雪碧图const spriter = require('gulp-spriter')// 编译失败处理const notify = require('gulp-notify')const plumber = require('gulp-plumber')const sourcemaps = require('gulp-sourcemaps')// 浏览器重载const browserSync = require('browser-sync').create()const reload = browserSync.reload// 代理const proxy = require('http-proxy-middleware')// 路径替换const replace = require('gulp-replace')// 打包工具const runSequence = require('gulp-sequence').use(gulp)// 清空distconst clean = require('gulp-clean')const rev = require('gulp-rev')const revCollector = require('gulp-rev-collector')// const assetRev= require('gulp-asset-rev');// 项目目录const dirs = {dist: './dist',src: './src',lib: './src/lib',css: './src/style/css',js: './src/script/js',images: './src/images',slice: './src/images/slice',sass: './src/style/sass',sassCom: './src/style/sass/components',es6: './src/script/es6'}// 图片压缩gulp.task('minify-img', () => {const imagemin = require('gulp-imagemin')const pngquant = require('imagemin-pngquant')const smushit = require('gulp-smushit')return gulp.src(dirs.images + '/*.*').pipe(imagemin({progressive: true,use: [pngquant()]})).pipe(smushit()).pipe(gulp.dest(dirs.images))})// 生成目录gulp.task('create', () => {const mkdirp = require('mkdirp')for (let i in dirs) {mkdirp(dirs[i], err => {err ? console.log(err) : console.log('mkdir-->' + dirs[i])})}})// 开发服务器gulp.task('server', ['sass', 'babel'], () => {// 配置代理// let middleware = proxy('/api', {// target: '/',// changeOrigin: true// })browserSync.init({server: {baseDir: [dirs.src, dirs.dist],// middleware: [middleware]}})gulp.watch(dirs.src + '/*.html', reload)gulp.watch(dirs.css + '/*.css', reload)gulp.watch(dirs.js + '/*.js', reload)gulp.watch(dirs.sass + '/*.scss', ['sass'])gulp.watch(dirs.es6 + '/*.js', ['babel'])watch(dirs.src + '/*.html').on('add', function() {gulp.watch(dirs.src + '/*.html', reload)})watch(dirs.css + '/*.css').on('add', function() {gulp.watch(dirs.css + '/*.css', reload)})watch(dirs.js + '/*.js').on('add', function() {gulp.watch(dirs.js + '/*.js', reload)})watch(dirs.es6 + '/*.js').on('add', function() {gulp.watch(dirs.es6 + '/*.js', ['babel'])}).on('unlink', function(file) {// 移除该文件相关的编译文件let fileName = file.split('\\')let _file = fileName[fileName.length - 1]fileSystem.existsSync(dirs.js + '/' + _file) &&fileSystem.unlink(dirs.js + '/' + _file)fileSystem.existsSync(dirs.js + '/' + _file + '.map') &&fileSystem.unlink(dirs.js + '/' + _file + '.map')console.log('删除文件:' + dirs.js + '/' + _file)})watch(dirs.sass + '/*.scss').on('add', function() {gulp.watch(dirs.sass + '/*.scss', ['sass'])}).on('unlink', function(file) {let fileName = file.split('\\')let _file = fileName[fileName.length - 1].replace('scss', 'css')fileSystem.existsSync(dirs.css + '/' + _file) &&fileSystem.unlink(dirs.css + '/' + _file)fileSystem.existsSync(dirs.css + '/' + _file + '.map') &&fileSystem.unlink(dirs.css + '/' + _file + '.map')console.log('删除文件:' + dirs.css + '/' + _file)})watch(dirs.sassCom + '/*.scss').on('add', function() {gulp.watch(dirs.sassCom + '/*.scss', ['sass'])})})// sassgulp.task('sass', () => {return (gulp.src(dirs.sass + '/*.scss')// .pipe(changed(dirs.sass + '/*.scss'))// .pipe(changed(dirs.css, {extension: '.css'})).pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })).pipe(sourcemaps.init()).pipe(sass()).pipe(postcss([autoprefixer({browsers: ['last 30 versions', 'Android >= 3.0', 'not ie <= 7']})])).pipe(spriter({sprite: 'sprites.png',slice: './src/images/slice',outpath: './src/images'})).pipe(minifyCSS({ keepBreaks: true })).pipe(replace('/images/', '../../images/')).pipe(replace('images/', '../../images/')).pipe(sourcemaps.write('.')).pipe(gulp.dest(dirs.css)))})// babelgulp.task('babel', () => {return gulp.src(dirs.es6 + '/*.js').pipe(changed(dirs.es6 + '/*.js')).pipe(changed(dirs.js, { extension: '.js' })).pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })).pipe(sourcemaps.init()).pipe(babel({presets: ['env']})).pipe(sourcemaps.write('.')).pipe(gulp.dest(dirs.js))})// 打包1 cleargulp.task('clear', () => {const clean = require('gulp-clean')return gulp.src('./dist', { read: false }).pipe(clean())})// 打包2 cssgulp.task('movecss', () => {return gulp.src(dirs.css + '/*.*').pipe(replace('../../images/', '../images/')).pipe(rev()).pipe(gulp.dest(dirs.dist + '/css')).pipe(rev.manifest()).pipe(gulp.dest(dirs.dist + '/css'))})// 打包3 jsgulp.task('movejs', () => {return gulp.src(dirs.js + '/*.*').pipe(replace('../../images/', '../images/')).pipe(rev()).pipe(gulp.dest(dirs.dist + '/js')).pipe(rev.manifest()).pipe(gulp.dest(dirs.dist + '/js'))})// 打包4 图片gulp.task('moveimg', () => {return gulp.src(dirs.images + '/*.*').pipe(gulp.dest(dirs.dist + '/images'))})// 打包5 html// gulp.task('movehtml', () => {// return (//gulp// .src('./src/*.html')// // .pipe(assetRev())// .pipe(replace('./style/css', './css'))// .pipe(replace('style/css', './css'))// .pipe(replace('./script/js', './js'))// .pipe(replace('script/js', './js'))// .pipe(gulp.dest(dirs.dist))// )// })gulp.task('movehtml', () => {return (gulp.src([dirs.dist + '/css/*.json', dirs.dist + '/js/*.json', './src/*.html']).pipe(replace('./style/css', './css')).pipe(replace('style/css', './css')).pipe(replace('./script/js', './js')).pipe(replace('script/js', './js')).pipe(revCollector()).pipe(gulp.dest(dirs.dist)))})gulp.task('moveFavicon', () => {return (gulp.src('./src/favicon.ico').pipe(gulp.dest(dirs.dist)))})/*** gulp-asset-rev => 版本号调整* var verStr = (options.verConnecter || "-") + md5;* src = src + "?v=qfl"+verStr;*/// 打包6 libgulp.task('movelib', () => {return gulp.src('./src/lib/**/*').pipe(gulp.dest(dirs.dist + '/lib'))})// zipgulp.task('zip', () => {const zip = require('gulp-zip')return gulp.src(['**/dist/**/*', '!**/node_modules/**/*.*']).pipe(zip('dist.zip')).pipe(gulp.dest('./'))})// 打包gulp.task('build',runSequence('clear','movecss','movejs','minify-img','moveimg','movehtml','movelib','moveFavicon'// ,'zip'))
需要引入的插件如下
//package.json //运行配置"scripts": {"create": "gulp create","serve": "gulp server","build": "gulp build"},//需要安装的插件devDependencies": {"autoprefixer": "^7.1.4","babel-core": "^6.26.0","babel-preset-env": "^1.6.1","browser-sync": "^2.18.13","gulp": "^3.9.1","gulp-asset-rev": "^0.0.15","gulp-babel": "^7.0.0","gulp-changed": "^3.1.0","gulp-clean": "^0.3.2","gulp-imagemin": "^4.1.0","gulp-minify-css": "^1.2.4","gulp-notify": "^3.0.0","gulp-plumber": "^1.1.0","gulp-postcss": "^7.0.0","gulp-rename": "^1.2.2","gulp-replace": "^0.6.1","gulp-rev": "^9.0.0","gulp-rev-collector": "^1.3.1","gulp-sass": "^3.1.0","gulp-sequence": "^0.4.6","gulp-smushit": "^1.2.0","gulp-sourcemaps": "^2.6.1","gulp-spriter": "^1.1.5","gulp-watch": "^4.3.11","gulp-zip": "^4.0.0","http-proxy-middleware": "^0.17.4","imagemin-pngquant": "^5.0.1","mkdirp": "^0.5.1"}
如果觉得《gulp详细配置 gulpfile.js》对你有帮助，请点赞、收藏，并留下你的观点哦！
