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

以上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 959评论 0 1
  • 编辑于2015年 转载自某作者的译文 作者要是看到请联系我注明出处 对网站资源进行优化,并使用不同浏览器测试并不是...
    krock01阅读 455评论 0 2
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 1,088评论 0 8
  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,571评论 1 17
  • 加缪的《局外人》,仅7.5万字(包含译者评价),结构简洁,步步递进。易读,但寓意深刻,发人深省。是很好的周末读物。...
    乔安那阅读 877评论 5 5