javascript 使用BrowserSync的Gulpfile
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 使用BrowserSync的Gulpfile相关的知识,希望对你有一定的参考价值。
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var uglify = require('gulp-uglify');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var manifest = require('./assets/manifest.json');
var config = manifest.config;
// Scripts Task
// Minify JS
gulp.task('scripts', function(){
gulp.src('assets/js/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest('js'))
.pipe(reload({ stream: true }))
});
// Styles Task
// Compile Main Styles
gulp.task('styles', function() {
return sass('assets/scss/style.scss', {
style: 'compressed'
})
.pipe(gulp.dest(''))
.pipe(reload({ stream: true }))
});
// Browser Sync
gulp.task('serve', function() {
browserSync.init( {
proxy: "https://" + config.url,
host: config.host,
notify: false,
});
});
// Configuration file to keep your code DRY
var cfg = require( './gulpconfig.json' );
var paths = cfg.paths;
// Watch Tasks
gulp.task('watch', function() {
// Styles & Scripts to be watched
gulp.watch('assets/js/*.js', ['scripts']);
gulp.watch('assets/scss/**/*.scss', ['styles']);
// browserSync
gulp.watch('**/*.php').on('change', reload);
});
// Gulp
gulp.task('default', ['scripts', 'styles', 'watch', 'serve']);
// Run:
// gulp browser-sync
// Starts browser-sync task for starting the server.
gulp.task( 'browser-sync', function() {
browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
} );
gulp.task( 'watch-bs', ['browser-sync', 'watch'], function() {
} );
以上是关于javascript 使用BrowserSync的Gulpfile的主要内容,如果未能解决你的问题,请参考以下文章
javascript Shopware Grunt BrowserSync Livereload
javascript browserSync
javascript gulp + browsersync
如何使用Gulp Browsersync与Django?
Browsersync 简介 and 使用
Browsersync的安装及使用方法