[gulp进阶] gulpfile 发布配置（2） -- browser-sync 用法

[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:欢迎转载，不用署名，就说你写的。

以上。