與瀏覽器同步的gulp文件集成

所以我一直在想弄清楚如何讓我現在的gulpfile與瀏覽器同步一起工作，並且我迷失在樹林裏。與瀏覽器同步的gulp文件集成

我是Gulp和Browsersync的新手，所以請裸照。我按照這個tutorial設置了我的gulp文件，這讓我有了一口氣。

我遇到的問題是當我嘗試將瀏覽器同步與我的gulp文件集成時。我試圖找出如何使我目前的gulpfile與SASS + CSS注入和重新加載文件中列出的browsersnyc + gulp.js但沒有運氣的功能。

這是我現在建立的gulpfile。在這一點上，我真的不確定如何讓browsersnyc以我運行gulpfile的方式工作。似乎沒有任何工作。我如何配置這個正確的方式？

謝謝

// refferance gulp 
var gulp = require('gulp'); 

// refferance packages installed 
var concat = require('gulp-concat'); 
var cssmin = require('gulp-minify-css'); 
var rename = require('gulp-rename'); 
var scss = require('gulp-sass'); 
var uglify = require('gulp-uglify'); 
var browserSync = require('browser-sync').create(); 

// build server 
gulp.task('serve',['build'], function(event){ 
    browserSync({ 
     server: { 
      baseDir:'./' 
     } 
    }); 
    // watch 
    gulp.watch(".//scss/*.scss", ['sass']); 
    gulp.watch(".//*.html").on('change', browserSync.reload); 
}); 


// set up default task we can use this later to run all of our tasks 
gulp.task('default', function(){ 
    // our default task runs `scripts`, `styles` and `watch` when we enter `gulp` in command line. 
    // Only use this task once we have set up all our other tasks 
    // gulp.task('default',['scripts','styles','watch']); 
}); 


// scripts task 
gulp.task('scripts', function(){ 
    // fetch all files in the .js extension in the /src/js directory 
    return gulp.src('./src/js/*.js') 
    // concatinate files and save as app.js 
    .pipe(concat('app.js')) 
    // save app.js in dest directory 
    .pipe(gulp.dest('./dest/js/')) 
    .pipe(uglify()) 
    // minfiy file and rename to app.min.js 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    // save in dest directory 
    .pipe(gulp.dest('./dest/js')); 
}); 


// styles task 
gulp.task('styles', function(){ 
    // fetch all files with scss extension in /src/scss directory 
    return gulp.src('./src/scss/*.scss') 
    // compile scss 
    .pipe(scss()) 
    // output css in css dest directory 
    .pipe(gulp.dest('./dest/css/')) 
    // minify css 
    .pipe(cssmin()) 
    // rename as styles.min.css 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    // save in same directory 
    .pipe(gulp.dest('./dest/css')) 

    // once css compiles reload browser?? 
    .pipe(browserSync.stream()); 
}); 

// serve up changes?? 
gulp.task('default', ['serve']); 

gulp.watch('./src/js/*.js', ['scripts']); 
gulp.watch('./src/sass/*.scss', ['styles']); 

// watch task 
gulp.task('watch',function(){ 
    // watch js 
    gulp.watch('./src/js/*.js',['scripts']); 
    // watch scss 
    gulp.watch('./src/scss/*.scss',['styles']); 
});

來源

2015-08-27 roygbiv

據我所看到的，你只執行更改到薩斯的SCSS任務，不重裝browsersync。嘗試將觀察報表合併爲一個。您可以觀看一組文件模式，只需結合scss和html即可。

您的服務器將不會使用瀏覽器同步啓動。如果您想要對更改進行自動重新啓動，請嘗試使用nodemon。瀏覽器同步將只將您的現有節點進程代理到系統上的另一個端口。

而且，你有你的系統上安裝browsersync：

npm install -g browser-sync

來源

2015-08-27 06:07:01 Darneas

請問您可以發表一個示例@達納斯還怎樣讓瀏覽器啓動服務器？ – roygbiv

您的服務器將不會使用瀏覽器同步啓動。如果您想要對更改進行自動重新啓動，請嘗試使用nodemon。 – Darneas

所以你需要設置一個單獨的服務器使用瀏覽器同步？ – roygbiv

function watchFiles(isDev) { 
    if (isDev) { 
     gulp.watch([config.sass], ['styles', browserSync.reload]); 
     gulp.watch([config.client + '**/*', '!' + config.sass], browserSync.reload) 
      .on('change', function(event) { changeEvent(event); }); 
    } 
    else { 
     gulp.watch([config.sass, config.js, config.html], ['build', browserSync.reload]) 
      .on('change', function(event) { changeEvent(event); }); 
    } 
}

以上是我如何看文件，並使用browserSync上變化重裝瀏覽器的例子。

來源

2015-08-27 06:10:31 InfinitePrime

與瀏覽器同步的gulp文件集成

回答

相關問題