npm install --save-dev gulp-connect
npm install --save-dev gulp-livereload
npm其他，前面已有
1 var gulp = require('gulp'), 2 gulpLoadPlugins = require('gulp-load-plugins'), 3 plugins = gulpLoadPlugins(); 4 5 var paths = { 6 src : "src/", 7 css : "src/css/", 8 scripts : "src/js/", 9 scss : "src/scss/", 10 img : "src/images/", 11 html : "src/html/", 12 build : "build" 13 } 14 //创建服务器 15 gulp.task('webserver',function(){ 16 plugins.connect.server({port:8000,livereload:true}); 17 }); 18 ///////////////////////////////// 19 gulp.task('scripts', function() { 20 return gulp.src(paths.scripts+ "**/*.js") 21 .pipe(plugins.concat('all.js')) 22 .pipe(plugins.uglify()) 23 .pipe(gulp.dest(paths.build + '/js')); 24 }); 25 gulp.task('css', function() { 26 return gulp.src(paths.css+ "**/*.css") 27 .pipe(plugins.concat('all.css')) 28 .pipe(plugins.minifyCss()) 29 .pipe(gulp.dest(paths.build + '/css')); 30 }); 31 gulp.task('html',function(){ 32 return gulp.src(paths.html + "**/*.html") 33 .pipe(gulp.dest(paths.build +'/html')); 34 }); 35 /////////////////////////// 36 gulp.task('reload-dev',['scripts','css','html'],function() { 37 return gulp.src(paths.src + '**/*.*') 38 .pipe(plugins.connect.reload());//服务器重启和各文件变化 39 }); 40 //监听 41 gulp.task('watch', function() { 42 gulp.watch(paths.src + '**/*.*',['reload-dev']); 43 }) 44 45 gulp.task('default', ['webserver','reload-dev','watch']); 46 //此处顺序有先后吗？
这里我打开localhost:8000这个鬼
不好打开生成的html文件，暂手动打开，而且要手动刷新，没有自动刷新
然后src下的js,css,html有变动时，build里的文件随之变化
此处还要注意各文件引用路径，生成处并不一样