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裡的檔案隨之變化

此處還要注意各檔案引用路徑，生成處並不一樣