2015-10-12 147 views
0

我刚开始学习gulp,我试图使用gulp-connecthttps://www.npmjs.com/package/gulp-connect
这是我的文件结构
enter image description here吞咽连接不起作用吞咽手表

它是我gulpfile.js文件

var gulp = require('gulp'), 
concatCss = require('gulp-concat-css'), 
minifyCss = require('gulp-minify-css'), 
rename = require('gulp-rename'), 
notify = require('gulp-notify'), 
autoprefixer = require('gulp-autoprefixer'), 
livereload = require('gulp-livereload'), 
connect = require('gulp-connect'); 

// server connect 
gulp.task('connect', function() { 
    connect.server({ 
    root: [__dirname], 
    livereload: true 
    }); 
}); 

// css 
gulp.task('css', function() { 
    return gulp.src('css/*.css') 
    /*.pipe(notify('Done!'))*/ 
    .pipe(autoprefixer({ 
      browsers: ['> 1%', 'IE 7'] 
     })) 
    .pipe(concatCss("style.css")) 
    .pipe(minifyCss()) 
    .pipe(rename('style.min.css')) 
    .pipe(gulp.dest('dist/')) 
    .pipe(connect.reload()); 
}); 

//html 
gulp.task('html', function(){ 
    gulp.src('index.html') 
    .pipe(connect.reload()); 
}); 

// watch 
gulp.task('watch', function() { 
    gulp.watch('css/*.css', ['css']); 
    gulp.watch('index.html', ['html']); 
}); 

// default 
gulp.task('default', ['connect', 'html', 'css', 'watch']); 

我不为什么已了解我在node.js中控制台使用命令gulp所有工作正常,但如果我尝试使用命令gulp watch我在浏览器控制台中收到错误
http://localhost:8080/ net::ERR_CONNECTION_REFUSED

http://i.imgur.com/4hTYaBI.png

我做错了什么?

回答

0

运行'watch'时,您没有运行'connect'任务。

重新格式化您的任务,这样

gulp.task('watch:assets', function() { 
    gulp.watch('css/*.css', ['css']); 
    gulp.watch('index.html', ['html']); 
}); 

gulp.task('default', ['connect', 'html', 'css', 'watch:assets']); 
gulp.task('watch', ['connect', 'watch:assets']); 

回到终端,运行

gulp watch