[gulp進(jìn)階] gulpfile 發(fā)布配置（2） -- browser-sync 用法
公司項(xiàng)目用gulp蠻多的谷丸，根據(jù)自己平時(shí)的一些積累和收集的淺薄知識(shí)谱秽，為各位介紹平時(shí)項(xiàng)目經(jīng)常使用的gulpfile配置
const
gulp = require('gulp'),
babel = require('gulp-babel'),
stylus = require('gulp-stylus'),
browserSync = require('browser-sync'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('stylus', () => {
return gulp.src(['./static/stylus/*.styl', './static/stylus/**/*.styl'])
.pipe(stylus())
.pipe(autoprefixer({
browsers: [
'last 4 versions'
]
}))
.pipe(gulp.dest('dist/css/'))
.on('end', () => {
console.log('Build stylus successfully');
})
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('babel', () => {
return gulp.src(['static/js/*.js', 'static/js/**/*.js'])
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist/js/'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('browserSync', () => {
browserSync({
server: {
baseDir: '.'
}
})
});
gulp.task('watch', ['babel', 'browserSync', 'stylus'], () => {
gulp.watch('static/**/*.styl', ['stylus']);
gulp.watch('static/**/*.js', ['babel']);
gulp.watch('*.html', browserSync.reload);
});
覺得我的文章能幫到各位的 可以到gitbub star一下 gulp-awesome-tasks
感謝各位的閱讀。ps:歡迎轉(zhuǎn)載，不用署名，就說你寫的怠苔。
以上。
