一份比較完整的gulpfile.js
阿新 • • 發佈:2018-02-26
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‘]); })
//轉碼 var sass = require(‘gulp-sass‘); var babel = require(‘gulp-babel‘); var css_base64 = require(‘gulp-css-base64‘);
//版本控制 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)); })
}) //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