2017-06-01 218 views
1

使用gulp-connect插件創建服務器。在觀看功能之前運行服務器功能

代碼很好,但是當我運行gulp時,它開始監視'watch' 如何在創建服務器後運行服務器並運行watch函數。

var gulp = require("gulp"), 
scss = require("gulp-scss"), 
jsmin = require("gulp-jsmin"), 
rename = require("gulp-rename"), 
connect = require("gulp-connect"); 

var path = { 
    src: { 
     js: 'dist/js/**/*.js', 
     css: 'dist/css/**/*.scss', 
     img: 'dist/img/*.*', 
     html: '/**/*.html' 
    }, 
    build: { 
     js: './js/', 
     css: './css/', 
     img: './img/' 
    } 
}; 

/* connect server */ 
gulp.task("connect", function() { 
    connect.server({ 
     root: './', 
     livereload: true 
    }); 
}); 

/* SASS into css */ 
gulp.task("styles", function() { 
    gulp.src(path.src.css) 
     .pipe(scss()) 
     .pipe(gulp.dest(path.build.css)) 
     .pipe(connect.reload()); 
}); 

/* minified JS */ 
gulp.task("scripts", function() { 
    gulp.src(path.src.js) 
     .pipe(jsmin()) 
     .pipe(rename({ suffix: '.min' })) 
     .pipe(gulp.dest(path.build.js)) 
     .pipe(connect.reload()); 
}); 

/* html */ 
gulp.task("html",function(){ 
    gulp.src(path.src.html) 
     .pipe(connect.reload()); 
}); 

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

gulp.task("default", ["connect", 'html', 'styles', 'scripts','watch']); 

如果我跳過watch函數,然後gulp創建服務器。 任何幫助!

回答

2

更改此:

gulp.task("default", ["connect", 'html', 'styles', 'scripts', 'watch']); 

到:

gulp.task("default", ['html', 'styles', 'scripts', 'watch']); 

gulp.task('watch', ['connect'], function(){ 
    gulp.watch([path.src.html],["html"]); 
    gulp.watch([path.src.css],["styles"]); 
    gulp.watch([path.src.js],["scripts"]); 
}); 

現在的 '手錶' 的任務開始前的 '連接' 任務將運行。我認爲那就是你想要的?另外,爲所有任務添加返回語句。如

gulp.task("styles", function() { 
    return gulp.src(path.src.css) ...........