ret body compile path browser 生產環境 環境 pfile mini

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‘]); })

一份比較完整的gulpfile.js