[gulp进阶] gulpfile 发布配置（2） -- browser-sync 用法
公司项目用gulp蛮多的，根据自己平时的一些积累和收集的浅薄知识，为各位介绍平时项目经常使用的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:欢迎转载，不用署名，就说你写的。
以上。
